57 lines
2 KiB
TypeScript
57 lines
2 KiB
TypeScript
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={{ padding: "3px 13px" }}
|
|
render={<a href="/" aria-label="Methanium home" />}
|
|
>
|
|
<img src="/methanium.svg" alt="Logo" className="w-[20.59px]!" />
|
|
</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>
|
|
);
|
|
}
|