Navigation Menu

1"use client"
2 
3import * as React from "react"
4import {
5  NavigationMenu as BaseNavigationMenu,
6  NavigationMenuContent as BaseNavigationMenuContent,
7  NavigationMenuItem,
8  NavigationMenuIndicator,
9  NavigationMenuLink,
10  NavigationMenuList as BaseNavigationMenuList,
11  NavigationMenuTrigger,
12  NavigationMenuViewport as BaseNavigationMenuViewport,
13} from "@/components/ui/navigation-menu"
14import { cn } from "@/lib/utils"
15 
16export interface NavigationMenuListProps extends React.ComponentProps<typeof BaseNavigationMenuList> {
17  glow?: boolean
18}
19 
20export interface NavigationMenuContentProps extends React.ComponentProps<typeof BaseNavigationMenuContent> {
21  glow?: boolean
22}
23 
24export interface NavigationMenuViewportProps extends React.ComponentProps<typeof BaseNavigationMenuViewport> {
25  glow?: boolean
26}
27 
28/**
29 * Glass UI Navigation Menu - Enhanced navigation menu with glassy effects
30 */
31export const NavigationMenuList = React.forwardRef<
32  React.ElementRef<typeof BaseNavigationMenuList>,
33  NavigationMenuListProps
34>(({ className, variant = "glass", glow = false, ...props }, ref) => {
35  return (
36    <BaseNavigationMenuList
37      ref={ref}
38      variant={variant}
39      className={cn(
40        glow && "shadow-md shadow-purple-500/20",
41        className
42      )}
43      {...props}
44    />
45  )
46})
47NavigationMenuList.displayName = "NavigationMenuList"
48 
49export const NavigationMenuContent = React.forwardRef<
50  React.ElementRef<typeof BaseNavigationMenuContent>,
51  NavigationMenuContentProps
52>(({ className, variant = "glass", glow = false, ...props }, ref) => {
53  return (
54    <BaseNavigationMenuContent
55      ref={ref}
56      variant={variant}
57      className={cn(
58        glow && "shadow-lg shadow-purple-500/30",
59        className
60      )}
61      {...props}
62    />
63  )
64})
65NavigationMenuContent.displayName = "NavigationMenuContent"
66 
67export const NavigationMenuViewport = React.forwardRef<
68  React.ElementRef<typeof BaseNavigationMenuViewport>,
69  NavigationMenuViewportProps
70>(({ className, variant = "glass", glow = false, ...props }, ref) => {
71  return (
72    <BaseNavigationMenuViewport
73      ref={ref}
74      variant={variant}
75      className={cn(
76        glow && "shadow-lg shadow-purple-500/30",
77        className
78      )}
79      {...props}
80    />
81  )
82})
83NavigationMenuViewport.displayName = "NavigationMenuViewport"
84 
85export {
86  BaseNavigationMenu as NavigationMenu,
87  NavigationMenuItem,
88  NavigationMenuLink,
89  NavigationMenuIndicator,
90  NavigationMenuTrigger,
91}
92