Webview: bootstrap layout

pkgs/webview-ui/app/src/layout/header.tsx

@@ -0,0 +1,19 @@
+export const Header = () => {
+  return (
+    <div class="navbar bg-base-100">
+      <div class="flex-none">
+        <button class="btn btn-square btn-ghost">
+          <span class="material-icons">home</span>
+        </button>
+      </div>
+      <div class="flex-1">
+        <a class="btn btn-ghost text-xl">Clan</a>
+      </div>
+      <div class="flex-none">
+        <button class="btn btn-square btn-ghost">
+          <span class="material-icons">menu</span>
+        </button>
+      </div>
+    </div>
+  );
+};

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -1,9 +1,35 @@
 import { Component, JSXElement } from "solid-js";
+import { Header } from "./header";
+import { Sidebar } from "../Sidebar";
+import { route, setRoute } from "../App";
 
 interface LayoutProps {
   children: JSXElement;
 }
 
 export const Layout: Component<LayoutProps> = (props) => {
-  return <div class="grid grid-cols-8">{props.children}</div>;
+  return (
+    <>
+      <div class="drawer bg-base-100 lg:drawer-open">
+        <input
+          id="toplevel-drawer"
+          type="checkbox"
+          class="drawer-toggle hidden"
+        />
+        <div class="drawer-content">
+          <Header />
+
+          {props.children}
+        </div>
+        <div class="drawer-side z-40">
+          <label
+            for="toplevel-drawer"
+            aria-label="close sidebar"
+            class="drawer-overlay"
+          ></label>
+          <Sidebar route={route} setRoute={setRoute} />
+        </div>
+      </div>
+    </>
+  );
 };