pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/SideBar/SideBar.js

@@ -1,150 +1,370 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Sidebar;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Sidebar_1 = require("../../Constants/Sidebar");
-var lucide_react_1 = require("lucide-react");
-var MenuItems_1 = __importDefault(require("./components/MenuItems"));
-var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
-var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
-var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
-var OtherApps_1 = __importDefault(require("./components/OtherApps"));
-var SidebarHeader = function (_a) {
-    var logo = _a.logo, companyName = _a.companyName, toggle = _a.toggle, isLoading = _a.isLoading;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const sidebarAccentColors_1 = require("./sidebarAccentColors");
+const sidebarId_1 = require("./sidebarId");
+const Sidebar_1 = require("../../Constants/Sidebar");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const sidebarFocus_1 = require("./sidebarFocus");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("./sidebarMotion");
+const lucide_react_1 = require("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 RAIL_WIDTH = "4.688rem";
+const EXPANDED_WIDTH = "13rem";
+const COLLAPSE_MS = { ...motion_2.MOTION_MS, slow: 260 };
+const NO_ACTIVE_MENU = "\u0000pinned-active";
+const WIDTH_TRANSITION_FALLBACK_MS = 1000;
+const inlineTransitions = (collapse) => {
+    var _a;
+    if (collapse === "none")
+        return { width: "none", shadow: "none" };
+    const ms = COLLAPSE_MS[(_a = collapse.speed) !== null && _a !== void 0 ? _a : "base"];
+    return {
+        width: `width ${ms}ms ${motion_2.MOTION_EASE_OUT}`,
+        shadow: collapse.animateShadow === false ? "none" : `box-shadow ${ms}ms ${motion_2.MOTION_EASE}`,
+    };
+};
+const OVERLAY_WIDTH = "14.7rem";
+const OVERLAY_MAX_WIDTH = "88vw";
+const PANEL_BORDER = "1px";
+const SECONDARY_STRIP_WIDTH = "3.5rem";
+const SECONDARY_OPEN_WIDTH = "10rem";
+const PRIMARY_MAX_WITH_SECONDARY = `calc(${OVERLAY_MAX_WIDTH} - ${PANEL_BORDER} - ${SECONDARY_STRIP_WIDTH})`;
+// NOTE: below this the primary (12.5rem) and secondary (8rem) label floors overflow 88vw.
+const NARROW_DRAWER_QUERY = "(max-width: 23.3em)";
+const SCRIM_TRANSITION = (0, motion_2.transitionFor)(["opacity", "visibility"], "base");
+const OVERLAY_SLIDE = (0, motion_2.transitionFor)(["transform"], "enter", "out");
+const OVERLAY_WIDTH_TRANSITION = (0, motion_2.transitionFor)(["width"], "enter", "out");
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const MenuItems_1 = __importDefault(require("./components/MenuItems"));
+const defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
+const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
+const SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
+const OtherApps_1 = __importDefault(require("./components/OtherApps"));
+const PinnedSection_1 = __importDefault(require("./components/PinnedSection"));
+const sidebarScale_1 = require("./sidebarScale");
+const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const sharedResizeObserver_1 = require("../../Hooks/sharedResizeObserver");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     if (isLoading) {
-        return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
-            react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
-            react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
-            react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
-    }
-    if (logo) {
-        return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
-            react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
-            !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2, isTruncated: true, width: "100%" }, companyName)))));
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
-        react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
-            react_1.default.createElement(defaultLogo_1.default, null)),
-        !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "left", color: theme.colors.white, lineHeight: 2, as: "p", width: "100%" }, companyName !== null && companyName !== void 0 ? companyName : "")))));
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "lg", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box
+    // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+    // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+    , { 
+        // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
+        // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: {
+                    ...(0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
+                    "&::after": {
+                        content: '""',
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        width: "44px",
+                        height: "44px",
+                    },
+                }, children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.sidebar.mutedIcon })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.sidebar.mutedIcon })) }))] }));
 };
