@moontra/moonui-pro 2.5.2 → 2.5.4

package/dist/index.d.ts

@@ -1851,6 +1851,7 @@ interface SidebarConfig {
     animatedBackground?: boolean;
     keyboardShortcuts?: boolean;
     persistState?: boolean;
+    persistKey?: string;
     onStateChange?: (state: SidebarState) => void;
     customStyles?: {
         background?: string;
@@ -1872,7 +1873,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, onStateChange, customStyles, className, activePath, onNavigate }: SidebarProps): react_jsx_runtime.JSX.Element;
+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 const enhancedButtonVariants: (props?: ({
     variant?: "link" | "default" | "ghost" | "outline" | "secondary" | "destructive" | "gradient" | "glow" | null | undefined;

package/dist/index.mjs

@@ -56323,6 +56323,7 @@ function Sidebar({
   animatedBackground = false,
   keyboardShortcuts = true,
   persistState = true,
+  persistKey = "moonui-sidebar-state",
   onStateChange,
   customStyles,
   className,
@@ -56342,7 +56343,7 @@ function Sidebar({
   const springY = useSpring(mouseY, { stiffness: 300, damping: 30 });
   useEffect(() => {
     if (persistState && typeof window !== "undefined") {
-      const savedState = localStorage.getItem("moonui-sidebar-state");
+      const savedState = localStorage.getItem(persistKey);
       if (savedState) {
         const state = JSON.parse(savedState);
         setCollapsed(state.collapsed);
@@ -56350,7 +56351,7 @@ function Sidebar({
         setPinnedItems(state.pinnedItems || []);
       }
     }
-  }, [persistState]);
+  }, [persistState, persistKey]);
   useEffect(() => {
     if (persistState && typeof window !== "undefined") {
       const state = {
@@ -56360,10 +56361,10 @@ function Sidebar({
         pinnedItems,
         recentItems: []
       };
-      localStorage.setItem("moonui-sidebar-state", JSON.stringify(state));
+      localStorage.setItem(persistKey, JSON.stringify(state));
       onStateChange?.(state);
     }
-  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, onStateChange]);
+  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, persistKey, onStateChange]);
   useEffect(() => {
     const checkMobile = () => {
       setIsMobile(window.innerWidth < 768);
@@ -56570,7 +56571,7 @@ function Sidebar({
         (section) => section.items.filter((item) => pinnedItems.includes(item.id))
       ).map((item) => renderItem(item)) })
     ] }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6", children: sections.map((section, index) => {
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "p-4 space-y-6", children: sections.map((section, index) => {
       const filteredItems = filterItems(section.items, searchQuery);
       if (filteredItems.length === 0)
         return null;
@@ -56609,7 +56610,7 @@ function Sidebar({
     ] })
   ] });
   const sidebarClasses = cn(
-    "flex h-full max-h-screen flex-col bg-background border-r sticky top-0",
+    "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",
@@ -56642,7 +56643,7 @@ function Sidebar({
       ] }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex min-h-0"), children: [
+  return /* @__PURE__ */ jsxs("aside", { className: cn(sidebarClasses, "sidebar-container hidden md:flex"), children: [
     animatedBackground && /* @__PURE__ */ jsx(
       motion.div,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.5.2",
+  "version": "2.5.4",
   "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

@@ -80,6 +80,7 @@ export interface SidebarConfig {
   animatedBackground?: boolean
   keyboardShortcuts?: boolean
   persistState?: boolean
+  persistKey?: string
   onStateChange?: (state: SidebarState) => void
   customStyles?: {
     background?: string
@@ -121,6 +122,7 @@ export function Sidebar({
   animatedBackground = false,
   keyboardShortcuts = true,
   persistState = true,
+  persistKey = 'moonui-sidebar-state',
   onStateChange,
   customStyles,
   className,
@@ -142,7 +144,7 @@ export function Sidebar({
   // Load persisted state
   useEffect(() => {
     if (persistState && typeof window !== 'undefined') {
-      const savedState = localStorage.getItem('moonui-sidebar-state')
+      const savedState = localStorage.getItem(persistKey)
       if (savedState) {
         const state = JSON.parse(savedState) as SidebarState
         setCollapsed(state.collapsed)
@@ -150,7 +152,7 @@ export function Sidebar({
         setPinnedItems(state.pinnedItems || [])
       }
     }
-  }, [persistState])
+  }, [persistState, persistKey])
 
   // Save state changes
   useEffect(() => {
@@ -162,10 +164,10 @@ export function Sidebar({
         pinnedItems,
         recentItems: []
       }
-      localStorage.setItem('moonui-sidebar-state', JSON.stringify(state))
+      localStorage.setItem(persistKey, JSON.stringify(state))
       onStateChange?.(state)
     }
-  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, onStateChange])
+  }, [collapsed, expandedSections, searchQuery, pinnedItems, persistState, persistKey, onStateChange])
 
   // Check mobile
   useEffect(() => {
@@ -454,7 +456,7 @@ export function Sidebar({
       )}
 
       {/* Main Content */}
-      <ScrollArea className="flex-1">
+      <ScrollArea className="flex-1 overflow-y-auto">
         <div className="p-4 space-y-6">
           {sections.map((section, index) => {
             const filteredItems = filterItems(section.items, searchQuery)
@@ -520,7 +522,7 @@ export function Sidebar({
   )
 
   const sidebarClasses = cn(
-    "flex h-full max-h-screen flex-col bg-background border-r sticky top-0",
+    "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",
@@ -562,7 +564,7 @@ export function Sidebar({
   }
 
   return (
-    <aside className={cn(sidebarClasses, "sidebar-container hidden md:flex min-h-0")}>
+    <aside className={cn(sidebarClasses, "sidebar-container hidden md:flex")}>
       {animatedBackground && (
         <motion.div
           className="absolute inset-0 opacity-30"