|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { |
| 4 | + NavigationMenu, |
| 5 | + NavigationMenuContent, |
| 6 | + NavigationMenuItem, |
| 7 | + NavigationMenuLink, |
| 8 | + NavigationMenuList, |
| 9 | + NavigationMenuTrigger, |
| 10 | +} from "@/components/ui/navigation-menu"; |
| 11 | +import type { NavLink } from "@/config"; |
| 12 | +import { cn } from "@/lib/utils"; |
| 13 | + |
| 14 | +function isActive(href: string | undefined, currentPath: string) { |
| 15 | + if (!href) return false; |
| 16 | + return currentPath === href || currentPath === href + "/"; |
| 17 | +} |
| 18 | + |
| 19 | +export function DesktopNav({ |
| 20 | + links, |
| 21 | + currentPath, |
| 22 | +}: { |
| 23 | + links: NavLink[]; |
| 24 | + currentPath: string; |
| 25 | +}) { |
| 26 | + if (links.length === 0) return null; |
| 27 | + |
| 28 | + return ( |
| 29 | + <NavigationMenu viewport={false} className="hidden md:flex"> |
| 30 | + <NavigationMenuList className="gap-6"> |
| 31 | + {links.map((link) => { |
| 32 | + // Eintrag mit Unterlinks → Hover-Dropdown |
| 33 | + if (link.items && link.items.length > 0) { |
| 34 | + const active = link.items.some((item) => |
| 35 | + isActive(item.href, currentPath), |
| 36 | + ); |
| 37 | + return ( |
| 38 | + <NavigationMenuItem key={link.label}> |
| 39 | + <NavigationMenuTrigger |
| 40 | + className={cn( |
| 41 | + "h-auto gap-1 bg-transparent px-0 py-0 text-sm font-normal hover:bg-transparent focus:bg-transparent data-open:bg-transparent data-popup-open:bg-transparent", |
| 42 | + active |
| 43 | + ? "text-foreground font-medium" |
| 44 | + : "text-muted-foreground hover:text-foreground data-open:text-foreground", |
| 45 | + )} |
| 46 | + > |
| 47 | + {link.label} |
| 48 | + </NavigationMenuTrigger> |
| 49 | + <NavigationMenuContent> |
| 50 | + <ul className="grid w-48 gap-0.5 p-1.5"> |
| 51 | + {link.items.map((item) => ( |
| 52 | + <li key={item.href}> |
| 53 | + <NavigationMenuLink |
| 54 | + asChild |
| 55 | + active={isActive(item.href, currentPath)} |
| 56 | + > |
| 57 | + <a href={item.href}>{item.label}</a> |
| 58 | + </NavigationMenuLink> |
| 59 | + </li> |
| 60 | + ))} |
| 61 | + </ul> |
| 62 | + </NavigationMenuContent> |
| 63 | + </NavigationMenuItem> |
| 64 | + ); |
| 65 | + } |
| 66 | + |
| 67 | + // Einfacher Link (kein Dropdown) |
| 68 | + const active = isActive(link.href, currentPath); |
| 69 | + return ( |
| 70 | + <NavigationMenuItem key={link.href ?? link.label}> |
| 71 | + <a |
| 72 | + href={link.href} |
| 73 | + className={cn( |
| 74 | + "text-sm transition-colors", |
| 75 | + active |
| 76 | + ? "text-foreground font-medium" |
| 77 | + : "text-muted-foreground hover:text-foreground", |
| 78 | + )} |
| 79 | + aria-current={active ? "page" : undefined} |
| 80 | + > |
| 81 | + {link.label} |
| 82 | + </a> |
| 83 | + </NavigationMenuItem> |
| 84 | + ); |
| 85 | + })} |
| 86 | + </NavigationMenuList> |
| 87 | + </NavigationMenu> |
| 88 | + ); |
| 89 | +} |
0 commit comments