@admin-layout/tailwind-design-pro 10.1.1-alpha.9 → 11.2.1-alpha.1

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

@@ -0,0 +1,224 @@
+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 => {
+  const {
+    isSideMenuOpen,
+    closeSideMenu,
+    menuData,
+    collapsed,
+    routeParams,
+    settings,
+    setCollapsed,
+    location,
+    showHeader,
+    menuHeaderRender,
+    deviceSettings,
+    isSideMenuLayout
+  } = props;
+  const [iconModule, setIconModule] = React__default.useState(null);
+  const {
+    t,
+    i18n
+  } = useTranslation('menu');
+  const {
+    isMobile
+  } = useMediaQuery();
+  const {
+    ChevronLeftIcon,
+    ChevronRightIcon
+  } = icons;
+  const currentRoute = location?.pathname || '/';
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  // Helper function to get value from settings with route/device override support
+  const getUILayoutValue = path => {
+    // Check for route/device-specific override first
+    const routeDeviceKey = `[${currentRoute}][${deviceType}]`;
+    const uiOverride = settings?.uiSettings?.[routeDeviceKey];
+    if (uiOverride) {
+      const value = path.split('.').reduce((obj, key) => obj?.[key], uiOverride);
+      if (value !== undefined) return value;
+    }
+    // Fallback to settings (flattened uilayout from configuration-registries)
+    return path.split('.').reduce((obj, key) => obj?.[key], settings);
+  };
+  // Get layout settings from the new flat structure
+  const deviceLayout = {
+    navigationMode: getUILayoutValue('navigationMode'),
+    sideMenuType: getUILayoutValue('sideMenuType'),
+    contentWidth: getUILayoutValue('contentWidth'),
+    fixedHeader: getUILayoutValue('fixedHeader'),
+    fixedSidebar: getUILayoutValue('fixedSidebar'),
+    splitMenus: getUILayoutValue('splitMenus'),
+    upperMenuDividerName: getUILayoutValue('upperMenuDividerName'),
+    middleMenuDividerName: getUILayoutValue('middleMenuDividerName'),
+    lowerMenuDividerName: getUILayoutValue('lowerMenuDividerName')
+  };
+  useEffect(() => {
+    if (!iconModule) {
+      import('./DynamicIcon.js').then(module => {
+        setIconModule(module);
+      });
+    }
+  }, []);
+  const toggleCollapsed = () => {
+    if (isMobile) {
+      closeSideMenu();
+    } else {
+      setCollapsed(!collapsed);
+    }
+  };
+  // Close sidebar when clicking outside on mobile
+  useEffect(() => {
+    const handleClickOutside = event => {
+      const sidebar = document.getElementById('mobile-sidebar');
+      if (sidebar && !sidebar.contains(event.target) && isSideMenuOpen) {
+        closeSideMenu();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSideMenuOpen, closeSideMenu]);
+  // Close sidebar when pressing escape
+  useEffect(() => {
+    const handleEscape = event => {
+      if (event.key === 'Escape' && isSideMenuOpen) {
+        closeSideMenu();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isSideMenuOpen, closeSideMenu]);
+  const {
+    upperMenus,
+    middleMenus,
+    lowerMenus,
+    bottomMenus
+  } = React__default.useMemo(() => getMenuSeparation(menuData || []), [menuData]);
+  const updateMenuIcons = React__default.useCallback((menuItems = []) => {
+    if (!menuItems || !Array.isArray(menuItems)) return [];
+    return menuItems.map(item => {
+      const updatedItem = {
+        ...item,
+        name: t(item.name),
+        icon: iconModule && item.icon ? iconModule.renderDynamicIcon(item.icon) : null
+      };
+      if (updatedItem.children) {
+        updatedItem.children = updateMenuIcons(updatedItem.children);
+      }
+      return updatedItem;
+    });
+  }, [t, iconModule]);
+  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]);
+  const bottomMenusData = React__default.useMemo(() => ({
+    menuData: processedBottomMenus
+  }), [processedBottomMenus]);
+  // Use CSS classes instead of theme-based styling
+  const getSidebarClasses = () => {
+    let classes = `text-gray-500 dark:text-gray-400 h-full flex flex-col`;
+    if (settings?.navTheme === 'realDark') {
+      classes += ' themed-sidebar';
+    }
+    if (showHeader) {
+      classes += ' md:h-[86vh]';
+    }
+    if (!showHeader || !menuHeaderRender) {
+      classes += ' md:h-[92vh]';
+    }
+    return classes;
+  };
+  const SidebarStyles = React__default.useMemo(() => {
+    const styles = {};
+    if (settings?.navTheme === 'realDark') {
+      styles.backgroundColor = '#222';
+      styles.color = '#fff !important';
+    }
+    return styles;
+  }, [settings]);
+  // Helper function to render a separator with a name
+  const renderSeparator = name => {
+    if (!deviceLayout?.splitMenus) return null;
+    return collapsed ? React__default.createElement("hr", {
+      className: "border-t border-border"
+    }) : React__default.createElement(Divider, {
+      className: "text-muted-foreground border-border my-2 p-0",
+      plain: true
+    }, name);
+  };
+  const renderSidebarContent = () => {
+    return React__default.createElement("div", {
+      className: getSidebarClasses(),
+      style: SidebarStyles
+    }, React__default.createElement("div", {
+      className: "relative"
+    }, React__default.createElement("button", {
+      onClick: toggleCollapsed,
+      className: "w-6 h-6 text-center bg-card text-muted-foreground flex items-center justify-center rounded-full shadow-themed-sm hover:text-foreground hover:shadow-themed-md transition-colors text-[22px] absolute right-[-13px] top-[20px]",
+      "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar'
+    }, collapsed ? React__default.createElement(ChevronRightIcon, {
+      fontSize: '11px'
+    }) : React__default.createElement(ChevronLeftIcon, {
+      fontSize: '11px'
+    }))), React__default.createElement("div", {
+      className: "flex-grow overflow-y-auto"
+    }, React__default.createElement("div", null, middleMenus?.length > 0 && React__default.createElement("div", {
+      className: "removeBoxShadow"
+    }, renderSeparator(deviceLayout?.middleMenuDividerName), React__default.createElement(MainSidebarMenu, {
+      menuData: processedMiddleMenus,
+      routeParams: routeParams,
+      settings: settings,
+      collapsed: collapsed
+    })), lowerMenus?.length > 0 && React__default.createElement("div", {
+      className: "removeBoxShadow"
+    }, renderSeparator(deviceLayout?.lowerMenuDividerName), React__default.createElement(MainSidebarMenu, {
+      menuData: processedLowerMenus,
+      routeParams: routeParams,
+      settings: settings,
+      collapsed: collapsed
+    }))), React__default.createElement("div", {
+      className: "p-4"
+    }, deviceLayout?.navigationMode === 'sidebar' && React__default.createElement(RightContent, {
+      upperMenus: upperMenus,
+      collapsed: collapsed,
+      routeParams: routeParams,
+      settings: settings
+    }))));
+  };
+  return React__default.createElement("div", null, !isMobile && React__default.createElement("aside", {
+    className: `${deviceLayout?.fixedSidebar ? 'fixed' : 'relative'} border-r border-border z-20 h-screen bg-card text-card-foreground md:block flex-shrink-0 transition-all duration-300 ease-in-out ${collapsed ? 'w-16' : 'w-64'}`,
+    style: SidebarStyles
+  }, menuHeaderRender && isSideMenuLayout && React__default.createElement("div", {
+    className: "border-b border-border py-1 flex items-center justify-center"
+  }, React__default.createElement(SideMenuLogoSlot, {
+    settings: settings,
+    location: location
+  })), React__default.createElement("div", null, renderSidebarContent()), React__default.createElement("div", {
+    className: "flex-shrink-0 p-4 border-t border-border",
+    style: SidebarStyles
+  }, React__default.createElement(BottomMenuDropDown, {
+    menus: bottomMenusData,
+    collapsed: collapsed,
+    routeParams: routeParams
+  }))), isSideMenuOpen && isMobile && React__default.createElement("div", {
+    className: "fixed inset-0 z-10 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center transition-opacity duration-300",
+    onClick: closeSideMenu
+  }), isSideMenuOpen && isMobile && React__default.createElement("aside", {
+    id: "mobile-sidebar",
+    className: `fixed inset-0 z-20 flex-shrink-0 bg-card text-card-foreground md:hidden transition-transform duration-300 ease-in-out transform ${collapsed ? 'w-16' : 'w-64'}`,
+    style: SidebarStyles
+  }, menuHeaderRender && isSideMenuLayout && React__default.createElement("div", {
+    className: "border-b border-border flex items-center justify-center"
+  }, React__default.createElement(SideMenuLogoSlot, {
+    settings: settings,
+    location: location
+  })), React__default.createElement("div", null, renderSidebarContent()), React__default.createElement("div", {
+    className: "flex-shrink-0 p-4 border-t border-border"
+  }, React__default.createElement(BottomMenuDropDown, {
+    menus: bottomMenusData,
+    collapsed: collapsed,
+    routeParams: routeParams
+  }))));
+};export{MainSidebar,MainSidebar as default};//# sourceMappingURL=MainSidebar.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SidebarMenuProps } from '../../typings';
+declare function MainSidebarMenuComponent({ menuData, routeParams, settings, collapsed }: SidebarMenuProps): React.JSX.Element;
+export declare const MainSidebarMenu: React.MemoExoticComponent<typeof MainSidebarMenuComponent>;
+export {};
+//# sourceMappingURL=MainSidebarMenu.d.ts.map

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

@@ -0,0 +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;AAsajD,iBAAS,wBAAwB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,qBAyNjG;AAGD,eAAO,MAAM,eAAe,4DAAuC,CAAC"}