@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/sidebar/index.tsx

@@ -1,884 +0,0 @@
-"use client"
-
-import React, { useState, useEffect, useCallback, useRef, useMemo, createContext, useContext } from 'react'
-import { motion, AnimatePresence, useMotionValue, useSpring } from 'framer-motion'
-import { cn } from '../../lib/utils'
-import { Button } from '../ui/button'
-import { ScrollArea } from '../ui/scroll-area'
-import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
-import { Badge } from '../ui/badge'
-import { Separator } from '../ui/separator'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '../ui/hover-card'
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import {
-  Menu,
-  X,
-  ChevronRight,
-  ChevronLeft,
-  ChevronDown,
-  Home,
-  Search,
-  Settings,
-  HelpCircle,
-  Moon,
-  Sun,
-  Monitor,
-  MoreHorizontal,
-  Pin,
-  PinOff,
-  Sparkles,
-  Command
-} from 'lucide-react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu'
-
-// Search Input Component - with local state to prevent focus loss
-const SearchInput = React.memo(({ 
-  searchInputRef,
-  searchPlaceholder,
-  initialValue,
-  onSearchChange,
-  keyboardShortcuts
-}: {
-  searchInputRef: React.RefObject<HTMLInputElement | null>
-  searchPlaceholder: string
-  initialValue: string
-  onSearchChange: (value: string) => void
-  keyboardShortcuts: boolean
-}) => {
-  // Local state to prevent focus loss
-  const [localValue, setLocalValue] = useState<string>(initialValue || '')
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  
-  // Update local value when initial value changes from parent
-  useEffect(() => {
-    setLocalValue(initialValue)
-  }, [initialValue])
-  
-  // Handle input changes locally and debounce to parent
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value
-    setLocalValue(newValue)
-    
-    // Clear previous timeout
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-    }
-    
-    // Debounce the parent update with shorter delay
-    timeoutRef.current = setTimeout(() => {
-      onSearchChange(newValue)
-      // Keep focus on input after state update
-      if (searchInputRef.current) {
-        searchInputRef.current.focus()
-      }
-    }, 150)
-  }, [onSearchChange, searchInputRef])
-  
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [])
-  
-  return (
-    <div className="p-4 border-b">
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
-        <input
-          ref={searchInputRef}
-          type="text"
-          placeholder={searchPlaceholder}
-          value={localValue}
-          onChange={handleChange}
-          autoComplete="off"
-          autoCorrect="off"  
-          autoCapitalize="off"
-          spellCheck="false"
-          className="w-full h-10 pl-9 pr-9 text-sm bg-background border border-input rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-        />
-        {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>
-    </div>
-  )
-})
-
-SearchInput.displayName = 'SearchInput'
-
-export interface SidebarItem {
-  id: string
-  title: string
-  href?: string
-  icon?: React.ReactNode
-  badge?: string | number
-  badgeVariant?: 'secondary' | 'destructive' | 'outline'
-  disabled?: boolean
-  items?: SidebarItem[]
-  action?: () => void
-  tooltip?: string
-  filteredChildren?: SidebarItem[]
-}
-
-export interface SidebarSection {
-  id: string
-  title?: string
-  items: SidebarItem[]
-  collapsible?: boolean
-  defaultExpanded?: boolean
-  showDivider?: boolean
-}
-
-export interface SidebarConfig {
-  sections: SidebarSection[]
-  footer?: SidebarSection
-  showSearch?: boolean
-  searchPlaceholder?: string
-  searchQuery?: string
-  onSearchChange?: (value: string) => void
-  showThemeToggle?: boolean
-  theme?: 'light' | 'dark' | 'system'
-  onThemeChange?: (theme: 'light' | 'dark' | 'system') => void
-  branding?: {
-    logo?: React.ReactNode
-    title?: string
-    href?: string
-  }
-  collapsible?: boolean
-  defaultCollapsed?: boolean
-  floatingActionButton?: boolean
-  floatingActionButtonPosition?: {
-    bottom?: string
-    left?: string
-    right?: string
-    top?: string
-  }
-  floatingActionButtonClassName?: string
-  glassmorphism?: boolean
-  animatedBackground?: boolean
-  keyboardShortcuts?: boolean
-  persistState?: boolean
-  persistKey?: string
-  onStateChange?: (state: SidebarState) => void
-  customStyles?: {
-    background?: string
-    border?: string
-    text?: string
-    hover?: string
-    active?: string
-  }
-}
-
-export interface SidebarState {
-  collapsed: boolean
-  expandedSections: string[]
-  searchQuery: string
-  pinnedItems: string[]
-  recentItems: string[]
-}
-
-interface SidebarProps extends SidebarConfig {
-  className?: string
-  activePath?: string
-  onNavigate?: (href: string) => void
-}
-
-export function Sidebar({
-  sections,
-  footer,
-  showSearch = true,
-  searchPlaceholder = "Search...",
-  searchQuery = '',
-  onSearchChange,
-  showThemeToggle = false,
-  theme = 'system',
-  onThemeChange,
-  branding,
-  collapsible = true,
-  defaultCollapsed = false,
-  floatingActionButton = true,
-  floatingActionButtonPosition = { bottom: '1rem', left: '1rem' },
-  floatingActionButtonClassName,
-  glassmorphism = false,
-  animatedBackground = false,
-  keyboardShortcuts = true,
-  persistState = true,
-  persistKey = 'moonui-sidebar-state',
-  onStateChange,
-  customStyles,
-  className,
-  activePath,
-  onNavigate
-}: SidebarProps) {
-  const [isMobile, setIsMobile] = useState(false)
-  const [isOpen, setIsOpen] = useState(false)
-  const [collapsed, setCollapsed] = useState(defaultCollapsed)
-  const [expandedSections, setExpandedSections] = useState<string[]>([])
-  const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery)
-  const [pinnedItems, setPinnedItems] = useState<string[]>([])
-  const searchInputRef = useRef<HTMLInputElement | null>(null)
-  const mouseX = useMotionValue(0)
-  const mouseY = useMotionValue(0)
-  const springX = useSpring(mouseX, { stiffness: 300, damping: 30 })
-  const springY = useSpring(mouseY, { stiffness: 300, damping: 30 })
-
-  // Load persisted state
-  useEffect(() => {
-    if (persistState && typeof window !== 'undefined') {
-      const savedState = localStorage.getItem(persistKey)
-      if (savedState) {
-        const state = JSON.parse(savedState) as SidebarState
-        setCollapsed(state.collapsed)
-        setExpandedSections(state.expandedSections)
-        setPinnedItems(state.pinnedItems || [])
-      }
-    }
-  }, [persistState, persistKey])
-
-  // Save state changes
-  useEffect(() => {
-    if (persistState && typeof window !== 'undefined') {
-      const state: SidebarState = {
-        collapsed,
-        expandedSections,
-        searchQuery: currentSearchQuery,
-        pinnedItems,
-        recentItems: []
-      }
-      localStorage.setItem(persistKey, JSON.stringify(state))
-      onStateChange?.(state)
-    }
-  }, [collapsed, expandedSections, currentSearchQuery, pinnedItems, persistState, persistKey, onStateChange])
-
-  // Check mobile
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768)
-    }
-    
-    checkMobile()
-    window.addEventListener('resize', checkMobile)
-    return () => window.removeEventListener('resize', checkMobile)
-  }, [])
-
-  // Initialize expanded sections
-  useEffect(() => {
-    const sectionsToExpand = sections
-      .filter(section => section.defaultExpanded !== false)
-      .map(section => section.id)
-    setExpandedSections(sectionsToExpand)
-  }, [sections])
-
-  // 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()
-        searchInputRef.current?.focus()
-      }
-      
-      // Cmd/Ctrl + B to toggle sidebar
-      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
-        e.preventDefault()
-        if (isMobile) {
-          setIsOpen(!isOpen)
-        } else {
-          setCollapsed(!collapsed)
-        }
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [keyboardShortcuts, isMobile, isOpen, collapsed])
-
-  // Mouse tracking for animated background
-  useEffect(() => {
-    if (!animatedBackground) return
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const rect = document.querySelector('.sidebar-container')?.getBoundingClientRect()
-      if (rect) {
-        mouseX.set(e.clientX - rect.left)
-        mouseY.set(e.clientY - rect.top)
-      }
-    }
-
-    document.addEventListener('mousemove', handleMouseMove)
-    return () => document.removeEventListener('mousemove', handleMouseMove)
-  }, [animatedBackground, mouseX, mouseY])
-
-  const toggleSection = useCallback((sectionId: string) => {
-    setExpandedSections(prev =>
-      prev.includes(sectionId)
-        ? prev.filter(id => id !== sectionId)
-        : [...prev, sectionId]
-    )
-  }, [])
-
-  const togglePinItem = useCallback((itemId: string) => {
-    setPinnedItems(prev =>
-      prev.includes(itemId)
-        ? prev.filter(id => id !== itemId)
-        : [...prev, itemId]
-    )
-  }, [])
-
-  const handleItemClick = useCallback((item: SidebarItem) => {
-    if (item.action) {
-      item.action()
-    } else if (item.href && onNavigate) {
-      onNavigate(item.href)
-      if (isMobile) {
-        setIsOpen(false)
-      }
-    }
-  }, [onNavigate, isMobile])
-
-  // Update search query from prop
-  useEffect(() => {
-    setCurrentSearchQuery(searchQuery)
-  }, [searchQuery])
-  
-  // Handle search change
-  const handleSearch = useCallback((value: string) => {
-    setCurrentSearchQuery(value)
-    onSearchChange?.(value)
-  }, [onSearchChange])
-
-  const filterItems = useCallback((items: SidebarItem[], query: string): SidebarItem[] => {
-    if (!query) return items
-    
-    return items.filter(item => {
-      const matchesTitle = item.title.toLowerCase().includes(query.toLowerCase())
-      const hasMatchingChildren = item.items?.some(child =>
-        child.title.toLowerCase().includes(query.toLowerCase())
-      )
-      return matchesTitle || hasMatchingChildren
-    })
-  }, [])
-
-  // Filtered sections memoized to prevent re-renders
-  const filteredSections = useMemo(() => {
-    if (!currentSearchQuery) {
-      return sections.map(section => ({
-        ...section,
-        filteredItems: section.items.map(item => ({
-          ...item,
-          filteredChildren: item.items
-        }))
-      }))
-    }
-    
-    return sections.map(section => ({
-      ...section,
-      filteredItems: filterItems(section.items, currentSearchQuery).map(item => ({
-        ...item,
-        filteredChildren: item.items ? filterItems(item.items, currentSearchQuery) : undefined
-      }))
-    })).filter(section => section.filteredItems.length > 0)
-  }, [sections, currentSearchQuery, filterItems])
-
-  // Collapsed menü için hover content renderer
-  const renderCollapsedHoverContent = useCallback((item: SidebarItem) => {
-    const hasChildren = item.items && item.items.length > 0
-    
-    if (!hasChildren && !item.title) return null
-    
-    return (
-      <div className={cn(
-        "min-w-[200px] p-2",
-        glassmorphism && "bg-background/95 backdrop-blur-sm"
-      )}>
-        <div className="font-medium px-2 py-1 text-sm">{item.title}</div>
-        {hasChildren && (
-          <div className="mt-1 space-y-0.5">
-            {item.items?.map(childItem => {
-              const isChildActive = childItem.href === activePath
-              const hasGrandChildren = childItem.items && childItem.items.length > 0
-              
-              return (
-                <div key={childItem.id} className="relative">
-                  {hasGrandChildren ? (
-                    <HoverCard openDelay={200} closeDelay={100}>
-                      <HoverCardTrigger asChild>
-                        <button
-                          onClick={() => handleItemClick(childItem)}
-                          disabled={childItem.disabled}
-                          className={cn(
-                            "w-full flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-                            "hover:bg-accent hover:text-accent-foreground",
-                            isChildActive && "bg-primary/10 text-primary font-medium",
-                            childItem.disabled && "opacity-50 cursor-not-allowed"
-                          )}
-                        >
-                          <div className="flex items-center gap-2">
-                            {childItem.icon && (
-                              <span className="flex-shrink-0">
-                                {childItem.icon}
-                              </span>
-                            )}
-                            <span className="truncate">{childItem.title}</span>
-                          </div>
-                          <ChevronRight className="h-3 w-3 flex-shrink-0" />
-                        </button>
-                      </HoverCardTrigger>
-                      <HoverCardContent 
-                        side="right" 
-                        align="start"
-                        sideOffset={10}
-                        className={cn(
-                          "p-2",
-                          glassmorphism && "bg-background/95 backdrop-blur-sm"
-                        )}
-                      >
-                        <div className="space-y-0.5">
-                          {childItem.items?.map(grandChild => {
-                            const isGrandChildActive = grandChild.href === activePath
-                            return (
-                              <button
-                                key={grandChild.id}
-                                onClick={() => handleItemClick(grandChild)}
-                                disabled={grandChild.disabled}
-                                className={cn(
-                                  "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-                                  "hover:bg-accent hover:text-accent-foreground",
-                                  isGrandChildActive && "bg-primary/10 text-primary font-medium",
-                                  grandChild.disabled && "opacity-50 cursor-not-allowed"
-                                )}
-                              >
-                                {grandChild.icon && (
-                                  <span className="flex-shrink-0">
-                                    {grandChild.icon}
-                                  </span>
-                                )}
-                                <span className="truncate">{grandChild.title}</span>
-                                {grandChild.badge && (
-                                  <Badge 
-                                    variant={grandChild.badgeVariant || 'secondary'} 
-                                    className="ml-auto flex-shrink-0"
-                                  >
-                                    {grandChild.badge}
-                                  </Badge>
-                                )}
-                              </button>
-                            )
-                          })}
-                        </div>
-                      </HoverCardContent>
-                    </HoverCard>
-                  ) : (
-                    <button
-                      onClick={() => handleItemClick(childItem)}
-                      disabled={childItem.disabled}
-                      className={cn(
-                        "w-full flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
-                        "hover:bg-accent hover:text-accent-foreground",
-                        isChildActive && "bg-primary/10 text-primary font-medium",
-                        childItem.disabled && "opacity-50 cursor-not-allowed"
-                      )}
-                    >
-                      {childItem.icon && (
-                        <span className="flex-shrink-0">
-                          {childItem.icon}
-                        </span>
-                      )}
-                      <span className="truncate">{childItem.title}</span>
-                      {childItem.badge && (
-                        <Badge 
-                          variant={childItem.badgeVariant || 'secondary'} 
-                          className="ml-auto flex-shrink-0"
-                        >
-                          {childItem.badge}
-                        </Badge>
-                      )}
-                    </button>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        )}
-      </div>
-    )
-  }, [activePath, glassmorphism, handleItemClick])
-
-  const renderItem = useCallback((item: SidebarItem, depth = 0, filteredChildren?: SidebarItem[]) => {
-    const isActive = item.href === activePath
-    const isPinned = pinnedItems.includes(item.id)
-    const hasChildren = item.items && item.items.length > 0
-    const isExpanded = expandedSections.includes(item.id)
-    const shouldShowHoverMenu = collapsed && !isMobile && depth === 0 && (hasChildren || item.title)
-
-    const ItemWrapper = item.tooltip && !collapsed ? TooltipTrigger : React.Fragment
-
-    const itemContent = (
-      <button
-        onClick={() => {
-          if (hasChildren) {
-            toggleSection(item.id)
-          } else {
-            handleItemClick(item)
-          }
-        }}
-        className={cn(
-          "w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all",
-          "hover:bg-accent hover:text-accent-foreground",
-          isActive && "bg-primary/10 text-primary font-medium",
-          item.disabled && "opacity-50 cursor-not-allowed",
-          depth > 0 && "ml-6 text-xs",
-          collapsed && depth === 0 && "justify-center px-2",
-          customStyles?.hover
-        )}
-        disabled={item.disabled}
-      >
-        {item.icon && (
-          <span className={cn(
-            "flex-shrink-0",
-            collapsed && depth === 0 && "mx-auto"
-          )}>
-            {item.icon}
-          </span>
-        )}
-        
-        {(!collapsed || depth > 0) && (
-          <>
-            <span className="flex-1 text-left truncate">{item.title}</span>
-            
-            {item.badge && (
-              <Badge 
-                variant={item.badgeVariant || 'secondary'} 
-                className="ml-auto flex-shrink-0"
-              >
-                {item.badge}
-              </Badge>
-            )}
-            
-            {hasChildren && depth === 0 && (
-              <ChevronDown
-                className={cn(
-                  "h-4 w-4 flex-shrink-0 transition-transform",
-                  isExpanded && "rotate-180"
-                )}
-              />
-            )}
-            
-            {isPinned && (
-              <Pin className="h-3 w-3 flex-shrink-0" />
-            )}
-          </>
-        )}
-      </button>
-    )
-
-    // Collapsed durumda hover menü göster
-    if (shouldShowHoverMenu) {
-      return (
-        <div key={item.id}>
-          <HoverCard openDelay={200} closeDelay={100}>
-            <HoverCardTrigger asChild>
-              {itemContent}
-            </HoverCardTrigger>
-            <HoverCardContent 
-              side="right" 
-              align="start"
-              sideOffset={10}
-              className={cn(
-                "p-0 w-auto",
-                glassmorphism && "bg-background/95 backdrop-blur-sm",
-                "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-              )}
-            >
-              <motion.div
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                exit={{ opacity: 0, x: -10 }}
-                transition={{ duration: 0.15 }}
-              >
-                {renderCollapsedHoverContent(item)}
-              </motion.div>
-            </HoverCardContent>
-          </HoverCard>
-        </div>
-      )
-    }
-
-    return (
-      <div key={item.id}>
-        {item.tooltip && !collapsed ? (
-          <TooltipProvider>
-            <Tooltip>
-              <ItemWrapper>
-                {itemContent}
-              </ItemWrapper>
-              <TooltipContent side="right">
-                <p>{item.tooltip}</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        ) : (
-          itemContent
-        )}
-        
-        {hasChildren && !collapsed && filteredChildren && (
-          <AnimatePresence>
-            {isExpanded && (
-              <motion.div
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: "auto", opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="overflow-hidden"
-              >
-                <div className="pt-1 space-y-1">
-                  {filteredChildren.map(child =>
-                    renderItem(child, depth + 1)
-                  )}
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        )}
-      </div>
-    )
-  }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection, isMobile, glassmorphism, renderCollapsedHoverContent])
-
-
-  
-  // Header Component
-  const SidebarHeader = React.memo(() => {
-    return (
-      <div className={cn(
-        "flex items-center gap-3 p-4 border-b",
-        collapsed && !isMobile && "justify-center px-2"
-      )}>
-        {branding && (
-          <>
-            {branding.logo}
-            {(!collapsed || isMobile) && branding.title && (
-              <span className="font-semibold text-lg">{branding.title}</span>
-            )}
-          </>
-        )}
-        
-        {isMobile && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="ml-auto h-8 w-8 p-0"
-            onClick={() => setIsOpen(false)}
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        )}
-        
-        {!isMobile && collapsible && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className={cn(
-              "h-8 w-8 p-0",
-              !collapsed && "ml-auto"
-            )}
-            onClick={() => setCollapsed(!collapsed)}
-          >
-            {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-          </Button>
-        )}
-      </div>
-    )
-  })
-
-
-  // Menu Content
-  const SidebarMenuContent = React.memo(() => {
-    return (
-      <ScrollArea className="flex-1 overflow-y-auto">
-        <div className="p-4 space-y-6">
-          {/* Pinned Items */}
-          {pinnedItems.length > 0 && (!collapsed || isMobile) && (
-            <div>
-              <h4 className="text-xs font-medium text-muted-foreground mb-2">Pinned</h4>
-              <div className="space-y-1">
-                {sections.flatMap(section =>
-                  section.items.filter(item => pinnedItems.includes(item.id))
-                ).map(item => renderItem(item))}
-              </div>
-              <Separator className="mt-4" />
-            </div>
-          )}
-
-          {/* Main Menu Items */}
-          {filteredSections.map((section, index) => (
-            <div key={section.id}>
-              {section.title && (!collapsed || isMobile) && (
-                <h4 className="text-xs font-medium text-muted-foreground mb-2">
-                  {section.title}
-                </h4>
-              )}
-              <div className="space-y-1">
-                {section.filteredItems.map(item => renderItem(item, 0, item.filteredChildren))}
-              </div>
-              {section.showDivider && index < filteredSections.length - 1 && (
-                <Separator className="mt-4" />
-              )}
-            </div>
-          ))}
-        </div>
-      </ScrollArea>
-    )
-  })
-
-  // Footer Component
-  const SidebarFooter = React.memo(() => {
-    return footer ? (
-      <div className="border-t p-4">
-        <div className="space-y-1">
-          {footer.items.map(item => renderItem(item))}
-        </div>
-        
-        {showThemeToggle && (!collapsed || isMobile) && (
-          <div className="mt-3 flex items-center justify-between">
-            <span className="text-xs text-muted-foreground">Theme</span>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-7 px-2">
-                  {theme === 'light' && <Sun className="h-3 w-3" />}
-                  {theme === 'dark' && <Moon className="h-3 w-3" />}
-                  {theme === 'system' && <Monitor className="h-3 w-3" />}
-                </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>
-          </div>
-        )}
-      </div>
-    ) : null
-  })
-
-  const SidebarContent = React.memo(() => {
-    return (
-      <>
-        <SidebarMenuContent />
-        <SidebarFooter />
-      </>
-    )
-  })
-
-  const sidebarClasses = cn(
-    "moonui-pro flex h-full flex-col bg-background border-r",
-    glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
-    collapsed && !isMobile && "w-16",
-    !collapsed && !isMobile && "w-64",
-    customStyles?.background,
-    customStyles?.border,
-    className
-  )
-
-  if (isMobile) {
-    return (
-      <>
-        {floatingActionButton && (
-          <Button
-            onClick={() => setIsOpen(true)}
-            className={cn(
-              "fixed z-40 h-12 w-12 rounded-full shadow-lg md:hidden",
-              floatingActionButtonClassName
-            )}
-            size="icon"
-            style={{
-              bottom: floatingActionButtonPosition?.bottom,
-              left: floatingActionButtonPosition?.left,
-              right: floatingActionButtonPosition?.right,
-              top: floatingActionButtonPosition?.top
-            }}
-          >
-            <Menu className="h-5 w-5" />
-          </Button>
-        )}
-        
-        <Sheet open={isOpen} onOpenChange={setIsOpen}>
-          <SheetContent side="left" className="w-80 p-0">
-            <div className={cn(sidebarClasses, "sidebar-container flex flex-col")}>
-              {animatedBackground && (
-                <motion.div
-                  className="absolute inset-0 opacity-30"
-                  style={{
-                    background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`,
-                  }}
-                />
-              )}
-              <SidebarHeader />
-              {showSearch && (!collapsed || isMobile) && (
-                <SearchInput
-                  key="sidebar-search-mobile"
-                  searchInputRef={searchInputRef}
-                  searchPlaceholder={searchPlaceholder}
-                  initialValue={currentSearchQuery}
-                  onSearchChange={handleSearch}
-                  keyboardShortcuts={keyboardShortcuts}
-                />
-              )}
-              <SidebarContent />
-            </div>
-          </SheetContent>
-        </Sheet>
-      </>
-    )
-  }
-
-  return (
-    <aside className={cn(sidebarClasses, "sidebar-container hidden md:flex flex-col")}>
-      {animatedBackground && (
-        <motion.div
-          className="absolute inset-0 opacity-30"
-          style={{
-            background: `radial-gradient(circle at ${springX}px ${springY}px, rgba(var(--primary-rgb), 0.15), transparent 50%)`,
-          }}
-        />
-      )}
-      <SidebarHeader />
-      {showSearch && (!collapsed || isMobile) && (
-        <SearchInput
-          key="sidebar-search-desktop"
-          searchInputRef={searchInputRef}
-          searchPlaceholder={searchPlaceholder}
-          initialValue={currentSearchQuery}
-          onSearchChange={handleSearch}
-          keyboardShortcuts={keyboardShortcuts}
-        />
-      )}
-      <SidebarContent />
-    </aside>
-  )
-}
-
-export default Sidebar