@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/navbar/index.tsx

@@ -0,0 +1,781 @@
+"use client"
+
+import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cn } from '../../lib/utils'
+import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
+import { Separator } from '../ui/separator'
+import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '../ui/dropdown-menu'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '../ui/navigation-menu'
+import {
+  Menu,
+  X,
+  ChevronDown,
+  Search,
+  Bell,
+  User,
+  Settings,
+  LogOut,
+  Moon,
+  Sun,
+  Monitor,
+  Command,
+  Sparkles
+} from 'lucide-react'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { Input } from '../ui/input'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../ui/command'
+
+export interface NavbarItem {
+  id: string
+  title: string
+  href?: string
+  icon?: React.ReactNode
+  badge?: string | number
+  badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline'
+  disabled?: boolean
+  items?: NavbarItem[]
+  action?: () => void
+  description?: string
+  thumbnail?: string
+}
+
+export interface NavbarSection {
+  id: string
+  items: NavbarItem[]
+  showInMobile?: boolean
+}
+
+export interface NavbarConfig {
+  sections: NavbarSection[]
+  branding?: {
+    logo?: React.ReactNode
+    title?: string
+    href?: string
+  }
+  showSearch?: boolean
+  searchPlaceholder?: string
+  onSearch?: (value: string) => void
+  showThemeToggle?: boolean
+  theme?: 'light' | 'dark' | 'system'
+  onThemeChange?: (theme: 'light' | 'dark' | 'system') => void
+  userMenu?: {
+    user?: {
+      name?: string
+      email?: string
+      avatar?: string
+    }
+    items?: NavbarItem[]
+  }
+  notifications?: {
+    count?: number
+    items?: Array<{
+      id: string
+      title: string
+      description?: string
+      time?: string
+      read?: boolean
+    }>
+    onNotificationClick?: (id: string) => void
+  }
+  cta?: {
+    text: string
+    href?: string
+    action?: () => void
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+  }
+  sticky?: boolean
+  glassmorphism?: boolean
+  animatedBackground?: boolean
+  keyboardShortcuts?: boolean
+  mobileBreakpoint?: number
+  customStyles?: {
+    background?: string
+    border?: string
+    text?: string
+    hover?: string
+  }
+  variant?: 'default' | 'floating' | 'minimal' | 'transparent'
+  size?: 'sm' | 'md' | 'lg'
+  blur?: boolean
+  shadow?: boolean
+  rounded?: boolean
+  logoPosition?: 'left' | 'center'
+  mobileMenuPosition?: 'left' | 'right'
+  hideOnScroll?: boolean
+  showScrollProgress?: boolean
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+}
+
+interface NavbarProps extends NavbarConfig {
+  className?: string
+  activePath?: string
+  onNavigate?: (href: string) => void
+}
+
+export function Navbar({
+  sections,
+  branding,
+  showSearch = true,
+  searchPlaceholder = "Search...",
+  onSearch,
+  showThemeToggle = false,
+  theme = 'system',
+  onThemeChange,
+  userMenu,
+  notifications,
+  cta,
+  sticky = true,
+  glassmorphism = false,
+  animatedBackground = false,
+  keyboardShortcuts = true,
+  mobileBreakpoint = 768,
+  customStyles,
+  variant = 'default',
+  size = 'md',
+  blur = true,
+  shadow = false,
+  rounded = false,
+  logoPosition = 'left',
+  mobileMenuPosition = 'left',
+  hideOnScroll = false,
+  showScrollProgress = false,
+  maxWidth = '2xl',
+  className,
+  activePath,
+  onNavigate
+}: NavbarProps) {
+  const [isMobile, setIsMobile] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const [isCommandOpen, setIsCommandOpen] = useState(false)
+  const [searchValue, setSearchValue] = useState('')
+  const [scrolled, setScrolled] = useState(false)
+  const [hidden, setHidden] = useState(false)
+  const [scrollProgress, setScrollProgress] = useState(0)
+  const lastScrollY = useRef(0)
+  const navRef = useRef<HTMLElement>(null)
+
+  // Check mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < mobileBreakpoint)
+    }
+    
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [mobileBreakpoint])
+
+  // Handle scroll for sticky navbar and hide on scroll
+  useEffect(() => {
+    if (!sticky && !hideOnScroll && !showScrollProgress) return
+
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY
+      
+      // Set scrolled state
+      setScrolled(currentScrollY > 10)
+      
+      // Hide on scroll
+      if (hideOnScroll) {
+        if (currentScrollY > lastScrollY.current && currentScrollY > 100) {
+          setHidden(true)
+        } else {
+          setHidden(false)
+        }
+        lastScrollY.current = currentScrollY
+      }
+      
+      // Scroll progress
+      if (showScrollProgress) {
+        const winScroll = window.scrollY
+        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight
+        const scrolled = (winScroll / height) * 100
+        setScrollProgress(scrolled)
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [sticky, hideOnScroll, showScrollProgress])
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    if (!keyboardShortcuts) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + K for search
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        setIsCommandOpen(true)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [keyboardShortcuts])
+
+  const handleItemClick = useCallback((item: NavbarItem) => {
+    if (item.action) {
+      item.action()
+    } else if (item.href && onNavigate) {
+      onNavigate(item.href)
+      if (isMobile) {
+        setIsOpen(false)
+      }
+    }
+  }, [onNavigate, isMobile])
+
+  const handleSearch = useCallback((value: string) => {
+    setSearchValue(value)
+    onSearch?.(value)
+  }, [onSearch])
+
+  // Render mega menu content
+  const renderMegaMenuContent = (items: NavbarItem[]) => (
+    <div className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+      {items.map(item => (
+        <NavigationMenuLink
+          key={item.id}
+          className={cn(
+            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            item.disabled && "opacity-50 cursor-not-allowed"
+          )}
+          onClick={() => !item.disabled && handleItemClick(item)}
+        >
+          <div className="flex items-center gap-2">
+            {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+            <div className="text-sm font-medium leading-none">{item.title}</div>
+            {item.badge && (
+              <Badge variant={item.badgeVariant || 'secondary'} className="ml-auto">
+                {item.badge}
+              </Badge>
+            )}
+          </div>
+          {item.description && (
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+              {item.description}
+            </p>
+          )}
+        </NavigationMenuLink>
+      ))}
+    </div>
+  )
+
+  // Render dropdown menu
+  const renderDropdownMenu = (items: NavbarItem[]) => (
+    <>
+      {items.map(item => {
+        if (item.items && item.items.length > 0) {
+          return (
+            <DropdownMenuSub key={item.id}>
+              <DropdownMenuSubTrigger disabled={item.disabled}>
+                <span className="flex items-center gap-2">
+                  {item.icon && <span>{item.icon}</span>}
+                  {item.title}
+                </span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent>
+                {renderDropdownMenu(item.items)}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          )
+        }
+
+        return (
+          <DropdownMenuItem
+            key={item.id}
+            disabled={item.disabled}
+            onClick={() => handleItemClick(item)}
+          >
+            <span className="flex items-center gap-2">
+              {item.icon && <span>{item.icon}</span>}
+              {item.title}
+            </span>
+            {item.badge && (
+              <Badge variant={item.badgeVariant || 'secondary'} className="ml-auto">
+                {item.badge}
+              </Badge>
+            )}
+          </DropdownMenuItem>
+        )
+      })}
+    </>
+  )
+
+  // Mobile menu
+  const MobileMenu = () => (
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="md:hidden">
+          <Menu className="h-5 w-5" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side={mobileMenuPosition} className="w-80 p-0">
+        <div className="flex h-full flex-col">
+          <div className="flex items-center justify-between p-4 border-b">
+            {branding && (
+              <div className="flex items-center gap-2">
+                {branding.logo}
+                {branding.title && (
+                  <span className="font-semibold text-lg">{branding.title}</span>
+                )}
+              </div>
+            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setIsOpen(false)}
+              className="h-8 w-8"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          
+          <div className="flex-1 overflow-y-auto p-4">
+            {sections.map(section => (
+              <div key={section.id} className="space-y-1">
+                {section.items.map(item => (
+                  <div key={item.id}>
+                    {item.items && item.items.length > 0 ? (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            className="w-full justify-between"
+                            disabled={item.disabled}
+                          >
+                            <span className="flex items-center gap-2">
+                              {item.icon && <span>{item.icon}</span>}
+                              {item.title}
+                            </span>
+                            <ChevronDown className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="w-56">
+                          {item.items && renderDropdownMenu(item.items)}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    ) : (
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start"
+                        disabled={item.disabled}
+                        onClick={() => handleItemClick(item)}
+                      >
+                        <span className="flex items-center gap-2">
+                          {item.icon && <span>{item.icon}</span>}
+                          {item.title}
+                        </span>
+                        {item.badge && (
+                          <Badge variant={item.badgeVariant || 'secondary'} className="ml-auto">
+                            {item.badge}
+                          </Badge>
+                        )}
+                      </Button>
+                    )}
+                  </div>
+                ))}
+                <Separator className="my-2" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+
+  // Get height based on size
+  const getHeight = () => {
+    switch (size) {
+      case 'sm': return 'h-14'
+      case 'lg': return 'h-20'
+      default: return 'h-16'
+    }
+  }
+
+  const navClasses = cn(
+    "moonui-pro w-full transition-all duration-300",
+    // Base variant styles
+    variant === 'default' && "border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60",
+    variant === 'floating' && "mx-4 mt-4 rounded-lg border bg-background/95 backdrop-blur shadow-lg",
+    variant === 'minimal' && "bg-background",
+    variant === 'transparent' && "bg-transparent",
+    // Sticky behavior
+    sticky && "sticky top-0 z-50",
+    // Scroll states
+    scrolled && sticky && variant !== 'transparent' && "shadow-sm",
+    scrolled && variant === 'transparent' && "bg-background/95 backdrop-blur border-b",
+    hidden && "-translate-y-full",
+    // Glass effect
+    glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
+    blur && "backdrop-blur-md",
+    shadow && "shadow-lg",
+    rounded && "rounded-lg",
+    // Custom styles
+    customStyles?.background,
+    customStyles?.border,
+    className
+  )
+
+  return (
+    <>
+      <nav ref={navRef} className={navClasses}>
+        <div className={cn(
+          "flex items-center",
+          getHeight(),
+          maxWidth === 'sm' && "container max-w-screen-sm",
+          maxWidth === 'md' && "container max-w-screen-md",
+          maxWidth === 'lg' && "container max-w-screen-lg",
+          maxWidth === 'xl' && "container max-w-screen-xl",
+          maxWidth === '2xl' && "container max-w-screen-2xl",
+          maxWidth === 'full' && "w-full px-4 sm:px-6 lg:px-8"
+        )}>
+          {/* Branding */}
+          {branding && (
+            <div className={cn(
+              "flex items-center gap-2",
+              logoPosition === 'center' && !isMobile ? "absolute left-1/2 -translate-x-1/2" : "mr-4"
+            )}>
+              {logoPosition === 'left' && mobileMenuPosition === 'left' && <MobileMenu />}
+              <a
+                href={branding.href || '/'}
+                onClick={(e) => {
+                  if (branding.href && onNavigate) {
+                    e.preventDefault()
+                    onNavigate(branding.href)
+                  }
+                }}
+                className="flex items-center gap-2"
+              >
+                {branding.logo}
+                {branding.title && !isMobile && (
+                  <span className="font-semibold text-lg">{branding.title}</span>
+                )}
+              </a>
+            </div>
+          )}
+
+          {/* Desktop Navigation */}
+          {!isMobile && (
+            <NavigationMenu className="hidden md:flex">
+              <NavigationMenuList>
+                {sections.map(section => (
+                  <React.Fragment key={section.id}>
+                    {section.items.map(item => {
+                      const hasChildren = item.items && item.items.length > 0
+                      const isActive = item.href === activePath
+
+                      if (hasChildren) {
+                        return (
+                          <NavigationMenuItem key={item.id}>
+                            <NavigationMenuTrigger
+                              className={cn(
+                                isActive && "bg-accent text-accent-foreground",
+                                item.disabled && "opacity-50 cursor-not-allowed"
+                              )}
+                              disabled={item.disabled}
+                            >
+                              <span className="flex items-center gap-2">
+                                {item.icon && <span>{item.icon}</span>}
+                                {item.title}
+                              </span>
+                            </NavigationMenuTrigger>
+                            <NavigationMenuContent>
+                              {item.items && renderMegaMenuContent(item.items)}
+                            </NavigationMenuContent>
+                          </NavigationMenuItem>
+                        )
+                      }
+
+                      return (
+                        <NavigationMenuItem key={item.id}>
+                          <NavigationMenuLink
+                            className={cn(
+                              navigationMenuTriggerStyle(),
+                              isActive && "bg-accent text-accent-foreground",
+                              item.disabled && "opacity-50 cursor-not-allowed"
+                            )}
+                            onClick={() => !item.disabled && handleItemClick(item)}
+                          >
+                            <span className="flex items-center gap-2">
+                              {item.icon && <span>{item.icon}</span>}
+                              {item.title}
+                            </span>
+                            {item.badge && (
+                              <Badge variant={item.badgeVariant || 'secondary'} className="ml-2">
+                                {item.badge}
+                              </Badge>
+                            )}
+                          </NavigationMenuLink>
+                        </NavigationMenuItem>
+                      )
+                    })}
+                  </React.Fragment>
+                ))}
+              </NavigationMenuList>
+            </NavigationMenu>
+          )}
+
+          {/* Right side actions */}
+          <div className="ml-auto flex items-center gap-2">
+            {/* Search */}
+            {showSearch && (
+              <>
+                {isMobile ? (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setIsCommandOpen(true)}
+                  >
+                    <Search className="h-5 w-5" />
+                  </Button>
+                ) : (
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                    <Input
+                      type="search"
+                      placeholder={searchPlaceholder}
+                      className="w-64 pl-9 pr-4 h-9"
+                      value={searchValue}
+                      onChange={(e) => handleSearch(e.target.value)}
+                    />
+                    {keyboardShortcuts && (
+                      <kbd className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 hidden sm:flex">
+                        <span className="text-xs">⌘</span>K
+                      </kbd>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+
+            {/* Theme Toggle */}
+            {showThemeToggle && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon">
+                    {theme === 'light' && <Sun className="h-5 w-5" />}
+                    {theme === 'dark' && <Moon className="h-5 w-5" />}
+                    {theme === 'system' && <Monitor className="h-5 w-5" />}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => onThemeChange?.('light')}>
+                    <Sun className="mr-2 h-4 w-4" />
+                    Light
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onThemeChange?.('dark')}>
+                    <Moon className="mr-2 h-4 w-4" />
+                    Dark
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => onThemeChange?.('system')}>
+                    <Monitor className="mr-2 h-4 w-4" />
+                    System
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+
+            {/* Notifications */}
+            {notifications && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="relative">
+                    <Bell className="h-5 w-5" />
+                    {notifications.count && notifications.count > 0 && (
+                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground flex items-center justify-center">
+                        {notifications.count}
+                      </span>
+                    )}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-80">
+                  <div className="flex items-center justify-between p-4">
+                    <h4 className="text-sm font-semibold">Notifications</h4>
+                    {notifications.count && notifications.count > 0 && (
+                      <Badge variant="secondary">{notifications.count} new</Badge>
+                    )}
+                  </div>
+                  <DropdownMenuSeparator />
+                  <div className="max-h-[300px] overflow-y-auto">
+                    {notifications.items && notifications.items.length > 0 ? (
+                      notifications.items.map(notification => (
+                        <DropdownMenuItem
+                          key={notification.id}
+                          className="flex flex-col items-start p-4 cursor-pointer"
+                          onClick={() => notifications.onNotificationClick?.(notification.id)}
+                        >
+                          <div className="flex w-full items-start justify-between">
+                            <p className={cn(
+                              "text-sm font-medium",
+                              !notification.read && "text-primary"
+                            )}>
+                              {notification.title}
+                            </p>
+                            {!notification.read && (
+                              <span className="h-2 w-2 rounded-full bg-primary" />
+                            )}
+                          </div>
+                          {notification.description && (
+                            <p className="text-xs text-muted-foreground mt-1">
+                              {notification.description}
+                            </p>
+                          )}
+                          {notification.time && (
+                            <p className="text-xs text-muted-foreground mt-2">
+                              {notification.time}
+                            </p>
+                          )}
+                        </DropdownMenuItem>
+                      ))
+                    ) : (
+                      <div className="p-4 text-center text-sm text-muted-foreground">
+                        No notifications
+                      </div>
+                    )}
+                  </div>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+
+            {/* CTA Button */}
+            {cta && (
+              <Button
+                variant={cta.variant || 'primary'}
+                size="sm"
+                onClick={() => {
+                  if (cta.action) {
+                    cta.action()
+                  } else if (cta.href && onNavigate) {
+                    onNavigate(cta.href)
+                  }
+                }}
+                className={!isMobile ? 'ml-2' : ''}
+              >
+                {cta.text}
+              </Button>
+            )}
+
+            {/* User Menu */}
+            {userMenu && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon" className="relative">
+                    <Avatar className="h-8 w-8">
+                      <AvatarImage src={userMenu.user?.avatar} alt={userMenu.user?.name} />
+                      <AvatarFallback>
+                        {userMenu.user?.name?.charAt(0) || <User className="h-4 w-4" />}
+                      </AvatarFallback>
+                    </Avatar>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56">
+                  {userMenu.user && (
+                    <>
+                      <div className="p-2">
+                        <p className="text-sm font-medium">{userMenu.user.name}</p>
+                        <p className="text-xs text-muted-foreground">{userMenu.user.email}</p>
+                      </div>
+                      <DropdownMenuSeparator />
+                    </>
+                  )}
+                  {userMenu.items && renderDropdownMenu(userMenu.items)}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </div>
+        </div>
+
+        {/* Animated background */}
+        {animatedBackground && (
+          <motion.div
+            className="absolute inset-0 -z-10 opacity-30"
+            animate={{
+              background: [
+                'radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%)',
+                'radial-gradient(circle at 80% 50%, rgba(120, 119, 198, 0.3), transparent 50%)',
+                'radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%)',
+              ],
+            }}
+            transition={{
+              duration: 10,
+              repeat: Infinity,
+              ease: "linear"
+            }}
+          />
+        )}
+        
+        {/* Scroll Progress Bar */}
+        {showScrollProgress && (
+          <div className="absolute bottom-0 left-0 w-full h-0.5 bg-muted">
+            <div 
+              className="h-full bg-primary transition-all duration-150"
+              style={{ width: `${scrollProgress}%` }}
+            />
+          </div>
+        )}
+      </nav>
+
+      {/* Command Dialog for search */}
+      <CommandDialog open={isCommandOpen} onOpenChange={setIsCommandOpen}>
+        <CommandInput
+          placeholder={searchPlaceholder}
+          value={searchValue}
+          onValueChange={handleSearch}
+        />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          {sections.map(section => (
+            <CommandGroup key={section.id}>
+              {section.items.map(item => (
+                <CommandItem
+                  key={item.id}
+                  disabled={item.disabled}
+                  onSelect={() => {
+                    handleItemClick(item)
+                    setIsCommandOpen(false)
+                  }}
+                >
+                  <span className="flex items-center gap-2">
+                    {item.icon && <span>{item.icon}</span>}
+                    {item.title}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          ))}
+        </CommandList>
+      </CommandDialog>
+    </>
+  )
+}
+
+export default Navbar