@admin-layout/tailwind-design-pro 12.2.4-alpha.7 → 12.2.4-alpha.70

package/lib/components/Layout/Sidebar/BottomMenu.js

@@ -1,19 +1,27 @@
-import React__default,{useState,useRef,useEffect}from'react';import {Link}from'@remix-run/react';import {useAppSelector}from'@admin-layout/client';import {generateMenuPath}from'../util.js';import {renderDynamicIcon}from'../../../helpers/DynamicIcon.js';import switchDialogs from'@app/dialog/WrappedDialogsSwitch';const DialogComponent = ({
-  path,
-  onClose
-}) => {
-  const [dialog, setDialog] = useState(null);
-  useEffect(() => {
-    if (!dialog) {
-      switchDialogs(path).then(component => {
-        setDialog(component);
-      });
+import React__default,{useState,useRef,useEffect}from'react';import {Link}from'@remix-run/react';import {useAppSelector}from'@admin-layout/client';import {generateMenuPath}from'../util.js';import {renderDynamicIcon}from'../../../helpers/DynamicIcon.js';import {MenuDynamicDialog}from'./MenuDynamicDialog.js';// Smooth entrance for the account/user dropdown — matches the rail's motion language.
+// transform/opacity/filter only; honors prefers-reduced-motion.
+const BOTTOM_MENU_MOTION_CSS = `
+    @keyframes qlBottomDropdownIn {
+        from { opacity: 0; transform: translateY(8px) scale(0.96); filter: blur(4px); }
+        to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
+    }
+    .ql-bottom-dropdown {
+        animation: qlBottomDropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+        will-change: transform, opacity;
+    }
+    @keyframes qlBmItemIn {
+        from { opacity: 0; transform: translateX(-6px); }
+        to   { opacity: 1; transform: translateX(0); }
+    }
+    .ql-bm-item {
+        animation: qlBmItemIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
+        animation-delay: calc(40ms + var(--i, 0) * 26ms);
     }
-  }, []);
-  return dialog ? React__default.createElement(dialog.default, {
-    onClose: onClose
-  }) : React__default.createElement("div", null, "Loading...");
-};
+    @media (prefers-reduced-motion: reduce) {
+        .ql-bottom-dropdown { animation-duration: 0.01ms; filter: none; }
+        .ql-bm-item { animation: none; opacity: 1; }
+    }
+`;
 const BottomMenu = ({
   menuData,
   routeParams,
@@ -159,62 +167,17 @@ const BottomMenu = ({
         key,
         name
       } = item;
-      return key === openedModalKey && React__default.createElement("div", {
+      if (key !== openedModalKey) {
+        return null;
+      }
+      return React__default.createElement(MenuDynamicDialog, {
         key: k,
-        className: "fixed inset-0 z-50 overflow-y-auto"
-      }, React__default.createElement("div", {
-        className: "flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
-      }, React__default.createElement("div", {
-        className: "fixed inset-0 transition-opacity",
-        "aria-hidden": "true"
-      }, React__default.createElement("div", {
-        className: "absolute inset-0 bg-black bg-opacity-50",
-        onClick: () => {
-          onClose();
-          setOpenedModalKey(null);
-        }
-      })), React__default.createElement("span", {
-        className: "hidden sm:inline-block sm:align-middle sm:h-screen",
-        "aria-hidden": "true"
-      }, "\u200B"), React__default.createElement("div", {
-        className: "inline-block align-bottom rounded-themed-lg text-left overflow-hidden shadow-themed-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full themed-modal",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": "modal-headline"
-      }, React__default.createElement("div", {
-        className: "px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
-      }, React__default.createElement("div", {
-        className: "flex justify-end"
-      }, React__default.createElement("button", {
-        type: "button",
-        className: "rounded-themed text-muted-foreground hover:text-foreground focus-themed",
-        onClick: () => {
-          onClose();
-          setOpenedModalKey(null);
-        }
-      }, React__default.createElement("span", {
-        className: "sr-only"
-      }, "Close"), React__default.createElement("svg", {
-        className: "h-6 w-6",
-        xmlns: "http://www.w3.org/2000/svg",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor",
-        "aria-hidden": "true"
-      }, React__default.createElement("path", {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2",
-        d: "M6 18L18 6M6 6l12 12"
-      })))), React__default.createElement("div", {
-        className: "mt-2"
-      }, React__default.createElement(DialogComponent, {
-        path: dialogPath,
+        dialogPath: dialogPath,
         onClose: () => {
           onClose();
           setOpenedModalKey(null);
         }
-      }))))));
+      });
     });
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
@@ -247,11 +210,18 @@ const BottomMenu = ({
   }))), isMobile && React__default.createElement("span", {
     className: "text-lg font-medium"
   }, t(nickname))), isOpen && React__default.createElement("div", {
-    className: "bg-background absolute bottom-full mb-2 w-72 rounded-themed shadow-themed-lg py-1 themed-dropdown ring-1 ring-border focus:outline-none z-40",
+    className: "ql-bottom-dropdown bg-background absolute bottom-full mb-2 w-72 rounded-themed shadow-themed-lg py-1 themed-dropdown ring-1 ring-border focus:outline-none z-40",
     role: "menu",
     "aria-orientation": "vertical",
-    "aria-labelledby": "user-menu"
-  }, MenusList?.upperMenus?.map((item, k) => React__default.createElement("div", {
+    "aria-labelledby": "user-menu",
+    style: {
+      transformOrigin: 'bottom left'
+    }
+  }, React__default.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: BOTTOM_MENU_MOTION_CSS
+    }
+  }), MenusList?.upperMenus?.map((item, k) => React__default.createElement("div", {
     key: k,
     className: "px-1 py-1"
   }, item.modal ? getMenuItemModal(item) : getMenuItemPath(item))), MenusList?.upperMenus?.length > 0 && MenusList?.middleMenus?.length > 0 && React__default.createElement("hr", {
@@ -261,9 +231,12 @@ const BottomMenu = ({
     className: "px-1 py-1"
   }, item.modal ? getMenuItemModal(item) : getMenuItemPath(item))), profile && accountMenuItems?.children && React__default.createElement("div", {
     className: "py-2"
-  }, accountMenuItems.children.map(item => React__default.createElement(Link, {
+  }, accountMenuItems.children.map((item, idx) => React__default.createElement(Link, {
     key: item.key,
-    className: "flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 cursor-pointer transition-colors",
+    className: "ql-bm-item flex items-center justify-between px-4 py-2 text-sm text-foreground hover:bg-muted cursor-pointer transition-colors",
+    style: {
+      ['--i']: idx
+    },
     to: generateMenuPath(item.path, routeParams)
   }, React__default.createElement("div", {
     className: "flex items-center"

package/lib/components/Layout/Sidebar/BottomMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomMenu.js","sources":["../../../../src/components/Layout/Sidebar/BottomMenu.tsx"],"sourcesContent":[null],"names":["React","RouterLink"],"mappings":"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"}
+{"version":3,"file":"BottomMenu.js","sources":["../../../../src/components/Layout/Sidebar/BottomMenu.tsx"],"sourcesContent":[null],"names":["React","RouterLink"],"mappings":"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"}

package/lib/components/Layout/Sidebar/DynamicIcon.js

@@ -35,7 +35,13 @@ const DynamicIcon = React__default.memo(({
     };
     loadIcon();
   }, []);
-  if (!IconComponent) return null;
+  if (!IconComponent) return React__default.createElement("div", {
+    style: {
+      width: '16px',
+      height: '16px',
+      display: 'flex'
+    }
+  });
   return React__default.createElement("div", {
     style: {
       margin: '0px',

package/lib/components/Layout/Sidebar/DynamicIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicIcon.js","sources":["../../../../src/components/Layout/Sidebar/DynamicIcon.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"sGAKO,MAAM,iBAAiB,GAAG,IAAC,IAAM;AACpC,EAAA,IAAA,OAAI,IAAO,KAAI,QAAK,EAAQ;AACxB,IAAA,OAAAA,cAAO,CAAA,aAAA,CAAA,WAAC,EAAA;MACX,IAAA,EAAA,IAAA,CAAA,IAAA;AAAM,MAAA,SAAI,EAAA,IAAO,CAAA;AACd,KAAA,CAAA;SACH,IAAA,OAAA,IAAA,KAAA,QAAA,EAAA;WAAOA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AACJ,MAAA,IAAA,EAAA;KACH,CAAA;AACL,EAAE,CAAA,MAAA;AAEF,IAAA,OAAO,IAAM;;;AAID,MAAA,WAAc,GAAGA,cAAK,CAAA,IAAA,CAAA,CAAA;;AAEd,EAAA,SAAA;;AAEK,CAAA,KAAA;AACG,EAAA,MAAA,CAAA,aAAA,EAAI,4BAA0B,CAAA,IAAA,CAAQ;;qBAErC,MAAA;0BAAO;0BACJ,GAAA,eAAoB;oBACxB,CAAC,IAAA,CAAA,MAAA,IAAA;AACL,UAAA,IAAA,OAAE,MAAA,CAAA,OAAA,KAAA,QAAA,EAAA;AACD,YAAA,gBAAO,CAAA,MAAO,MAAA,CAAA,OAAA,CAAA,IAAA,CAAA,CAAA;;AAEf,YAAA,gBAAG,CAAA,MAAA,MAAA,CAAA,OAAA,CAAA;;AAEf,QAAA,CAAC,CAAC,CAAA,KAAA,CAAA,GAAA,IAAA;AACF,UAAA,gBAAW,CAAA,IAAA,CAAA;QACZ,CAAE,CAAC;AAEN,MAAA;AAAoB,IAAA,CAAA;IAEpB,QACI;AAIgB,EAAA,CAAA,EAAA,EAAA,CAAA;AACH,EAAA,IAAA,CAAA,aACQ,EACX,OAGZ,IAAA;AACN,SACCA,cAAS,CAAE,aAAa,CAAC,KAAA,EAAA;;;;;;;;;;;"}
+{"version":3,"file":"DynamicIcon.js","sources":["../../../../src/components/Layout/Sidebar/DynamicIcon.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"sGAKO,MAAM,iBAAiB,GAAG,IAAC,IAAM;AACpC,EAAA,IAAA,OAAI,IAAO,KAAI,QAAK,EAAQ;AACxB,IAAA,OAAAA,cAAO,CAAA,aAAA,CAAA,WAAC,EAAA;MACX,IAAA,EAAA,IAAA,CAAA,IAAA;AAAM,MAAA,SAAI,EAAA,IAAO,CAAA;AACd,KAAA,CAAA;SACH,IAAA,OAAA,IAAA,KAAA,QAAA,EAAA;WAAOA,cAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AACJ,MAAA,IAAA,EAAA;KACH,CAAA;AACL,EAAE,CAAA,MAAA;AAEF,IAAA,OAAO,IAAM;;;AAID,MAAA,WAAc,GAAGA,cAAK,CAAA,IAAA,CAAA,CAAA;;AAEd,EAAA,SAAA;;AAEK,CAAA,KAAA;AACG,EAAA,MAAA,CAAA,aAAA,EAAI,4BAA0B,CAAA,IAAA,CAAQ;;qBAErC,MAAA;0BAAO;0BACJ,GAAA,eAAoB;oBACxB,CAAC,IAAA,CAAA,MAAA,IAAA;AACL,UAAA,IAAA,OAAE,MAAA,CAAA,OAAA,KAAA,QAAA,EAAA;AACD,YAAA,gBAAO,CAAA,MAAO,MAAA,CAAA,OAAA,CAAA,IAAA,CAAA,CAAA;;AAEf,YAAA,gBAAG,CAAA,MAAA,MAAA,CAAA,OAAA,CAAA;;AAEf,QAAA,CAAC,CAAC,CAAA,KAAA,CAAA,GAAA,IAAA;AACF,UAAA,gBAAW,CAAA,IAAA,CAAA;QACZ,CAAE,CAAC;AAEN,MAAA;AAAoB,IAAA,CAAA;IAEpB,QACI;AAIgB,EAAA,CAAA,EAAA,EAAA,CAAA;AACH,EAAA,IAAA,CAAA,aACQ,EACX,OAGZA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACN,IACC,KAAA,EAAA;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/Sidebar/MainSidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/MainSidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAO7C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0R9C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MainSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/MainSidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAS7C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8R9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Layout/Sidebar/MainSidebar.js

@@ -1,4 +1,4 @@
-import {getMenuSeparation}from'@admin-layout/client';import React__default,{useEffect}from'react';import {useTranslation}from'react-i18next';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {icons}from'../../../icons.js';import BottomMenuDropDown from'../GlobalFooter/BottomMenuDropdown.js';import {RightContent}from'../GlobalHeader/RightContent.js';import {Divider}from'./Divider.js';import {MainSidebarMenu}from'./MainSidebarMenu.js';import'@common-stack/components-pro';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {SideMenuLogoSlot}from'../slot-fill/SideMenuLogo.js';const MainSidebar = props => {
+import {getMenuSeparation}from'@admin-layout/client';import React__default,{useEffect}from'react';import {useTranslation}from'react-i18next';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {icons}from'../../../icons.js';import BottomMenuDropDown from'../GlobalFooter/BottomMenuDropdown.js';import {RightContent}from'../GlobalHeader/RightContent.js';import {Divider}from'./Divider.js';import {renderDynamicIcon}from'./DynamicIcon.js';import {MainSidebarMenu}from'./MainSidebarMenu.js';import {SidebarRailFX}from'./SidebarRailFX.js';import'@common-stack/components-pro';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {SideMenuLogoSlot}from'../slot-fill/SideMenuLogo.js';const MainSidebar = props => {
   const {
     isSideMenuOpen,
     closeSideMenu,
@@ -11,9 +11,9 @@ import {getMenuSeparation}from'@admin-layout/client';import React__default,{useE
     showHeader,
     menuHeaderRender,
     deviceSettings,
-    isSideMenuLayout
+    isSideMenuLayout,
+    navbarSlotStripHeight = 0
   } = props;
-  const [iconModule, setIconModule] = React__default.useState(null);
   const {
     t,
     i18n
@@ -49,15 +49,10 @@ import {getMenuSeparation}from'@admin-layout/client';import React__default,{useE
     splitMenus: getUILayoutValue('splitMenus'),
     upperMenuDividerName: getUILayoutValue('upperMenuDividerName'),
     middleMenuDividerName: getUILayoutValue('middleMenuDividerName'),
-    lowerMenuDividerName: getUILayoutValue('lowerMenuDividerName')
+    lowerMenuDividerName: getUILayoutValue('lowerMenuDividerName'),
+    // Opt-in ambient rail backdrop: 'off' (default) | 'aurora' | 'webgpu'.
+    railFx: getUILayoutValue('railFx') || 'off'
   };
-  useEffect(() => {
-    if (!iconModule) {
-      import('./DynamicIcon.js').then(module => {
-        setIconModule(module);
-      });
-    }
-  }, []);
   const toggleCollapsed = () => {
     if (isMobile) {
       closeSideMenu();
@@ -102,14 +97,14 @@ import {getMenuSeparation}from'@admin-layout/client';import React__default,{useE
       const updatedItem = {
         ...item,
         name: t(item.name),
-        icon: iconModule && item.icon ? iconModule.renderDynamicIcon(item.icon) : null
+        icon: item.icon ? renderDynamicIcon(item.icon) : null
       };
       if (updatedItem.children) {
         updatedItem.children = updateMenuIcons(updatedItem.children);
       }
       return updatedItem;
     });
-  }, [t, iconModule]);
+  }, [t]);
   const processedMiddleMenus = React__default.useMemo(() => updateMenuIcons(middleMenus), [middleMenus, updateMenuIcons]);
   const processedLowerMenus = React__default.useMemo(() => updateMenuIcons(lowerMenus), [lowerMenus, updateMenuIcons]);
   const processedBottomMenus = React__default.useMemo(() => updateMenuIcons(bottomMenus), [bottomMenus, updateMenuIcons]);
@@ -188,9 +183,17 @@ import {getMenuSeparation}from'@admin-layout/client';import React__default,{useE
     }))));
   };
   return React__default.createElement("div", null, !isMobile && React__default.createElement("aside", {
-    className: `${deviceLayout?.fixedSidebar ? 'fixed' : 'relative'} border-r border-border z-20 bg-card text-card-foreground md:block flex-shrink-0 transition-all duration-300 ease-in-out ${collapsed ? 'w-16' : 'w-64'} ${showHeader && deviceLayout?.fixedHeader ? deviceLayout?.fixedSidebar ? 'h-[calc(100vh-5rem)] top-20' : 'h-[calc(100vh-5rem)]' : 'h-screen'}`,
-    style: SidebarStyles
-  }, menuHeaderRender && isSideMenuLayout && React__default.createElement("div", {
+    className: `${deviceLayout?.fixedSidebar ? 'fixed' : 'relative'} border-r border-border z-20 bg-card text-card-foreground md:block flex-shrink-0 transition-all duration-300 ease-in-out ${collapsed ? 'w-16' : 'w-64'} ${navbarSlotStripHeight > 0 ? '' : showHeader && deviceLayout?.fixedHeader ? deviceLayout?.fixedSidebar ? 'h-[calc(100vh-5rem)] top-20' : 'h-[calc(100vh-5rem)]' : 'h-screen'}`,
+    style: {
+      ...SidebarStyles,
+      ...(navbarSlotStripHeight > 0 && {
+        top: deviceLayout?.fixedSidebar ? navbarSlotStripHeight : undefined,
+        height: `calc(100vh - ${navbarSlotStripHeight}px)`
+      })
+    }
+  }, React__default.createElement(SidebarRailFX, {
+    mode: deviceLayout?.railFx
+  }), menuHeaderRender && isSideMenuLayout && React__default.createElement("div", {
     className: "border-b border-border py-1 flex items-center justify-center"
   }, React__default.createElement(SideMenuLogoSlot, {
     settings: settings,
@@ -223,4 +226,4 @@ import {getMenuSeparation}from'@admin-layout/client';import React__default,{useE
     collapsed: collapsed,
     routeParams: routeParams
   }))));
-};export{MainSidebar,MainSidebar as default};//# sourceMappingURL=MainSidebar.js.map
+};export{MainSidebar};//# sourceMappingURL=MainSidebar.js.map

package/lib/components/Layout/Sidebar/MainSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainSidebar.js","sources":["../../../../src/components/Layout/Sidebar/MainSidebar.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}
+{"version":3,"file":"MainSidebar.js","sources":["../../../../src/components/Layout/Sidebar/MainSidebar.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}

package/lib/components/Layout/Sidebar/MainSidebarMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainSidebarMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/MainSidebarMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AA+bjD,iBAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,qBAyNjG;AAGD,eAAO,MAAM,eAAe,4DAAuC,CAAC"}
+{"version":3,"file":"MainSidebarMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/MainSidebarMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAwiBjD,iBAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,qBAiTjG;AAGD,eAAO,MAAM,eAAe,4DAAuC,CAAC"}

package/lib/components/Layout/Sidebar/MainSidebarMenu.js

@@ -1,4 +1,4 @@
-import {generateMenuPath}from'@admin-layout/client';import {useLocation,useNavigate}from'@remix-run/react';import React__default,{useState,useEffect,useCallback}from'react';import {icons}from'../../../icons.js';// Constants moved outside component
+import {generateMenuPath}from'@admin-layout/client';import {useLocation,useNavigate}from'@remix-run/react';import React__default,{useState,useRef,useCallback,useEffect}from'react';import {icons}from'../../../icons.js';// Constants moved outside component
 const SIDEBAR_WIDTHS = {
   COLLAPSED: 64,
   EXPANDED: 256
@@ -24,11 +24,84 @@ const isMenuItemActive = (itemPath, currentPath, routeParams, exact) => {
   }
   return false;
 };
-// CSS keyframes definition moved outside component
+// Motion system — sliding active indicator + icon micro-interactions when collapsed.
+// All transforms/opacity/filter only; layout untouched. Honors prefers-reduced-motion.
+const SIDEBAR_MOTION_CSS = `
+    .ql-rail-indicator {
+        position: absolute;
+        left: 2px;
+        top: 0;
+        width: 3px;
+        border-radius: 9999px;
+        background: hsl(var(--primary));
+        box-shadow: 0 0 0 0.5px hsl(var(--primary) / 0.25), 0 0 12px hsl(var(--primary) / 0.55);
+        pointer-events: none;
+        will-change: transform, height, opacity;
+        z-index: 1;
+    }
+    .ql-rail-indicator--animated {
+        transition:
+            transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
+            height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
+            opacity 0.2s ease-out;
+    }
+    .ql-rail-icon {
+        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), filter 0.24s ease-out;
+        will-change: transform;
+    }
+    .ql-rail-item:hover .ql-rail-icon {
+        transform: translateY(-1px) scale(1.12);
+    }
+    .ql-rail-item:active .ql-rail-icon {
+        transform: scale(0.94);
+        transition-duration: 0.1s;
+    }
+    .ql-rail-icon-active {
+        transform: scale(1.08);
+        filter: drop-shadow(0 1px 6px hsl(var(--primary) / 0.45));
+    }
+    .ql-rail-item:hover .ql-rail-icon-active {
+        transform: translateY(-1px) scale(1.14);
+    }
+    .ql-hover-accent {
+        background: hsl(var(--primary) / 0.35);
+        animation: qlHoverAccentIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    @keyframes qlHoverAccentIn {
+        from { opacity: 0; transform: scaleY(0.4); }
+        to   { opacity: 1; transform: scaleY(1); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .ql-rail-indicator--animated { transition: opacity 0.12s ease-out; }
+        .ql-rail-icon,
+        .ql-rail-item:hover .ql-rail-icon,
+        .ql-rail-item:active .ql-rail-icon,
+        .ql-rail-item:hover .ql-rail-icon-active { transition: none; transform: none; }
+        .ql-rail-icon-active { transform: none; }
+        .ql-hover-accent { animation: none; }
+    }
+`;
+// CSS keyframes for collapsed popup flyout
 const POPUP_ANIMATION_CSS = `
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateX(-10px); }
-        to { opacity: 1; transform: translateX(0); }
+    @keyframes flyoutIn {
+        from { opacity: 0; transform: translateX(-14px) scale(0.98); filter: blur(6px); }
+        to   { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
+    }
+    @keyframes flyoutItemIn {
+        from { opacity: 0; transform: translateX(10px); }
+        to   { opacity: 1; transform: translateX(0); }
+    }
+    .ql-popup-flyout {
+        animation: flyoutIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+    .ql-popup-item {
+        opacity: 0;
+        animation: flyoutItemIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+        animation-delay: calc(60ms + var(--i, 0) * 38ms);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .ql-popup-flyout { animation-duration: 0.01ms; filter: none; }
+        .ql-popup-item { animation: none; opacity: 1; }
     }
 `;
 const getTextColor = (active, navTheme) => {
@@ -98,6 +171,7 @@ const MenuItem = React__default.memo(({
   onMenuHover,
   onMenuLeave,
   onNavigate,
+  registerItemRef,
   ChevronUpIcon,
   ChevronDownIcon
 }) => {
@@ -110,7 +184,8 @@ const MenuItem = React__default.memo(({
   const subMenuItemPaddingLeft = `${depth * 2}rem`;
   // Determine styling based on whether it's a parent or child item
   const isParentWithChildren = hasChildren && depth === 0;
-  const shouldApplyBackground = isActive && !isParentWithChildren || isHovered;
+  const isTopLevel = depth === 0 && !isHoverMenu;
+  const shouldApplyBackground = !isTopLevel && isActive || isTopLevel && !collapsed && isActive && !isParentWithChildren || isHovered;
   const handleMenuClick = useCallback(e => {
     // Prevent event from bubbling to parent menu items
     e.stopPropagation();
@@ -144,13 +219,16 @@ const MenuItem = React__default.memo(({
     };
     // Create a recursive function to render menu items and their children
     const renderNestedItems = (items, currentDepth) => {
-      return items.map(childItem => {
+      return items.map((childItem, idx) => {
         const isChildOpen = openMenus.includes(childItem.path);
         const isChildActive = isMenuItemActive(childItem.path, locationPathname, routeParams, childItem.exact);
         const hasGrandchildren = childItem.children && childItem.children.length > 0;
         return React__default.createElement("div", {
           key: childItem.path,
-          className: "popup-menu-item"
+          className: "ql-popup-item popup-menu-item",
+          style: {
+            ['--i']: idx
+          }
         }, React__default.createElement("div", {
           className: `flex items-center justify-between w-full px-4 py-2.5 hover:bg-accent/20 text-sm cursor-pointer rounded-sm ${isChildActive ? 'bg-accent/10 text-primary font-medium' : 'text-foreground'} ${hasGrandchildren ? 'font-medium' : ''}`,
           onClick: e => {
@@ -184,13 +262,17 @@ const MenuItem = React__default.memo(({
       });
     };
     return React__default.createElement("div", {
-      className: "fixed shadow-themed-xl rounded-themed-lg border border-border z-[999] themed-dropdown bg-card",
+      className: "ql-popup-flyout fixed shadow-themed-xl rounded-themed-lg border border-border z-[999] themed-dropdown bg-card",
       onClick: e => e.stopPropagation(),
       style: {
         left: `${SIDEBAR_WIDTHS[collapsed ? 'COLLAPSED' : 'EXPANDED']}px`,
         top: `${Math.max(popupPosition.top - 20, 10)}px`,
         // Adjust top position to be higher
-        animation: 'fadeIn 0.2s ease-out forwards',
+        transformOrigin: 'left center',
+        backdropFilter: 'blur(20px) saturate(1.4)',
+        WebkitBackdropFilter: 'blur(20px) saturate(1.4)',
+        background: 'hsl(var(--card) / 0.92)',
+        boxShadow: '0 24px 70px -24px rgba(0,0,0,0.45)',
         maxWidth: 'calc(100vw - 120px)',
         width: 'max-content',
         minWidth: POPUP_CONFIG.MIN_WIDTH,
@@ -214,10 +296,13 @@ const MenuItem = React__default.memo(({
     }, renderNestedItems(item.children)));
   }, [item, depth, collapsed, popupPosition.top, openMenus, navTheme, locationPathname, routeParams, onToggleMenu, onNavigate, ChevronUpIcon, ChevronDownIcon]);
   return React__default.createElement("div", {
-    className: `w-full relative group ${isHovered && collapsed && !isHoverMenu ? 'rounded-themed' : ''} ${isHovered && !isHoverMenu ? 'bg-muted' : ''}`,
+    ref: isTopLevel ? el => registerItemRef?.(item.path, el) : undefined,
+    className: `w-full relative group ${isTopLevel ? 'ql-rail-item' : ''} ${isHovered && collapsed && !isHoverMenu ? 'rounded-themed' : ''} ${isHovered && !isHoverMenu && !isTopLevel ? 'bg-muted' : ''}`,
     onMouseEnter: e => onMenuHover(e, item, isHoverMenu),
     onMouseLeave: () => onMenuLeave(item, isHoverMenu)
-  }, React__default.createElement("div", {
+  }, isTopLevel && isParentWithChildren && isHovered && !isActive && React__default.createElement("span", {
+    className: "absolute left-0 top-1.5 bottom-1.5 w-0.5 rounded-full ql-hover-accent"
+  }), React__default.createElement("div", {
     className: `flex items-center justify-between w-full px-1 py-2 hover:bg-muted text-sm cursor-pointer transition-colors rounded-themed mx-1 my-0.5 whitespace-nowrap overflow-hidden text-ellipsis ${shouldApplyBackground ? 'bg-muted' : ''}`,
     style: {
       paddingLeft: `calc(1rem + ${depth > 0 ? subMenuItemPaddingLeft : menuItemPaddingLeft})`
@@ -226,9 +311,9 @@ const MenuItem = React__default.memo(({
   }, React__default.createElement("div", {
     className: `flex items-center ${collapsed && !isHoverMenu ? 'justify-center w-full' : 'gap-3'}`
   }, item.icon ? React__default.createElement("span", {
-    className: `flex-shrink-0 ${getIconColor(isActive, navTheme)}`
+    className: `flex-shrink-0 ${getIconColor(isActive, navTheme)} ${isTopLevel && collapsed ? `ql-rail-icon ${isActive ? 'ql-rail-icon-active' : ''}` : ''}`
   }, item.icon) : collapsed && !isHoverMenu ? React__default.createElement("span", {
-    className: `flex items-center justify-center flex-shrink-0 ${getIconColor(isActive, navTheme)}`
+    className: `flex items-center justify-center flex-shrink-0 ${getIconColor(isActive, navTheme)} ${isTopLevel ? `text-[16px] h-6 w-6 select-none text-center ql-rail-icon ${isActive ? 'ql-rail-icon-active' : ''}` : ''}`
   }, getFirstLetter(item.name)) : null, (!collapsed || isHoverMenu) && React__default.createElement("span", {
     className: `font-medium whitespace-nowrap overflow-hidden text-ellipsis ${getTextColor(isActive, navTheme)} ${depth > 0 ? `text-xs` : ''}`
   }, item.name)), hasChildren && (!collapsed || isHoverMenu) && React__default.createElement("span", {
@@ -255,6 +340,7 @@ const MenuItem = React__default.memo(({
     onMenuHover: onMenuHover,
     onMenuLeave: onMenuLeave,
     onNavigate: onNavigate,
+    registerItemRef: registerItemRef,
     ChevronUpIcon: ChevronUpIcon,
     ChevronDownIcon: ChevronDownIcon
   }))));
@@ -290,11 +376,79 @@ function MainSidebarMenuComponent({
     top: 0,
     height: 0
   });
+  const navRef = useRef(null);
+  const itemRefs = useRef({});
+  const [indicator, setIndicator] = useState({
+    y: 0,
+    h: 0,
+    visible: false
+  });
+  const indicatorPrimed = useRef(false);
+  const [indicatorAnimated, setIndicatorAnimated] = useState(false);
   const {
     ChevronDownIcon,
     ChevronUpIcon
   } = icons;
   const navTheme = settings?.navTheme;
+  const registerItemRef = useCallback((path, el) => {
+    itemRefs.current[path] = el;
+  }, []);
+  // Tear down hover popup state on route change — mouse-leave never fires after in-popup navigation.
+  useEffect(() => {
+    setHoveredMenu(null);
+  }, [location.pathname]);
+  const isMenuItemActiveAtRoot = useCallback(itemPath => isMenuItemActive(itemPath, location.pathname, routeParams), [location.pathname, routeParams]);
+  const measureIndicator = useCallback(() => {
+    if (typeof window === 'undefined') return false;
+    const nav = navRef.current;
+    if (!nav) return false;
+    const activeItem = menuData.find(item => isMenuItemActiveAtRoot(item.path));
+    const el = activeItem ? itemRefs.current[activeItem.path] : null;
+    if (el) {
+      setIndicator({
+        y: el.offsetTop,
+        h: el.offsetHeight,
+        visible: true
+      });
+      return true;
+    }
+    setIndicator(prev => ({
+      ...prev,
+      visible: false
+    }));
+    return !activeItem;
+  }, [menuData, isMenuItemActiveAtRoot]);
+  const measureRef = useRef(measureIndicator);
+  measureRef.current = measureIndicator;
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const nav = navRef.current;
+    if (!nav) return;
+    const run = () => measureRef.current();
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(run) : null;
+    ro?.observe(nav);
+    window.addEventListener('resize', run);
+    return () => {
+      ro?.disconnect();
+      window.removeEventListener('resize', run);
+    };
+  }, []);
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const rafs = [];
+    if (!measureRef.current()) {
+      rafs.push(requestAnimationFrame(() => {
+        if (!measureRef.current()) rafs.push(requestAnimationFrame(() => measureRef.current()));
+      }));
+    }
+    if (!indicatorPrimed.current) {
+      indicatorPrimed.current = true;
+      rafs.push(requestAnimationFrame(() => setIndicatorAnimated(true)));
+    } else {
+      setIndicatorAnimated(true);
+    }
+    return () => rafs.forEach(r => cancelAnimationFrame(r));
+  }, [location.pathname, menuData, routeParams, collapsed]);
   // Initialize openMenus based on the current path
   const [openMenus, setOpenMenus] = useState(() => {
     return findParentPaths(menuData, location.pathname, routeParams);
@@ -429,9 +583,25 @@ function MainSidebarMenuComponent({
   }, [navigate]);
   return React__default.createElement("div", {
     className: "overflow-hidden"
-  }, React__default.createElement("nav", {
+  }, React__default.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: SIDEBAR_MOTION_CSS
+    }
+  }), React__default.createElement("nav", {
+    ref: navRef,
+    style: {
+      position: 'relative'
+    },
     className: `mt-2 ${collapsed ? 'px-1' : 'px-2'} overflow-x-hidden`
-  }, menuData.map(item => React__default.createElement(MenuItem, {
+  }, React__default.createElement("span", {
+    "aria-hidden": "true",
+    className: `ql-rail-indicator ${indicatorAnimated ? 'ql-rail-indicator--animated' : ''}`,
+    style: {
+      transform: `translateY(${indicator.y + 6}px)`,
+      height: `${Math.max(indicator.h - 12, 0)}px`,
+      opacity: indicator.visible ? 1 : 0
+    }
+  }), menuData.map(item => React__default.createElement(MenuItem, {
     key: item.path,
     item: item,
     depth: 0,
@@ -447,6 +617,7 @@ function MainSidebarMenuComponent({
     onMenuHover: handleMenuHover,
     onMenuLeave: handleMenuLeave,
     onNavigate: handleNavigate,
+    registerItemRef: registerItemRef,
     ChevronUpIcon: ChevronUpIcon,
     ChevronDownIcon: ChevronDownIcon
   }))));