pixelize-design-library 2.4.1 → 2.4.2-beta.0

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Icon, VStack, Badge, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CANVAS, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { useSidebarActiveAccent } from "./sidebarAccentColors.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import OverflowTooltipText from "./components/OverflowTooltipText.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+const parseBadge = (badge) => {
+    var _a, _b, _c;
+    return ({
+        badgeVal: badge === null || badge === void 0 ? void 0 : badge.count,
+        colorScheme: (_a = badge === null || badge === void 0 ? void 0 : badge.color) !== null && _a !== void 0 ? _a : "teal",
+        radius: (_b = badge === null || badge === void 0 ? void 0 : badge.radius) !== null && _b !== void 0 ? _b : "full",
+        variant: (_c = badge === null || badge === void 0 ? void 0 : badge.variant) !== null && _c !== void 0 ? _c : "subtle",
+    });
+};
+const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
+    var _a, _b, _c;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
+    return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { as: "a", href: (_c = item.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", py: "8px", mb: "2px", borderRadius: "md", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", _hover: {
+                        bg: item.disabled
+                            ? "transparent"
+                            : isActive
+                                ? "whiteAlpha.400"
+                                : "whiteAlpha.200",
+                    }, onClick: (e) => {
+                        e.preventDefault();
+                        if (!item.disabled)
+                            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: _jsx(PopoverBody, { p: "0.75rem", children: _jsxs(Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+};
+const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
+    var _a, _b, _c;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
+    return (_jsxs(Flex, { as: "a", href: (_c = item.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: item.disabled ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
+        }, onClick: (e) => {
+            e.preventDefault();
+            if (!item.disabled)
+                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+};
+const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const width = collapsed ? collapsedWidth : expandedWidth;
+    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "base", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.white, opacity: 0.6 }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.white, opacity: 0.6 })) })] }), _jsx(Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
+                        var _a;
+                        const isActive = String(selected) === String(item.id) ||
+                            String(selected) === String(item.title);
+                        const key = String((_a = item.id) !== null && _a !== void 0 ? _a : item.title);
+                        return collapsed ? (_jsx(CollapsedItem, { item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }, key)) : (_jsx(ExpandedItem, { item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }, key));
+                    }) })] }) }));
+};
+export default SecondaryBar;

