@moontra/moonui-pro 2.20.2 → 2.20.4

package/src/components/navbar/index.tsx

@@ -1,781 +0,0 @@
-"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