@moontra/moonui-pro 2.5.7 → 2.5.9

package/dist/index.d.ts

@@ -1836,6 +1836,7 @@ interface SidebarConfig {
     footer?: SidebarSection;
     showSearch?: boolean;
     searchPlaceholder?: string;
+    searchQuery?: string;
     onSearchChange?: (value: string) => void;
     showThemeToggle?: boolean;
     theme?: 'light' | 'dark' | 'system';
@@ -1874,7 +1875,7 @@ interface SidebarProps extends SidebarConfig {
     activePath?: string;
     onNavigate?: (href: string) => void;
 }
-declare function Sidebar({ sections, footer, showSearch, searchPlaceholder, onSearchChange, showThemeToggle, theme, onThemeChange, branding, collapsible, defaultCollapsed, floatingActionButton, glassmorphism, animatedBackground, keyboardShortcuts, persistState, persistKey, onStateChange, customStyles, className, activePath, onNavigate }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ sections, footer, showSearch, searchPlaceholder, searchQuery, onSearchChange, showThemeToggle, theme, onThemeChange, branding, collapsible, defaultCollapsed, floatingActionButton, glassmorphism, animatedBackground, keyboardShortcuts, persistState, persistKey, onStateChange, customStyles, className, activePath, onNavigate }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 declare const enhancedButtonVariants: (props?: ({
     variant?: "link" | "default" | "ghost" | "outline" | "secondary" | "destructive" | "gradient" | "glow" | null | undefined;

package/dist/index.mjs

@@ -56306,11 +56306,45 @@ var TableRow2 = t__default.memo(({
   return prevRowId === nextRowId && prevProps.isExpanded === nextProps.isExpanded && prevProps.row.getIsSelected() === nextProps.row.getIsSelected() && prevVisibilityKeys === nextVisibilityKeys && prevVisibilityValues === nextVisibilityValues;
 });
 TableRow2.displayName = "TableRow";
+var SearchInput = t__default.memo(({
+  searchInputRef,
+  searchPlaceholder,
+  value,
+  onChange,
+  keyboardShortcuts
+}) => {
+  const handleChange = useCallback((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
+  return /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: searchInputRef,
+        type: "search",
+        placeholder: searchPlaceholder,
+        value,
+        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 && /* @__PURE__ */ jsxs("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", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
+      "K"
+    ] })
+  ] }) });
+});
 function Sidebar({
   sections,
   footer,
   showSearch = true,
   searchPlaceholder = "Search...",
+  searchQuery = "",
   onSearchChange,
   showThemeToggle = false,
   theme = "system",
@@ -56334,7 +56368,7 @@ function Sidebar({
   const [isOpen, setIsOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
   const [expandedSections, setExpandedSections] = useState([]);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery);
   const [pinnedItems, setPinnedItems] = useState([]);
   const searchInputRef = useRef(null);
   const mouseX = useMotionValue(0);
@@ -56357,14 +56391,14 @@ function Sidebar({
       const state = {
         collapsed,
         expandedSections,
-        searchQuery,
+        searchQuery: currentSearchQuery,
         pinnedItems,
         recentItems: []
       };
       localStorage.setItem(persistKey, JSON.stringify(state));
       onStateChange?.(state);
     }
-  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, persistKey, onStateChange]);
+  }, [collapsed, expandedSections, currentSearchQuery, pinnedItems, persistState, persistKey, onStateChange]);
   useEffect(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < 768);
@@ -56430,6 +56464,12 @@ function Sidebar({
       }
     }
   }, [onNavigate, isMobile]);
+  useEffect(() => {
+    setCurrentSearchQuery(searchQuery);
+  }, [searchQuery]);
+  const handleSearch = useCallback((value) => {
+    onSearchChange?.(value);
+  }, [onSearchChange]);
   const filterItems = useCallback((items, query) => {
     if (!query)
       return items;
@@ -56442,14 +56482,23 @@ function Sidebar({
     });
   }, []);
   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, searchQuery).map((item) => ({
+      filteredItems: filterItems(section.items, currentSearchQuery).map((item) => ({
         ...item,
-        filteredChildren: item.items ? filterItems(item.items, searchQuery) : void 0
+        filteredChildren: item.items ? filterItems(item.items, currentSearchQuery) : void 0
       }))
     })).filter((section) => section.filteredItems.length > 0);
