82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import {useState} from "react";
|
|
import {
|
|
NavigationMenu,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
} from "@/components/ui/navigation-menu";
|
|
import {Sheet, SheetContent, SheetTrigger} from "@/components/ui/sheet";
|
|
import {Button} from "@/components/ui/button";
|
|
import {Menu} from "lucide-react";
|
|
|
|
export default function Navbar() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const navItems = [
|
|
{href: "/", label: "Start"},
|
|
{href: "/about", label: "Über mich"},
|
|
{href: "/kontakt", label: "Kontakt"},
|
|
];
|
|
|
|
return (
|
|
<header className="w-full border-b bg-white dark:bg-gray-950 px-4 py-3 shadow-sm">
|
|
<div className="max-w-6xl mx-auto flex justify-between items-center">
|
|
<span className="text-xl font-bold text-gray-900 dark:text-white">
|
|
RA Mustermann
|
|
</span>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex">
|
|
<NavigationMenu>
|
|
<NavigationMenuList className="gap-4">
|
|
{navItems.map((item) => (
|
|
<NavigationMenuItem key={item.href}>
|
|
<NavigationMenuLink asChild>
|
|
<Link
|
|
href={item.href}
|
|
className="text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-primary"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</NavigationMenuLink>
|
|
</NavigationMenuItem>
|
|
))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</nav>
|
|
|
|
{/* Mobile Navigation */}
|
|
<div className="md:hidden">
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" aria-label="Menü öffnen">
|
|
<Menu className="h-6 w-6 text-gray-800 dark:text-gray-200"/>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="right" className="w-[260px] pt-10 px-6">
|
|
<h2 className="text-lg font-semibold tracking-tight mb-6">
|
|
Menü
|
|
</h2>
|
|
<nav className="flex flex-col gap-4">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setOpen(false)}
|
|
className="block px-4 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|