package/dist/esm/Components/SideBar/SideBar.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Flex, Text, Image, Box, Skeleton, useBreakpointValue } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CANVAS, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { useSidebarActiveAccent } from "./sidebarAccentColors.js";
+import { FlexCss, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+import { ArrowLeftToLine, ArrowRightToLine, ChevronLeft, Maximize2, MoreVertical, PanelLeft, Plus, X } from "lucide-react";
+// Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
+const Z_SCRIM = 1300;
+const Z_PANEL = 1400;
+// Overlay/mobile panel width. ~14.7rem (235px): a touch wider than the inline
+// expanded 13rem for comfortable touch targets, but below the old 16rem that was
+// too wide on phones. Still capped by `maxW: 88vw` on very small screens.
+const OVERLAY_WIDTH = "14.7rem";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+import MenuItems from "./components/MenuItems.js";
+import DefaultLogo from "../../Assets/defaultLogo.js";
+import OverflowTooltipText from "./components/OverflowTooltipText.js";
+import SecondaryBar from "./SecondaryBar.js";
+import OtherApps from "./components/OtherApps.js";
+const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, closeButtonRef, }) => {
+    const theme = useCustomTheme();
+    if (isLoading) {
+        return (_jsx(Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? (_jsx(Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: _jsx(Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : (_jsxs(Flex, { align: "center", gap: 3, w: "100%", children: [_jsx(Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), _jsx(Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
+    }
+    const logoNode = logo ? (_jsx(Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : (_jsx(Box, { bg: theme.colors.primary[500], color: onFilled(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined, children: _jsx(DefaultLogo, {}) }));
+    return (_jsxs(Flex, { h: HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && (_jsxs(Box, { flex: "1", minW: 0, children: [_jsx(OverflowTooltipText, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && (_jsx(Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && (_jsx(Box, { as: "button", type: "button", ref: closeButtonRef, onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "base", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? (_jsx(X, { size: 15, color: theme.colors.white, opacity: 0.7 })) : (_jsx(ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 })) }))] }));
+};
+const SkeletonMenuRow = ({ toggle }) => (_jsx(Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? (_jsx(Flex, { align: "center", gap: 4, justifyContent: "center", children: _jsx(Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : (_jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), _jsx(Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
+const AddNewButton = ({ toggle, onClick, overlay }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "md", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [_jsx(Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: _jsx(Plus, { size: 16, color: activeAccent.icon }) }), !toggle && (_jsx(Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium", children: "Add New" }))] }));
+};
+const deriveInitials = (user) => {
+    if (user.initials)
+        return user.initials;
+    const parts = user.name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "";
+    if (parts.length === 1)
+        return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+};
+const UserFooter = ({ user, toggle, overlay }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const avatar = user.avatarUrl ? (_jsx(Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : (_jsx(Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.icon, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return (_jsx(Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", flexShrink: 0, children: _jsxs(Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: "8px", px: "8px", py: overlay ? "10px" : "6px", w: "100%", borderRadius: "md", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && (_jsxs(Box, { flex: "1", minW: 0, textAlign: "left", children: [_jsx(Text, { fontSize: "11.5px", fontWeight: 500, color: "whiteAlpha.800", isTruncated: true, children: user.name }), user.role && (_jsx(Text, { fontSize: "10px", color: "whiteAlpha.500", isTruncated: true, children: user.role }))] })), !toggle && _jsx(MoreVertical, { size: 14, color: theme.colors.white, opacity: 0.3 })] }) }));
+};
+// Footer "cell" — one segment of the Collapse | Hide/Show control.
+const ControlCell = ({ onClick, label, accent, children }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    return (_jsxs(Flex, { as: "button", type: "button", flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "6px", py: "8px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && (_jsx(Text, { fontSize: "11.5px", color: accent ? activeAccent.icon : "whiteAlpha.700", fontWeight: "medium", children: label }))] }));
+};
+// Collapse (mini-rail) sits next to the Hide/Show navbar-mode toggle. In the
+// desktop mobile-nav overlay only "Show" (return to the docked sidebar) is shown;
+// below `lg` (pure responsive overlay) there is no navbar-mode control.
+const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggleMobileNav, }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const iconColor = theme.colors.white;
+    const shell = (children) => (_jsx(Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "6px", flexShrink: 0, children: _jsx(Flex, { display: "flex", gap: "0", borderRadius: "lg", overflow: "hidden", border: "1px solid", borderColor: "whiteAlpha.100", bg: "whiteAlpha.50", sx: { "& > * + *": { borderLeft: "1px solid", borderColor: "whiteAlpha.100" } }, children: children }) }));
+    if (overlay) {
+        // Pure below-lg overlay (no manual nav-mode switch) → no footer control.
+        if (!mobileNav || !onToggleMobileNav)
+            return null;
+        return shell(_jsx(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: _jsx(PanelLeft, { size: 14, color: activeAccent.icon }) }));
+    }
+    return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor, opacity: 0.6 })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor, opacity: 0.6 })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor, opacity: 0.6 }) }))] }));
+};
+// --- Main Sidebar component ---
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, }) {
+    var _a, _b;
+    const theme = useCustomTheme();
+    // Below `lg` the sidebar renders as a slide-in overlay above the content; at
+    // `lg` and up it is inline (the original behaviour, untouched).
+    const belowLg = (_a = useBreakpointValue({ base: true, lg: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
+    // Overlay ("mobile navbar") presentation is active when the viewport is below
+    // `lg` OR the Hide/Show toggle has forced it on at any width.
+    const overlay = belowLg || mobileNav;
+    // In overlay mode the panel is always fully expanded — the mini-rail/collapse
+    // is a desktop-only space affordance — so children render as if `toggle=false`.
+    const effToggle = overlay ? false : toggle;
+    const isOverlayOpen = overlay && mobileOpen;
+    // In overlay mode, navigating to a leaf item auto-closes the overlay (content
+    // returns to full-screen). Parent items with a submenu only expand, so they
+    // must NOT close it.
+    const handleMenuClickInternal = (menu) => {
+        handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
+        if (overlay && !(menu.subMenu && menu.subMenu.length > 0))
+            onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+    };
+    // Refs let the effects read the latest values without adding them to dep arrays,
+    // which would cause infinite toggle loops since changeToggle flips state.
+    const toggleRef = useRef(toggle);
+    toggleRef.current = toggle;
+    const changeToggleRef = useRef(changeToggle);
+    changeToggleRef.current = changeToggle;
+    const activeTop = menus.find((m) => String(m.title) === String(activeMenu)) ||
+        menus.find((m) => String(m.id) === String(activeMenu));
+    const secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    // Sync toggle with external `open` prop.
+    // `open=false` → collapsed (toggle=true); `open=true` → expanded (toggle=false).
+    useEffect(() => {
+        const shouldBeCollapsed = !open;
+        if (shouldBeCollapsed !== toggleRef.current) {
+            changeToggleRef.current();
+        }
+    }, [open]);
+    // Auto-collapse the main sidebar whenever a secondary panel is active.
+    useEffect(() => {
+        if (secondaryItems.length > 0 && !toggleRef.current) {
+            changeToggleRef.current();
+        }
+    }, [secondaryItems.length]);
+    // Esc closes the overlay.
+    useEffect(() => {
+        if (!isOverlayOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [isOverlayOpen, onMobileClose]);
+    // `role="dialog" aria-modal` only promises modality — focus has to be moved in and
+    // kept in, or Tab walks straight into the content behind the scrim.
+    const panelRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if (!isOverlayOpen)
+            return;
+        (_a = closeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [isOverlayOpen]);
+    const trapTab = (e) => {
+        if (e.key !== "Tab" || !isOverlayOpen)
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const stops = Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.getAttribute("aria-hidden") !== "true");
+        if (stops.length === 0)
+            return;
+        const first = stops[0];
+        const last = stops[stops.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    // Lock body scroll while the overlay is open.
+    useEffect(() => {
+        if (!isOverlayOpen)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = prev;
+        };
+    }, [isOverlayOpen]);
+    // Swipe-left-to-close. Tracks pointer start; commits to a horizontal drag only
+    // when the gesture is mostly horizontal, so vertical menu scrolling is unaffected.
+    const dragStart = useRef(null);
+    const [dragX, setDragX] = useState(0);
+    const [dragging, setDragging] = useState(false);
+    const onPointerDown = (e) => {
+        if (!isOverlayOpen)
+            return;
+        dragStart.current = { x: e.clientX, y: e.clientY };
+    };
+    const onPointerMove = (e) => {
+        const start = dragStart.current;
+        if (!start)
+            return;
+        const dx = e.clientX - start.x;
+        const dy = e.clientY - start.y;
+        if (!dragging) {
+            if (Math.abs(dy) > Math.abs(dx)) {
+                dragStart.current = null; // vertical → let the list scroll
+                return;
+            }
+            if (dx < -6)
+                setDragging(true);
+            else
+                return;
+        }
+        setDragX(Math.min(0, dx));
+    };
+    const onPointerUp = (e) => {
+        const start = dragStart.current;
+        const committed = dragging;
+        dragStart.current = null;
+        setDragging(false);
+        setDragX(0);
+        if (committed && start && e.clientX - start.x < -96)
+            onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+    };
+    const baseTransform = dragging
+        ? `translateX(${dragX}px)`
+        : isOverlayOpen
+            ? "translateX(0)"
+            : "translateX(-100%)";
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, bg: "blackAlpha.600", zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", onClick: onMobileClose, "aria-hidden": "true" }), _jsxs(Box, { ref: panelRef, onKeyDown: trapTab, position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, height: "100vh", maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
+                    ? dragging
+                        ? "none"
+                        : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)"
+                    : {
+                        base: dragging
+                            ? "none"
+                            : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
+                        lg: "all 0.5s",
+                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !mobileOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsx(Box, { width: mobileNav ? OVERLAY_WIDTH : { base: OVERLAY_WIDTH, lg: toggle ? "4.688rem" : "13rem" }, transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between", children: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100vh", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose, closeButtonRef: closeButtonRef }), _jsx(Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
+                                        ...FlexCss,
+                                        transition: "all 0.3s ease",
+                                        // (a) larger touch targets for menu rows in overlay mode
+                                        ...(overlay
+                                            ? { "[data-menu-id]": { paddingTop: "10px", paddingBottom: "10px" } }
+                                            : {}),
+                                    }, children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => (_jsx(SkeletonMenuRow, { toggle: effToggle }, i)))) : (_jsx(MenuItems, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu })) }), _jsxs(Box, { flexShrink: 0, children: [!isDisableAddNew && (_jsx(Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", children: _jsx(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), _jsx(OtherApps, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && _jsx(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), _jsx(FooterControls, { toggle: toggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && (_jsx(SecondaryBar, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && (_jsx(Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: "whiteAlpha.300", "aria-hidden": "true" }))] })] }));
+}

package/dist/esm/Components/SideBar/SideBarProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SideBar/components/MenuItemBox.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Badge, Collapse, Portal, } from "@chakra-ui/react";
+import MenuPopoverContent from "./MenuPopoverContent.js";
+import { ChevronDown, ChevronRight, LockKeyhole } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { DEFAULT_CANVAS, isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { useSidebarActiveAccent } from "../sidebarAccentColors.js";
+import TruncatedTextWithTooltip from "./TextTruncation.js";
+/**
+ * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
+ * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
+ * routed through the in-app handler.
+ */
+const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS);
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const { title, icon, disabled, locked, badge, subMenu, url } = menu;
+    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    const submenuPanelId = `submenu-${String((_c = menu.id) !== null && _c !== void 0 ? _c : title)}`;
+    // A submenu parent only expands, so it is a button; every other row navigates.
+    // Cast: Chakra narrows `as` unions to their *shared* props, which drops `href`.
+    const rowAs = (hasSubMenu ? "button" : "a");
+    const badgeConfig = typeof badge === "object" && badge !== null ? badge : null;
+    const badgeValue = (_d = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _d !== void 0 ? _d : (typeof badge !== "object" ? badge : undefined);
+    const hasSubmenuBadge = (_e = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
+        var _a;
+        const subCfg = typeof sub.badge === "object" && sub.badge !== null
+            ? sub.badge
+            : null;
+        const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+        return value != null;
+    })) !== null && _e !== void 0 ? _e : false;
+    const isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => sub.id === activeMenu);
+    const isParentActive = activeMenu === menu.id;
+    const isAnyActive = isParentActive || isChildActive;
+    const handleToggleSubMenu = (e) => {
+        if (!disabled && hasSubMenu) {
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
+            return;
+        }
+        if (!disabled)
+            handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
+    };
+    // Pill-style nav item. The fill is a white overlay, not a brand tint: the sidebar is a
+    // near-black surface in BOTH modes, and a `primary.opacity` tint of a dark accent on it is
+    // imperceptible for most brands (measured 1.03-1.15 idle->hover) and exactly 1.000 for zinc
+    // light, whose primary[500] IS the sidebar colour. Brand identity stays in the accent bar
+    // and icon below. See interactionStates.test.ts.
+    const commonStyles = {
+        // `data-group` rather than `role="group"`: the row is now a real link/button, whose
+        // implicit role must not be overridden. Chakra's `_groupHover` accepts either.
+        "data-group": "",
+        display: "block",
+        textAlign: "left",
+        textDecoration: "none",
+        w: "100%",
+        borderRadius: "md",
+        px: "10px",
+        py: "7px",
+        fontWeight: "medium",
+        border: "none",
+        borderLeft: "2px solid",
+        borderLeftColor: isAnyActive ? theme.colors.primary[500] : "transparent",
+        backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
+        color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
+        _hover: disabled
+            ? {}
+            : {
+                backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
+            },
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+        transition: "background 0.12s",
+    };
+    const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
+                    // open={isOpen}
+                    , { 
+                        // open={isOpen}
+                        fontSize: "13px", lineHeight: "1", flex: "1", color: isAnyActive ? activeAccent.label : "whiteAlpha.900", fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: "white" }, children: title }))] }), !toggle && (_jsxs(Flex, { align: "center", gap: "0.375rem", children: [(() => {
+                        var _a, _b, _c;
+                        const value = badgeValue;
+                        const colorScheme = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.color) !== null && _a !== void 0 ? _a : "teal";
+                        const radius = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.radius) !== null && _b !== void 0 ? _b : "full";
+                        const variant = (_c = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.variant) !== null && _c !== void 0 ? _c : "subtle";
+                        return value != null ? (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                    })(), locked && _jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }), hasSubMenu && (_jsx(Icon, { as: isOpen ? ChevronDown : ChevronRight, fontSize: "1rem", color: "whiteAlpha.400" }))] }))] }));
+    if (toggle) {
+        // Collapsed sidebar: show Popover
+        return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
+                            if (!hasSubMenu && url && isBrowserNavigationGesture(e))
+                                return;
+                            e.preventDefault();
+                            handleToggleSubMenu(e);
+                        }, "data-menu-id": String((_f = menu.id) !== null && _f !== void 0 ? _f : title), children: buttonContent }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500, children: _jsx(PopoverBody, { p: "0.625rem", color: "white", children: _jsx(MenuPopoverContent, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
+                    if (!hasSubMenu && url && isBrowserNavigationGesture(e))
+                        return;
+                    e.preventDefault();
+                    handleToggleSubMenu(e);
+                }, "data-menu-id": String((_g = menu.id) !== null && _g !== void 0 ? _g : title), children: buttonContent }), hasSubMenu && (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_h = menu.id) !== null && _h !== void 0 ? _h : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+                        transition: "opacity 0.28s ease, transform 0.28s ease",
+                        opacity: isOpen ? 1 : 0,
+                        transform: isOpen ? "translateY(0)" : "translateY(-6px)",
+                    }, children: subMenu.map((sub, sIdx) => {
+                        var _a, _b, _c;
+                        const isSubActive = activeMenu === sub.id;
+                        return (_jsxs(Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", py: "5px", pl: "30px", pr: "10px", borderRadius: "md", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: (e) => {
+                                if (sub.url && isBrowserNavigationGesture(e))
+                                    return;
+                                e.preventDefault();
+                                if (!sub.disabled)
+                                    handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
+                                            // open={isOpen}
+                                            color: isSubActive ? "whiteAlpha.900" : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (() => {
+                                    var _a, _b, _c, _d;
+                                    const subCfg = typeof sub.badge === "object" && sub.badge !== null
+                                        ? sub.badge
+                                        : null;
+                                    const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                                    const colorScheme = (_b = subCfg === null || subCfg === void 0 ? void 0 : subCfg.color) !== null && _b !== void 0 ? _b : "teal";
+                                    const radius = (_c = subCfg === null || subCfg === void 0 ? void 0 : subCfg.radius) !== null && _c !== void 0 ? _c : "full";
+                                    const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                                    return value != null ? (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                                })()] }, `${String((_c = (_b = sub.id) !== null && _b !== void 0 ? _b : sub.title) !== null && _c !== void 0 ? _c : sIdx)}-${sIdx}`));
+                    }) }) }))] }));
+};
+export default MenuItemBox;

