File size: 1,144 Bytes
6b7d17f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import { useEffect, useState } from "react"
import { Moon } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuList,
NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
export function Header() {
const [darkMode, setDarkMode] = useState(false)
useEffect(() => {
if (darkMode) document.documentElement.classList.add("dark")
else document.documentElement.classList.remove("dark")
}, [darkMode])
return (
<header className="flex justify-end items-center gap-4 p-6">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Paper</NavigationMenuTrigger>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Github</NavigationMenuTrigger>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
<Button variant="outline" size="icon" onClick={() => setDarkMode(!darkMode)}>
<Moon className="h-5 w-5" />
</Button>
</header>
)
}
|