The rendered header React element.
export function Header() {
const { isDebugEnabled } = useDebug();
const [isDebugMenuOpen, setIsDebugMenuOpen] = useState(false);
const location = useLocation();
const pathname = getPathname(location);
return (
<TooltipProvider>
<header className="border-border bg-background/80 sticky top-0 z-40 border-b backdrop-blur-xl">
<div className="draglayer w-full">
<div className="relative flex h-16 items-center justify-between px-4">
<div className="pointer-events-none absolute inset-x-6 top-1/2 z-0 h-24 -translate-y-1/2 rounded-full bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-transparent blur-2xl" />
<div className="flex items-center gap-4">
{/* Logo and title */}
<Link to="/" className="non-draggable flex items-center">
<motion.div
className="mr-2"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<img src={appIcon} alt="K2A Logo" className="h-8 w-8" />
</motion.div>
<div className="overflow-hidden whitespace-nowrap">
<p className="text-muted-foreground text-xs tracking-[0.4em] uppercase">
Sync Tool
</p>
<h1 className="font-mono text-lg leading-tight font-semibold">
<span className="hidden bg-gradient-to-r from-blue-500 via-purple-500 to-fuchsia-500 bg-clip-text text-transparent min-[44rem]:inline">
Kenmei → AniList
</span>
<span className="inline bg-gradient-to-r from-blue-500 via-purple-500 to-fuchsia-500 bg-clip-text text-transparent max-[44rem]:inline min-[44rem]:hidden">
K2A
</span>
</h1>
</div>
</Link>
{/* Always visible navigation - icon-only on small screens, icon+text on larger screens */}
<div className="non-draggable">
<NavigationMenu>
<NavigationMenuList className="bg-background/60 flex rounded-full p-1 text-xs font-medium shadow-inner ring-1 shadow-black/5 ring-white/40 backdrop-blur-sm dark:bg-slate-950/60 dark:ring-white/10">
{NAV_ITEMS.map(({ label, to, icon: Icon }) => {
const isActive =
to === "/" ? pathname === "/" : pathname.startsWith(to);
return (
<NavigationMenuItem key={label}>
<Tooltip>
<TooltipTrigger asChild>
<NavigationMenuLink
asChild
className={cn(
"group text-muted-foreground inline-flex h-9 items-center justify-center rounded-full px-3 text-xs font-medium tracking-wide transition-all",
"hover:text-foreground focus-visible:ring-primary/40 hover:bg-white/70 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent focus-visible:outline-hidden",
"data-[state=open]:text-primary data-[state=open]:bg-white/80 dark:hover:bg-slate-900/70 dark:data-[state=open]:bg-slate-900/80",
isActive &&
"text-primary bg-white/80 dark:bg-slate-900/80",
)}
>
<Link
to={to}
className="flex items-center gap-2"
>
<Icon className="h-4 w-4" />
<span className="max-lg:hidden">{label}</span>
</Link>
</NavigationMenuLink>
</TooltipTrigger>
<TooltipContent side="bottom" className="lg:hidden">
{label}
</TooltipContent>
</Tooltip>
</NavigationMenuItem>
);
})}
</NavigationMenuList>
</NavigationMenu>
</div>
</div>
<div className="flex items-center gap-2">
<div className="non-draggable">
<ToggleTheme />
</div>
{isDebugEnabled && (
<div className="non-draggable">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={() => setIsDebugMenuOpen(true)}
className="h-8 w-8 rounded-full"
>
<Bug className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Debug Menu</TooltipContent>
</Tooltip>
</div>
)}
<div className="non-draggable flex">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={minimizeWindow}
className="h-8 w-8 rounded-full"
>
<Minimize2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Minimize</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={maximizeWindow}
className="h-8 w-8 rounded-full"
>
<Maximize2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Maximize</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={closeWindow}
className="hover:bg-destructive hover:text-destructive-foreground h-8 w-8 rounded-full"
>
<X className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Close</TooltipContent>
</Tooltip>
</div>
</div>
</div>
</div>
</header>
{/* Debug Menu */}
<DebugMenu
isOpen={isDebugMenuOpen}
onClose={() => setIsDebugMenuOpen(false)}
/>
</TooltipProvider>
);
}
Header React component that displays the application header with logo, navigation links, theme toggle, and window controls.