104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState } from "react";
|
|
import { Menu, X, AlertTriangle, Home, List } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function SiteHeader() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
const routes = [
|
|
{
|
|
href: "/",
|
|
label: "Třída",
|
|
active: pathname === "/",
|
|
icon: Home
|
|
},
|
|
{
|
|
href: "/all",
|
|
label: "Vše",
|
|
active: pathname === "/all",
|
|
icon: List
|
|
}
|
|
];
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="flex h-14 items-center px-4 md:px-8">
|
|
<Button
|
|
variant="ghost"
|
|
className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
>
|
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
<span className="sr-only">Toggle Menu</span>
|
|
</Button>
|
|
|
|
<div className="mr-4 hidden md:flex items-center">
|
|
<Link href="/" className="mr-6 flex items-center space-x-2">
|
|
<span className="hidden font-bold sm:inline-block">
|
|
Mimořádný rozvrh
|
|
</span>
|
|
</Link>
|
|
<nav className="flex items-center space-x-6 text-sm font-medium">
|
|
{routes.map((route) => (
|
|
<Link
|
|
key={route.href}
|
|
href={route.href}
|
|
className={cn(
|
|
"transition-colors hover:text-foreground/80 flex items-center gap-2",
|
|
route.active ? "text-foreground" : "text-foreground/60"
|
|
)}
|
|
>
|
|
<route.icon className="h-4 w-4" />
|
|
{route.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end hidden">
|
|
<div className="w-full flex-1 md:w-auto md:flex-none">
|
|
<span className="font-bold md:hidden">Mimořádný rozvrh</span>
|
|
</div>
|
|
<nav className="flex items-center">
|
|
<Button variant="ghost" size="icon" title="Nahlásit chybu" asChild>
|
|
<Link href="https://github.com/jzitnik/tablescraper/issues/new" target="_blank" rel="noreferrer">
|
|
<AlertTriangle className="h-5 w-5 text-amber-500" />
|
|
<span className="sr-only">Nahlásit chybu</span>
|
|
</Link>
|
|
</Button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{isOpen && (
|
|
<div className="md:hidden border-t p-4 space-y-4 bg-background animate-in slide-in-from-top-5">
|
|
<nav className="flex flex-col space-y-4">
|
|
{routes.map((route) => (
|
|
<Link
|
|
key={route.href}
|
|
href={route.href}
|
|
onClick={() => setIsOpen(false)}
|
|
className={cn(
|
|
"text-sm font-medium transition-colors hover:text-primary p-2 rounded-md hover:bg-muted",
|
|
route.active ? "bg-muted text-foreground" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<route.icon className="h-5 w-5" />
|
|
{route.label}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|