package/dist/esm/Components/SideBar/components/MenuItems.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import MenuItemBox from "./MenuItemBox.js";
+const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, }) => {
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const [lastClickY, setLastClickY] = useState(null);
+    useEffect(() => {
+        const parent = menus.find((m) => { var _a; return (_a = m.subMenu) === null || _a === void 0 ? void 0 : _a.some((s) => s.id === activeMenu); });
+        if (parent) {
+            setOpenMenuId(parent.id);
+        }
+        else if (menus.some((m) => m.id === activeMenu)) {
+            setOpenMenuId(activeMenu);
+        }
+    }, [activeMenu, menus]);
+    const handleToggle = (menu, clickY) => {
+        setOpenMenuId((prev) => (prev === menu.id ? null : menu.id));
+        if (typeof clickY === "number")
+            setLastClickY(clickY);
+    };
+    useEffect(() => {
+        if (openMenuId == null)
+            return;
+        const container = document.getElementById("sidebar-scroll-container");
+        if (!container)
+            return;
+        const collapse = container.querySelector(`[data-collapse="true"][data-menu-id="${openMenuId}"][data-open="true"]`);
+        const header = container.querySelector(`[data-menu-id="${openMenuId}"]`);
+        if (!collapse)
+            return;
+        const cRect = container.getBoundingClientRect();
+        const tRect = collapse.getBoundingClientRect();
+        const hRect = header === null || header === void 0 ? void 0 : header.getBoundingClientRect();
+        const topGap = 16;
+        const bottomGap = 16;
+        if (lastClickY != null) {
+            if (hRect) {
+                const toTop = container.scrollTop + (hRect.top - cRect.top) - topGap;
+                container.scrollTo({
+                    top: Math.max(toTop, 0),
+                    behavior: "smooth",
+                });
+                requestAnimationFrame(() => {
+                    const ncRect = container.getBoundingClientRect();
+                    const ntRect = collapse.getBoundingClientRect();
+                    if (ntRect.bottom > ncRect.bottom - bottomGap) {
+                        container.scrollTo({
+                            top: container.scrollTop +
+                                (ntRect.bottom - (ncRect.bottom - bottomGap)),
+                            behavior: "smooth",
+                        });
+                    }
+                });
+            }
+            else {
+                const delta = tRect.bottom - lastClickY;
+                if (delta > 0) {
+                    container.scrollTo({
+                        top: container.scrollTop + delta + bottomGap,
+                        behavior: "smooth",
+                    });
+                }
+            }
+        }
+        else {
+            if (hRect) {
+                container.scrollTo({
+                    top: container.scrollTop + (hRect.top - cRect.top) - topGap,
+                    behavior: "smooth",
+                });
+                requestAnimationFrame(() => {
+                    const ncRect = container.getBoundingClientRect();
+                    const ntRect = collapse.getBoundingClientRect();
+                    if (ntRect.bottom > ncRect.bottom - bottomGap) {
+                        container.scrollTo({
+                            top: container.scrollTop +
+                                (ntRect.bottom - (ncRect.bottom - bottomGap)),
+                            behavior: "smooth",
+                        });
+                    }
+                });
+            }
+            else if (tRect.bottom > cRect.bottom) {
+                container.scrollTo({
+                    top: container.scrollTop + (tRect.bottom - cRect.bottom) + bottomGap,
+                    behavior: "smooth",
+                });
+            }
+            else if (tRect.top < cRect.top) {
+                container.scrollTo({
+                    top: container.scrollTop - (cRect.top - tRect.top) - topGap,
+                    behavior: "smooth",
+                });
+            }
+        }
+    }, [openMenuId, lastClickY]);
+    // Derive section labels from the optional `group` field on menu items: a label
+    // is rendered the first time a new group value appears, with a divider before
+    // every group after the first (the label hides when collapsed, the divider stays).
+    let lastGroup;
+    let groupCount = 0;
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2px", children: menus.map((menu, idx) => {
+            var _a, _b, _c;
+            const showGroup = !!menu.group && menu.group !== lastGroup;
+            const isFirstGroup = showGroup && groupCount === 0;
+            if (showGroup) {
+                lastGroup = menu.group;
+                groupCount += 1;
+            }
+            return (_jsxs(React.Fragment, { children: [showGroup && !isFirstGroup && (_jsx(Box, { h: "1px", bg: "whiteAlpha.100", mx: "8px", my: "5px" })), showGroup && !toggle && (_jsx(Box, { "aria-hidden": "true", px: "10px", pt: "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: "whiteAlpha.600", whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), _jsx(MenuItemBox, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+        }) }));
+};
+export default MenuItems;