Add template

apps/web/src/components/layout/Header.tsx

@@ -0,0 +1,57 @@
+import { Moon, Sun } from "lucide-react";
+
+import { Button, useTheme } from "@methanium/ui";
+
+const homepageUrl = "https://methanium.net";
+
+export function Header() {
+  const { resolvedPolarity, setTheme } = useTheme();
+  const isDark = resolvedPolarity === "dark";
+
+  return (
+    <header className="sticky top-0 z-40 h-12 border-b border-sidebar-border bg-sidebar text-sidebar-foreground shadow-sm">
+      <div className="flex h-full items-center justify-between overflow-x-auto px-[10px]">
+        <Button
+          nativeButton={false}
+          variant="ghost"
+          size="sm"
+          className="mr-1 shrink-0 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          style={{ width: "46.59px", height: "36px", padding: "3px 13px" }}
+          render={<a href="/" aria-label="Methanium home" />}
+        >
+          <img src="/methanium.svg" alt="" className="h-8 w-6 object-contain" />
+        </Button>
+        <nav
+          className="mr-auto flex h-full shrink-0 items-center"
+          aria-label="Primary"
+        >
+          <Button
+            nativeButton={false}
+            variant="ghost"
+            size="sm"
+            className="h-9 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            render={<a href={homepageUrl} />}
+          >
+            Homepage
+          </Button>
+        </nav>
+        <div className="flex h-full items-center gap-1">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-8 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+            aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+            onClick={() => setTheme(isDark ? "light" : "dark")}
+          >
+            {isDark ? (
+              <Sun className="size-3.5" />
+            ) : (
+              <Moon className="size-3.5" />
+            )}
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+}