-  }, [sections, searchQuery, filterItems]);
+  }, [sections, currentSearchQuery, filterItems]);
   const renderItem = useCallback((item, depth = 0, filteredChildren) => {
     const isActive2 = item.href === activePath;
     const isPinned = pinnedItems.includes(item.id);
@@ -56525,8 +56574,8 @@ function Sidebar({
       ) })
     ] }, item.id);
   }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection]);
-  const SidebarContent = t__default.memo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: cn(
+  const SidebarHeader = t__default.memo(() => {
+    return /* @__PURE__ */ jsxs("div", { className: cn(
       "flex items-center gap-3 p-4 border-b",
       collapsed && !isMobile && "justify-center px-2"
     ), children: [
@@ -56557,45 +56606,43 @@ function Sidebar({
           children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
         }
       )
-    ] }),
-    showSearch && (!collapsed || isMobile) && /* @__PURE__ */ jsx("div", { className: "p-4 border-b", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
-      /* @__PURE__ */ jsx(
-        MoonUIInputPro,
-        {
-          ref: searchInputRef,
-          type: "search",
-          placeholder: searchPlaceholder,
-          value: searchQuery,
-          onChange: (e) => {
-            setSearchQuery(e.target.value);
-            onSearchChange?.(e.target.value);
-          },
-          autoComplete: "off",
-          autoCorrect: "off",
-          autoCapitalize: "off",
-          spellCheck: "false",
-          className: "pl-9 pr-9"
-        },
-        "sidebar-search-input"
-      ),
-      keyboardShortcuts && /* @__PURE__ */ jsxs("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", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\u2318" }),
-        "K"
-      ] })
-    ] }) }),
-    pinnedItems.length > 0 && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "p-4 border-b", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Pinned" }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sections.flatMap(
-        (section) => section.items.filter((item) => pinnedItems.includes(item.id))
-      ).map((item) => renderItem(item)) })
-    ] }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6", children: filteredSections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
-      section.title && (!collapsed || isMobile) && /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: section.title }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-1", children: section.filteredItems.map((item) => renderItem(item, 0, item.filteredChildren)) }),
-      section.showDivider && index < filteredSections.length - 1 && /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
-    ] }, section.id)) }) }),
-    footer && /* @__PURE__ */ jsxs("div", { className: "border-t p-4", children: [
+    ] });
+  });
+  const searchElement = useMemo(() => {
+    if (!showSearch)
+      return null;
+    return /* @__PURE__ */ jsx(
+      SearchInput,
+      {
+        searchInputRef,
+        searchPlaceholder,
+        value: searchQuery,
+        onChange: handleSearch,
+        keyboardShortcuts
+      }
+    );
+  }, [showSearch, searchPlaceholder, searchQuery, handleSearch, keyboardShortcuts]);
+  const SidebarSearch = t__default.memo(() => {
+    return showSearch && (!collapsed || isMobile) ? searchElement : null;
+  });
+  const SidebarMenuContent = t__default.memo(() => {
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-6", children: [
+      pinnedItems.length > 0 && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: "Pinned" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sections.flatMap(
+          (section) => section.items.filter((item) => pinnedItems.includes(item.id))
+        ).map((item) => renderItem(item)) }),
+        /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
+      ] }),
+      filteredSections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
+        section.title && (!collapsed || isMobile) && /* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-muted-foreground mb-2", children: section.title }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1", children: section.filteredItems.map((item) => renderItem(item, 0, item.filteredChildren)) }),
+        section.showDivider && index < filteredSections.length - 1 && /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "mt-4" })
+      ] }, section.id))
+    ] }) });
+  });
+  const SidebarFooter = t__default.memo(() => {
+    return footer ? /* @__PURE__ */ jsxs("div", { className: "border-t p-4", children: [
       /* @__PURE__ */ jsx("div", { className: "space-y-1", children: footer.items.map((item) => renderItem(item)) }),
       showThemeToggle && (!collapsed || isMobile) && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Theme" }),
@@ -56621,8 +56668,16 @@ function Sidebar({
           ] })
         ] })
       ] })
