xertica-ui 2.1.2 → 2.1.4

package/components/layout/sidebar/use-sidebar.ts

@@ -0,0 +1,104 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { RouteGroup } from "./sidebar";
+import { useIsMobile } from "../../shared/use-mobile";
+
+export interface UseSidebarProps {
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    navigationGroups?: RouteGroup[];
+}
+
+export function useSidebar({
+    defaultExpanded = true,
+    expanded: controlledExpanded,
+    onExpandedChange,
+    navigationGroups = [],
+}: UseSidebarProps = {}) {
+    const [localExpanded, setLocalExpanded] = useState(defaultExpanded);
+    const isControlled = controlledExpanded !== undefined;
+    const expanded = isControlled ? controlledExpanded : localExpanded;
+
+    const isMobileViewport = useIsMobile();
+    const [hasOverflow, setHasOverflow] = useState(false);
+    const [visibleItems, setVisibleItems] = useState<RouteGroup[]>([]);
+    const [overflowItems, setOverflowItems] = useState<RouteGroup[]>([]);
+    const [openSubmenu, setOpenSubmenu] = useState<string | null>(null);
+    const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+    const navRef = useRef<HTMLElement>(null);
+
+    const setExpanded = useCallback(
+        (value: boolean | ((prev: boolean) => boolean)) => {
+            const newValue = typeof value === "function" ? value(expanded) : value;
+            if (!isControlled) {
+                setLocalExpanded(newValue);
+            }
+            onExpandedChange?.(newValue);
+        },
+        [expanded, isControlled, onExpandedChange]
+    );
+
+    const toggleExpanded = useCallback(() => {
+        setExpanded((prev) => !prev);
+    }, [setExpanded]);
+
+    // Overflow detection
+    useEffect(() => {
+        const checkOverflow = () => {
+            if (!navRef.current || navigationGroups.length === 0) return;
+
+            const containerHeight = navRef.current.clientHeight;
+            let currentHeight = 0;
+            let visibleCount = 0;
+
+            // Approximate heights
+            const itemHeight = 40;
+            const groupHeaderHeight = 32;
+            const padding = 32;
+
+            currentHeight += padding;
+
+            for (let i = 0; i < navigationGroups.length; i++) {
+                const group = navigationGroups[i];
+                if (group.label) currentHeight += groupHeaderHeight;
+                currentHeight += group.items.length * itemHeight;
+
+                if (currentHeight > containerHeight) {
+                    break;
+                }
+                visibleCount++;
+            }
+
+            if (visibleCount < navigationGroups.length) {
+                setHasOverflow(true);
+                setVisibleItems(navigationGroups.slice(0, visibleCount));
+                setOverflowItems(navigationGroups.slice(visibleCount));
+            } else {
+                setHasOverflow(false);
+                setVisibleItems(navigationGroups);
+                setOverflowItems([]);
+            }
+        };
+
+        checkOverflow();
+        window.addEventListener("resize", checkOverflow);
+        return () => window.removeEventListener("resize", checkOverflow);
+    }, [navigationGroups, expanded]);
+
+    return {
+        expanded,
+        setExpanded,
+        toggleExpanded,
+        isMobileViewport,
+        hasOverflow,
+        visibleItems,
+        overflowItems,
+        openSubmenu,
+        setOpenSubmenu,
+        isFilterOpen,
+        setIsFilterOpen,
+        navRef,
+        navigationGroups,
+    };
+}