systems-obscure/src/components/Header.tsx

// @ts-nocheck
import { Button } from "@/components/ui/button"
import { useTheme } from "@/context/ThemeProvider"
import { MoonStar } from "lucide-react"
import { Link } from "react-router"
import {
	NavigationMenu,
	NavigationMenuContent,
	NavigationMenuItem,
	NavigationMenuLink,
	NavigationMenuList,
	NavigationMenuTrigger,
	navigationMenuTriggerStyle,
	NavigationMenuViewport,
} from "@/components/ui/navigation-menu"

import { Toggle } from "@/components/ui/toggle"
const Menu = () => {
	return (
		<NavigationMenu>
			<NavigationMenuList>
				{/* Desktop menu - hidden on mobile, visible on md+ */}
				<div className="hidden md:flex md:space-x-1">
					<NavigationMenuItem>
						<NavigationMenuLink
							asChild
							className={navigationMenuTriggerStyle()}
						>
							<Link to="/posts/page/1">Posts</Link>
						</NavigationMenuLink>
					</NavigationMenuItem>
					<NavigationMenuItem>
						<NavigationMenuLink
							asChild
							className={navigationMenuTriggerStyle()}
						>
							<Link to="/about">About</Link>
						</NavigationMenuLink>
					</NavigationMenuItem>
				</div>

				{/* Mobile dropdown - visible only on small screens */}
				<NavigationMenuItem className="md:hidden">
					<NavigationMenuTrigger>Menu</NavigationMenuTrigger>
					<NavigationMenuContent>
						<NavigationMenuLink asChild>
							<Link href="/docs" className="block px-2 py-1.5">
								Posts
							</Link>
						</NavigationMenuLink>
						<NavigationMenuLink asChild>
							<Link href="/docs" className="block px-2 py-1.5">
								About
							</Link>
						</NavigationMenuLink>
					</NavigationMenuContent>
				</NavigationMenuItem>
			</NavigationMenuList>
			<NavigationMenuViewport />
		</NavigationMenu>
	)
}

const Header = () => {
	const { theme, setTheme } = useTheme()
	return (
		<header className="w-full h-12 flex items-center justify-center border-b fixed top-0 z-20 bg-background">
			<div className="w-full px-2 md:px-4 flex items-center justify-between">
				<div className="flex items-center gap-2">
					<Button variant="ghost" asChild>
						<Link to="/">
							<span className="text-lg tracking-normal font-semibold">
								Systems Obscure
							</span>
						</Link>
					</Button>
				</div>
				<div className="flex items-center justify-between gap-2">
					<Menu />
					<Toggle
						pressed={theme === "dark"}
						onPressedChange={() =>
							setTheme(theme === "dark" ? "light" : "dark")
						}
					>
						<MoonStar />
						<span className="hidden sm:block">Dark theme</span>
					</Toggle>

					{/*
          <div className="hidden md:block">
            <Button variant="ghost">
              <GitMerge /> Forgejo
            </Button>

          </div>

					*/}
				</div>
			</div>
		</header>
	)
}

export { Header }