-    ] })
-  ] }));
+    ] }) : null;
+  });
+  const SidebarContent = t__default.memo(() => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SidebarHeader, {}),
+      /* @__PURE__ */ jsx(SidebarSearch, {}),
+      /* @__PURE__ */ jsx(SidebarMenuContent, {}),
+      /* @__PURE__ */ jsx(SidebarFooter, {})
+    ] });
+  });
   const sidebarClasses = cn(
     "flex h-full flex-col bg-background border-r",
     glassmorphism && "bg-background/80 backdrop-blur-xl border-white/10",
@@ -56643,7 +56698,7 @@ function Sidebar({
           children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
         }
       ),
-      /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarClasses, "sidebar-container"), children: [
+      /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-80 p-0", children: /* @__PURE__ */ jsxs("div", { className: cn(sidebarClasses, "sidebar-container flex flex-col"), children: [
         animatedBackground && /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -56657,7 +56712,7 @@ function Sidebar({
       ] }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex"), children: [
+  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex flex-col"), children: [
     animatedBackground && /* @__PURE__ */ jsx(
       motion.div,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.7",
+  "version": "2.5.9",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/sidebar/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'
+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'
@@ -28,7 +28,6 @@ import {
   Sparkles,
   Command
 } from 'lucide-react'
-import { Input } from '../ui/input'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -37,6 +36,50 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu'
 
+// Search Input Component
+const SearchInput = React.memo(({ 
+  searchInputRef, 
+  searchPlaceholder,
+  value,
+  onChange,
+  keyboardShortcuts 
+}: {
+  searchInputRef: React.RefObject<HTMLInputElement | null>
+  searchPlaceholder: string
+  value: string
+  onChange: (value: string) => void
+  keyboardShortcuts: boolean
+}) => {
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }, [onChange])
+  
+  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" />
+        <input
+          ref={searchInputRef}
+          type="search"
+          placeholder={searchPlaceholder}
+          value={value}
+          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>
+  )
+})
+
 export interface SidebarItem {
   id: string
   title: string
@@ -65,6 +108,7 @@ export interface SidebarConfig {
   footer?: SidebarSection
   showSearch?: boolean
   searchPlaceholder?: string
+  searchQuery?: string
   onSearchChange?: (value: string) => void
   showThemeToggle?: boolean
   theme?: 'light' | 'dark' | 'system'
@@ -111,6 +155,7 @@ export function Sidebar({
   footer,
   showSearch = true,
   searchPlaceholder = "Search...",
+  searchQuery = '',
   onSearchChange,
   showThemeToggle = false,
   theme = 'system',
@@ -134,7 +179,7 @@ export function Sidebar({
   const [isOpen, setIsOpen] = useState(false)
   const [collapsed, setCollapsed] = useState(defaultCollapsed)
   const [expandedSections, setExpandedSections] = useState<string[]>([])
-  const [searchQuery, setSearchQuery] = useState('')
+  const [currentSearchQuery, setCurrentSearchQuery] = useState(searchQuery)
   const [pinnedItems, setPinnedItems] = useState<string[]>([])
   const searchInputRef = useRef<HTMLInputElement>(null)
   const mouseX = useMotionValue(0)
@@ -161,14 +206,14 @@ export function Sidebar({
       const state: SidebarState = {
         collapsed,
         expandedSections,
-        searchQuery,
+        searchQuery: currentSearchQuery,
         pinnedItems,
         recentItems: []
       }
       localStorage.setItem(persistKey, JSON.stringify(state))
       onStateChange?.(state)
     }
-  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, persistKey, onStateChange])
+  }, [collapsed, expandedSections, currentSearchQuery, pinnedItems, persistState, persistKey, onStateChange])
 
   // Check mobile
   useEffect(() => {
@@ -258,6 +303,16 @@ export function Sidebar({
     }
   }, [onNavigate, isMobile])
 
+  // Update search query from prop
+  useEffect(() => {
+    setCurrentSearchQuery(searchQuery)
+  }, [searchQuery])
+  
+  // Handle search change
+  const handleSearch = useCallback((value: string) => {
+    onSearchChange?.(value)
+  }, [onSearchChange])
+
   const filterItems = useCallback((items: SidebarItem[], query: string): SidebarItem[] => {
     if (!query) return items
     
@@ -272,14 +327,24 @@ export function Sidebar({
 
   // 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, searchQuery).map(item => ({
+      filteredItems: filterItems(section.items, currentSearchQuery).map(item => ({
         ...item,
-        filteredChildren: item.items ? filterItems(item.items, searchQuery) : undefined
+        filteredChildren: item.items ? filterItems(item.items, currentSearchQuery) : undefined
       }))
     })).filter(section => section.filteredItems.length > 0)
-  }, [sections, searchQuery, filterItems])
+  }, [sections, currentSearchQuery, filterItems])
 
   const renderItem = useCallback((item: SidebarItem, depth = 0, filteredChildren?: SidebarItem[]) => {
     const isActive = item.href === activePath
@@ -388,9 +453,10 @@ export function Sidebar({
     )
   }, [activePath, pinnedItems, expandedSections, collapsed, customStyles, handleItemClick, toggleSection])
 
-  const SidebarContent = React.memo(() => (
-    <>
-      {/* Header */}
+
+  // 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"
@@ -429,52 +495,48 @@ export function Sidebar({
           </Button>
         )}
       </div>
+    )
+  })
 
-      {/* Search */}
-      {showSearch && (!collapsed || isMobile) && (
-        <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" />
-            <Input
-              key="sidebar-search-input"
-              ref={searchInputRef}
-              type="search"
-              placeholder={searchPlaceholder}
-              value={searchQuery}
-              onChange={(e) => {
-                setSearchQuery(e.target.value)
-                onSearchChange?.(e.target.value)
-              }}
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              className="pl-9 pr-9"
-            />
-            {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>
-      )}
-
-      {/* Pinned Items */}
-      {pinnedItems.length > 0 && (!collapsed || isMobile) && (
-        <div className="p-4 border-b">
-          <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>
-        </div>
-      )}
-
-      {/* Main Content */}
+  // Search element with controlled value
+  const searchElement = useMemo(() => {
+    if (!showSearch) return null
+    
+    return (
+      <SearchInput
+        searchInputRef={searchInputRef}
+        searchPlaceholder={searchPlaceholder}
+        value={searchQuery}
+        onChange={handleSearch}
+        keyboardShortcuts={keyboardShortcuts}
+      />
+    )
+  }, [showSearch, searchPlaceholder, searchQuery, handleSearch, keyboardShortcuts])
+  
+  // Search Component wrapper
+  const SidebarSearch = React.memo(() => {
+    return showSearch && (!collapsed || isMobile) ? searchElement : null
+  })
+
+  // 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) && (
@@ -492,46 +554,59 @@ export function Sidebar({
           ))}
         </div>
       </ScrollArea>
-
-      {/* Footer */}
-      {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>
-          )}
+    )
+  })
+
+  // 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 (
+      <>
+        <SidebarHeader />
+        <SidebarSearch />
+        <SidebarMenuContent />
+        <SidebarFooter />
+      </>
+    )
+  })
 
   const sidebarClasses = cn(
     "flex h-full flex-col bg-background border-r",
@@ -558,7 +633,7 @@ export function Sidebar({
         
         <Sheet open={isOpen} onOpenChange={setIsOpen}>
           <SheetContent side="left" className="w-80 p-0">
-            <div className={cn(sidebarClasses, "sidebar-container")}>
+            <div className={cn(sidebarClasses, "sidebar-container flex flex-col")}>
               {animatedBackground && (
                 <motion.div
                   className="absolute inset-0 opacity-30"
@@ -576,7 +651,7 @@ export function Sidebar({
   }
 
   return (
-    <aside className={cn(sidebarClasses, "sidebar-container hidden md:flex")}>
+    <aside className={cn(sidebarClasses, "sidebar-container hidden md:flex flex-col")}>
       {animatedBackground && (
         <motion.div
           className="absolute inset-0 opacity-30"