-var SkeletonMenuRow = function (_a) {
-    var toggle = _a.toggle;
-    return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
-        react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
-        react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
-        react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
+const SkeletonMenuRow = ({ toggle }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
 };
-var AddNewButton = function (_a) {
-    var toggle = _a.toggle, isLoading = _a.isLoading, onClick = _a.onClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    if (isLoading) {
-        return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
-            react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" })));
-    }
-    return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onClick },
-        react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
-            react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
-        react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")));
+const AddNewButton = ({ toggle, onClick }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: 500, children: "Add New" }))] }));
 };
-var CollapseButton = function (_a) {
-    var toggle = _a.toggle, onToggle = _a.onToggle;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
-        react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: theme.colors.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
-        react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse")));
+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 }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", 
+        // Same rail-safe pairing as the logo tile — primary.opacity[32] was invisible on zinc/skyline.
+        bg: theme.colors.sidebar.activeBg, color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
+};
+// Footer "cell" — one segment of the Collapse | Hide/Show control.
+const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: 500, 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, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const iconColor = theme.colors.sidebar.mutedIcon;
+    const shell = (children) => ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, p: "10px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { display: "flex", gap: "0", borderRadius: "lg", overflow: "hidden", border: "1px solid", borderColor: theme.colors.sidebar.divider, bg: "whiteAlpha.50", sx: { "& > * + *": { borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider } }, children: children }) }));
+    if (overlay) {
+        // Pure below-lg overlay (no manual nav-mode switch) → no footer control.
+        if (!mobileNav || !onToggleMobileNav)
+            return null;
+        return shell((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 14, color: activeAccent.icon }) }));
+    }
+    return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
-function Sidebar(_a) {
-    var _b;
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines, _d = _a.open, open = _d === void 0 ? true : _d, otherApps = _a.otherApps;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+/** Left navigation rail: collapsible inline from `lg`, a slide-in overlay below it, with menus, pinned shortcuts, submenus, a secondary flyout and a footer. */
+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, peekOpen = false, onPeekEnd, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition = { speed: "base" }, autoCollapse = true, }) {
+    var _a, _b;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
+    // 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 = (0, react_2.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 narrowViewport = (0, useMatchMedia_1.useMatchMedia)(NARROW_DRAWER_QUERY);
+    // A peeked overlay was never pinned, so leaving the panel must close it; a clicked-open
+    // one must not, or the drawer would vanish the moment the pointer moved away.
+    const overlayPeeking = overlay && peekOpen && !mobileOpen;
+    const isOverlayOpen = overlay && (mobileOpen || peekOpen);
+    const closeOverlay = () => {
+        onPeekEnd === null || onPeekEnd === void 0 ? void 0 : onPeekEnd();
+        onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+    };
+    const closeOverlayRef = (0, react_1.useRef)(closeOverlay);
+    closeOverlayRef.current = closeOverlay;
+    // 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 menuClickRef = (0, react_1.useRef)(handleMenuClick);
+    menuClickRef.current = handleMenuClick;
+    const overlayRef = (0, react_1.useRef)(overlay);
+    overlayRef.current = overlay;
+    const handleMenuClickInternal = (0, react_1.useCallback)((menu) => {
+        var _a;
+        (_a = menuClickRef.current) === null || _a === void 0 ? void 0 : _a.call(menuClickRef, menu);
+        if (overlayRef.current && !(menu.subMenu && menu.subMenu.length > 0))
+            closeOverlayRef.current();
+    }, []);
     // Refs let the effects read the latest values without adding them to dep arrays,
     // which would cause infinite toggle loops since changeToggle flips state.
-    var toggleRef = (0, react_1.useRef)(toggle);
+    const toggleRef = (0, react_1.useRef)(toggle);
     toggleRef.current = toggle;
-    var changeToggleRef = (0, react_1.useRef)(changeToggle);
+    const changeToggleRef = (0, react_1.useRef)(changeToggle);
     changeToggleRef.current = changeToggle;
-    var activeTop = menus.find(function (m) { return String(m.title) === String(activeMenu); }) ||
-        menus.find(function (m) { return String(m.id) === String(activeMenu); });
-    var secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    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 : [];
+    const hasSecondary = secondaryItems.length > 0;
+    const inline = inlineTransitions(collapseTransition);
+    const pinnedActive = activePinnedId != null && !!(pinnedItems === null || pinnedItems === void 0 ? void 0 : pinnedItems.some((p) => String(p.id) === String(activePinnedId)));
     // Sync toggle with external `open` prop.
     // `open=false` → collapsed (toggle=true); `open=true` → expanded (toggle=false).
-    (0, react_1.useEffect)(function () {
-        var shouldBeCollapsed = !open;
+    (0, react_1.useEffect)(() => {
+        if (!autoCollapse)
+            return;
+        const shouldBeCollapsed = !open;
         if (shouldBeCollapsed !== toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [open]);
+    }, [open, autoCollapse]);
     // Auto-collapse the main sidebar whenever a secondary panel is active.
-    (0, react_1.useEffect)(function () {
-        if (secondaryItems.length > 0 && !toggleRef.current) {
+    (0, react_1.useEffect)(() => {
+        if (autoCollapse && secondaryItems.length > 0 && !toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [secondaryItems.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500] },
-        react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between" },
-            react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
-                react_1.default.createElement(SidebarHeader, { logo: logo, companyName: companyName, toggle: toggle, isLoading: isLoading }),
-                react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
-                react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
-                    react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading
-                        ? Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(SkeletonMenuRow, { key: i, toggle: toggle })); })
-                        : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
-                    react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
-                    !isDisableAddNew && (react_1.default.createElement(AddNewButton, { toggle: toggle, isLoading: isLoading, onClick: onAddNewClick })),
-                    react_1.default.createElement(OtherApps_1.default, { toggle: toggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }),
-                    react_1.default.createElement(CollapseButton, { toggle: toggle, onToggle: changeToggle })))),
-        secondaryItems.length > 0 && (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title }))));
+    }, [secondaryItems.length, autoCollapse]);
+    // Esc closes the overlay.
+    (0, react_1.useEffect)(() => {
+        if (!isOverlayOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                closeOverlayRef.current();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [isOverlayOpen]);
+    // `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 = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isOverlayOpen)
+            return;
+        (_a = panelRef.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];
+        const atStart = document.activeElement === panel || document.activeElement === first;
+        if (e.shiftKey && atStart) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    };
+    // Lock body scroll while the overlay is open.
+    (0, react_1.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.
+    // NOTE: drag offset goes to the panel's inline style per frame; React sees start/end.
+    const dragStart = (0, react_1.useRef)(null);
+    const dragOffset = (0, react_1.useRef)(0);
+    const dragFrame = (0, react_1.useRef)(null);
+    const isDragging = (0, react_1.useRef)(false);
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const paintDrag = () => {
+        var _a;
+        dragFrame.current = null;
+        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty("transform", `translateX(${dragOffset.current}px)`);
+    };
+    const cancelDragFrame = () => {
+        if (dragFrame.current !== null)
+            cancelAnimationFrame(dragFrame.current);
+        dragFrame.current = null;
+    };
+    (0, react_1.useEffect)(() => cancelDragFrame, []);
+    (0, react_1.useEffect)(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const running = new Set();
+        let resume = null;
+        let fallback;
+        const finish = () => {
+            running.clear();
+            window.clearTimeout(fallback);
+            resume === null || resume === void 0 ? void 0 : resume();
+            resume = null;
+        };
+        const onRun = (e) => {
+            if (e.propertyName !== "width" || !e.target)
+                return;
+            running.add(e.target);
+            resume !== null && resume !== void 0 ? resume : (resume = (0, sharedResizeObserver_1.suspendResizeWithin)(panel));
+            window.clearTimeout(fallback);
+            fallback = window.setTimeout(finish, WIDTH_TRANSITION_FALLBACK_MS);
+        };
+        const onEnd = (e) => {
+            if (e.propertyName !== "width" || !e.target)
+                return;
+            running.delete(e.target);
+            if (running.size === 0)
+                finish();
+        };
+        panel.addEventListener("transitionrun", onRun);
+        panel.addEventListener("transitionend", onEnd);
+        panel.addEventListener("transitioncancel", onEnd);
+        return () => {
+            panel.removeEventListener("transitionrun", onRun);
+            panel.removeEventListener("transitionend", onEnd);
+            panel.removeEventListener("transitioncancel", onEnd);
+            finish();
+        };
+    }, []);
+    const onPointerDown = (e) => {
+        if (!isOverlayOpen)
+            return;
+        dragStart.current = { x: e.clientX, y: e.clientY };
+    };
+    const onPointerMove = (e) => {
+        var _a;
+        const start = dragStart.current;
+        if (!start)
+            return;
+        const dx = e.clientX - start.x;
+        const dy = e.clientY - start.y;
+        if (!isDragging.current) {
+            if (Math.abs(dy) > Math.abs(dx)) {
+                dragStart.current = null; // vertical → let the list scroll
+                return;
+            }
+            if (dx >= -6)
+                return;
+            isDragging.current = true;
+            setDragging(true);
+        }
+        dragOffset.current = Math.min(0, dx);
+        (_a = dragFrame.current) !== null && _a !== void 0 ? _a : (dragFrame.current = requestAnimationFrame(paintDrag));
+    };
+    const onPointerUp = (e) => {
+        var _a;
+        const start = dragStart.current;
+        const committed = isDragging.current;
+        dragStart.current = null;
+        isDragging.current = false;
+        dragOffset.current = 0;
+        cancelDragFrame();
+        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty("transform");
+        setDragging(false);
+        if (committed && start && e.clientX - start.x < -96)
+            onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+    };
+    const baseTransform = isOverlayOpen ? "translateX(0)" : "translateX(-100%)";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors), zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: SCRIM_TRANSITION, sx: { [motion_1.REDUCED_MOTION_QUERY]: { transition: "none" } }, onClick: closeOverlay, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: panelRef, onKeyDown: trapTab, tabIndex: overlay ? -1 : undefined, outline: "none", 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" }, maxW: mobileNav ? OVERLAY_MAX_WIDTH : { base: OVERLAY_MAX_WIDTH, lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
+                    ? dragging
+                        ? "none"
+                        : OVERLAY_SLIDE
+                    : {
+                        base: dragging
+                            ? "none"
+                            : OVERLAY_SLIDE,
+                        lg: inline.shadow,
+                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: `${PANEL_BORDER} solid`, borderColor: theme.colors.sidebar.divider, role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: {
+                    ...viewportHeight_1.fullViewportHeight,
+                    touchAction: overlay ? "pan-y" : "auto",
+                    [motion_1.REDUCED_MOTION_QUERY]: { "&, & *": { transition: "none", animation: "none" } },
+                }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav
+                            ? OVERLAY_WIDTH
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, maxW: overlay && hasSecondary ? PRIMARY_MAX_WITH_SECONDARY : undefined, transition: mobileNav
+                            ? OVERLAY_WIDTH_TRANSITION
+                            : { base: OVERLAY_WIDTH_TRANSITION, lg: inline.width }, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => ((0, jsx_runtime_1.jsx)(SkeletonMenuRow, { toggle: effToggle }, i)))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [pinnedItems && pinnedItems.length > 0 && ((0, jsx_runtime_1.jsx)(PinnedSection_1.default, { items: pinnedItems, label: pinnedLabel, limit: pinnedLimit, toggle: effToggle, overlay: overlay, activeId: activePinnedId, labels: pinnedLabels, onItemClick: handleMenuClickInternal, onUnpin: onUnpin })), (0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: pinnedActive ? NO_ACTIVE_MENU : activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, containerId: scrollContainerId })] })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: (0, jsx_runtime_1.jsx)(AddNewButton, { toggle: effToggle, onClick: onAddNewClick }) })), (0, jsx_runtime_1.jsx)(OtherApps_1.default, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && (0, jsx_runtime_1.jsx)(UserFooter, { user: user, toggle: effToggle }), (0, jsx_runtime_1.jsx)(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), hasSecondary && ((0, jsx_runtime_1.jsx)(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: effToggle || narrowViewport, collapsedWidth: SECONDARY_STRIP_WIDTH, expandedWidth: SECONDARY_OPEN_WIDTH, shrinkable: overlay, 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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
 }