@admin-layout/tailwind-design-pro 12.0.16-alpha.7 → 12.0.16-alpha.71

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

@@ -0,0 +1,291 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {generateMenuPath}from'@admin-layout/client';import {useLocation,Link}from'@remix-run/react';import React__default,{useState,useCallback}from'react';import {icons}from'../../../icons.js';// Constants moved outside component
+const SIDEBAR_WIDTHS = {
+  COLLAPSED: 64,
+  EXPANDED: 256
+};
+const POPUP_CONFIG = {
+  MAX_HEIGHT: 400,
+  MIN_WIDTH: 220};
+// Pure function moved outside component
+const getFirstLetter = name => name.charAt(0).toUpperCase();
+// Utility for determining active menu item
+const isMenuItemActive = (itemPath, currentPath, routeParams) => {
+  const menuPath = generateMenuPath(itemPath, routeParams);
+  // Exact match
+  if (currentPath === menuPath) {
+    return true;
+  }
+  // Check if current path is a child of the menu item path
+  if (menuPath && currentPath.startsWith(menuPath + '/')) {
+    return true;
+  }
+  return false;
+};
+// CSS keyframes definition moved outside component
+const POPUP_ANIMATION_CSS = `
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateX(-10px); }
+        to { opacity: 1; transform: translateX(0); }
+    }
+`;
+const getTextColor = (active, navTheme) => {
+  if (active) return 'text-primary';
+  if (navTheme === 'realDark') return 'text-white';
+  return 'text-foreground';
+};
+const getIconColor = (active, navTheme) => {
+  if (active) return 'text-primary';
+  if (navTheme === 'realDark') return 'text-white';
+  return 'text-muted-foreground';
+};
+// Custom comparison function for React.memo
+// Update the areMenuItemPropsEqual function to be more precise about location changes
+const areMenuItemPropsEqual = (prevProps, nextProps) => {
+  // Always re-render if the item itself changed
+  if (prevProps.item !== nextProps.item) {
+    return false;
+  }
+  // Check only if active state changes instead of checking entire pathname
+  const prevIsActive = isMenuItemActive(prevProps.item.path, prevProps.locationPathname, prevProps.routeParams);
+  const nextIsActive = isMenuItemActive(nextProps.item.path, nextProps.locationPathname, nextProps.routeParams);
+  if (prevIsActive !== nextIsActive) {
+    return false;
+  }
+  // Rest of your existing checks...
+  if (prevProps.depth !== nextProps.depth || prevProps.isHoverMenu !== nextProps.isHoverMenu || prevProps.collapsed !== nextProps.collapsed || prevProps.navTheme !== nextProps.navTheme) {
+    return false;
+  }
+  // Check routeParams (shallow object comparison)
+  const prevRouteParamsKeys = Object.keys(prevProps.routeParams);
+  const nextRouteParamsKeys = Object.keys(nextProps.routeParams);
+  if (prevRouteParamsKeys.length !== nextRouteParamsKeys.length) {
+    return false;
+  }
+  for (const key of prevRouteParamsKeys) {
+    if (prevProps.routeParams[key] !== nextProps.routeParams[key]) {
+      return false;
+    }
+  }
+  // Check popupPosition
+  if (prevProps.popupPosition.top !== nextProps.popupPosition.top || prevProps.popupPosition.height !== nextProps.popupPosition.height) {
+    return false;
+  }
+  // Check if this specific item's open state changed
+  const prevIsOpen = prevProps.openMenus.includes(prevProps.item.path);
+  const nextIsOpen = nextProps.openMenus.includes(nextProps.item.path);
+  if (prevIsOpen !== nextIsOpen) {
+    return false;
+  }
+  // Check if this specific item's hover state changed
+  const prevIsHovered = prevProps.hoveredMenu === prevProps.item.path;
+  const nextIsHovered = nextProps.hoveredMenu === nextProps.item.path;
+  if (prevIsHovered !== nextIsHovered) {
+    return false;
+  }
+  // If none of the relevant props changed, don't re-render
+  return true;
+};
+const MenuItem = React__default.memo(({
+  item,
+  depth,
+  isHoverMenu,
+  openMenus,
+  hoveredMenu,
+  collapsed,
+  navTheme,
+  locationPathname,
+  routeParams,
+  popupPosition,
+  onToggleMenu,
+  onMenuHover,
+  onMenuLeave,
+  ChevronUpIcon,
+  ChevronDownIcon
+}) => {
+  // Only log when actually rendering (not on every navigation)
+  const hasChildren = item.children && item.children.length > 0;
+  const isOpen = openMenus.includes(item.path);
+  const isActive = isMenuItemActive(item.path, locationPathname, routeParams);
+  const isHovered = hoveredMenu === item.path;
+  const menuItemPaddingLeft = `${depth * 1}rem`;
+  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 handleMenuClick = useCallback(e => {
+    if (hasChildren && !collapsed) {
+      onToggleMenu(item.path, depth, e);
+    }
+  }, [hasChildren, collapsed, item.path, depth, onToggleMenu]);
+  const renderPopupMenu = useCallback(() => {
+    if (!item.children || item.children.length === 0) return null;
+    return jsxs("div", {
+      className: "fixed shadow-themed-xl rounded-themed-lg border border-border z-[999] overflow-hidden themed-dropdown",
+      style: {
+        left: `${SIDEBAR_WIDTHS[collapsed ? 'COLLAPSED' : 'EXPANDED']}px`,
+        top: `${popupPosition.top}px`,
+        animation: 'fadeIn 0.2s ease-out forwards',
+        maxWidth: 'calc(100vw - 100px)',
+        width: 'max-content',
+        minWidth: POPUP_CONFIG.MIN_WIDTH
+      },
+      children: [jsx("style", {
+        dangerouslySetInnerHTML: {
+          __html: POPUP_ANIMATION_CSS
+        }
+      }), jsx("div", {
+        className: "font-medium text-sm px-4 py-3 border-b border-border whitespace-nowrap bg-muted",
+        children: jsx("span", {
+          className: "text-primary",
+          children: item.name
+        })
+      }), jsx("div", {
+        className: `max-h-[${POPUP_CONFIG.MAX_HEIGHT}px] overflow-y-auto overflow-x-hidden py-1`,
+        children: item.children.map(child => jsx(MenuItem, {
+          item: child,
+          depth: depth + 1,
+          isHoverMenu: true,
+          openMenus: openMenus,
+          hoveredMenu: hoveredMenu,
+          collapsed: collapsed,
+          navTheme: navTheme,
+          locationPathname: locationPathname,
+          routeParams: routeParams,
+          popupPosition: popupPosition,
+          onToggleMenu: onToggleMenu,
+          onMenuHover: onMenuHover,
+          onMenuLeave: onMenuLeave,
+          ChevronUpIcon: ChevronUpIcon,
+          ChevronDownIcon: ChevronDownIcon
+        }, child.path))
+      })]
+    });
+  }, [item, depth, collapsed, popupPosition.top, openMenus, hoveredMenu, navTheme, locationPathname, routeParams, onToggleMenu, onMenuHover, onMenuLeave, ChevronUpIcon, ChevronDownIcon]);
+  return jsxs("div", {
+    className: `w-full relative group ${isHovered && collapsed && !isHoverMenu ? 'rounded-themed' : ''} ${isHovered && !isHoverMenu ? 'bg-muted' : ''}`,
+    onMouseEnter: e => onMenuHover(e, item, isHoverMenu),
+    onMouseLeave: () => onMenuLeave(item, isHoverMenu),
+    children: [jsxs(Link, {
+      to: hasChildren && collapsed && !isHoverMenu ? '#' : generateMenuPath(item?.path, routeParams),
+      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})`
+      },
+      onClick: handleMenuClick,
+      children: [jsxs("div", {
+        className: `flex items-center ${collapsed && !isHoverMenu ? 'justify-center w-full' : 'gap-3'}`,
+        children: [item.icon ? jsx("span", {
+          className: `flex-shrink-0 ${getIconColor(isActive, navTheme)}`,
+          children: item.icon
+        }) : collapsed && !isHoverMenu ? jsx("span", {
+          className: `flex items-center justify-center flex-shrink-0 ${getIconColor(isActive, navTheme)}`,
+          children: getFirstLetter(item.name)
+        }) : null, (!collapsed || isHoverMenu) && jsx("span", {
+          className: `font-medium whitespace-nowrap overflow-hidden text-ellipsis ${getTextColor(isActive, navTheme)} ${depth > 0 ? `text-xs` : ''}`,
+          children: item.name
+        })]
+      }), hasChildren && (!collapsed || isHoverMenu) && jsx("span", {
+        className: `flex-shrink-0 ml-1 ${getIconColor(isActive, navTheme)}`,
+        children: isOpen ? jsx(ChevronUpIcon, {
+          className: "h-4 w-4"
+        }) : jsx(ChevronDownIcon, {
+          className: "h-4 w-4"
+        })
+      })]
+    }), collapsed && hasChildren && isHovered && !isHoverMenu && item.children.length > 0 && renderPopupMenu(), hasChildren && isOpen && !collapsed && jsx("div", {
+      className: "transition-all duration-200 ease-in-out",
+      children: item.children.map(child => jsx(MenuItem, {
+        item: child,
+        depth: depth + 1,
+        isHoverMenu: false,
+        openMenus: openMenus,
+        hoveredMenu: hoveredMenu,
+        collapsed: collapsed,
+        navTheme: navTheme,
+        locationPathname: locationPathname,
+        routeParams: routeParams,
+        popupPosition: popupPosition,
+        onToggleMenu: onToggleMenu,
+        onMenuHover: onMenuHover,
+        onMenuLeave: onMenuLeave,
+        ChevronUpIcon: ChevronUpIcon,
+        ChevronDownIcon: ChevronDownIcon
+      }, child.path))
+    })]
+  });
+}, areMenuItemPropsEqual);
+MenuItem.displayName = 'MenuItem';
+const MainSidebarMenuComponent = ({
+  menuData,
+  routeParams,
+  settings,
+  collapsed
+}) => {
+  const [openMenus, setOpenMenus] = useState([]);
+  const [hoveredMenu, setHoveredMenu] = useState(null);
+  const [popupPosition, setPopupPosition] = useState({
+    top: 0,
+    height: 0
+  });
+  const {
+    ChevronDownIcon,
+    ChevronUpIcon
+  } = icons;
+  const location = useLocation();
+  const navTheme = settings?.navTheme;
+  // Event handler for toggling menu open/closed
+  const toggleMenu = useCallback((path, depth, e) => {
+    e.preventDefault();
+    if (collapsed) return;
+    setOpenMenus(prev => {
+      if (prev.includes(path)) {
+        return prev.filter(item => item !== path);
+      } else {
+        return [...prev, path];
+      }
+    });
+  }, [collapsed]);
+  // Event handlers for hover effects
+  const handleMenuHover = useCallback((e, item, isHoverMenu) => {
+    // Only set hover state if the menu has children
+    if (collapsed && !isHoverMenu && item.children && item.children.length > 0) {
+      const element = e.currentTarget;
+      const rect = element.getBoundingClientRect();
+      setPopupPosition({
+        top: rect.top,
+        height: rect.height
+      });
+      setHoveredMenu(item.path);
+    }
+  }, [collapsed]);
+  const handleMenuLeave = useCallback((item, isHoverMenu) => {
+    if (collapsed && !isHoverMenu) {
+      setHoveredMenu(null);
+    }
+  }, [collapsed]);
+  return jsx("div", {
+    className: "overflow-hidden",
+    children: jsx("nav", {
+      className: `mt-2 ${collapsed ? 'px-1' : 'px-2'} overflow-x-hidden`,
+      children: menuData.map(item => jsx(MenuItem, {
+        item: item,
+        depth: 0,
+        isHoverMenu: false,
+        openMenus: openMenus,
+        hoveredMenu: hoveredMenu,
+        collapsed: collapsed,
+        navTheme: navTheme,
+        locationPathname: location.pathname,
+        routeParams: routeParams,
+        popupPosition: popupPosition,
+        onToggleMenu: toggleMenu,
+        onMenuHover: handleMenuHover,
+        onMenuLeave: handleMenuLeave,
+        ChevronUpIcon: ChevronUpIcon,
+        ChevronDownIcon: ChevronDownIcon
+      }, item.path))
+    })
+  });
+};
+// Export the memoized version to prevent unnecessary re-renders
+const MainSidebarMenu = React__default.memo(MainSidebarMenuComponent);export{MainSidebarMenu};//# sourceMappingURL=MainSidebarMenu.js.map

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

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

package/lib/components/Layout/Sidebar/PerplexSidebar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SidebarProps } from '../../typings';
+export declare const PerplexSidebar: React.FC<SidebarProps>;
+export default PerplexSidebar;
+//# sourceMappingURL=PerplexSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PerplexSidebar.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/PerplexSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsTjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,277 @@
+import {jsxs,jsx}from'react/jsx-runtime';import React__default,{useEffect}from'react';import {useTranslation}from'react-i18next';import {getMenuSeparation}from'@admin-layout/client';import {Divider}from'./Divider.js';import {PerplexSidebarMenu}from'./PerplexSidebarMenu.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import'@common-stack/components-pro';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {SideMenuLogoSlot}from'../slot-fill/SideMenuLogo.js';import {BottomMenu}from'./BottomMenu.js';import {icons}from'../../../icons.js';import {MainSidebarMenu}from'./MainSidebarMenu.js';const PerplexSidebar = props => {
+  const {
+    isSideMenuOpen,
+    closeSideMenu,
+    menuData,
+    collapsed,
+    routeParams,
+    settings,
+    location,
+    siderPinned,
+    setSiderPinned,
+    layoutSettings,
+    deviceSettings,
+    actor,
+    sideBarMarginTop,
+    showHeader,
+    menuHeaderRender,
+    isSideMenuLayout,
+    authorities,
+    picture
+  } = props;
+  const [iconModule, setIconModule] = React__default.useState(null);
+  const {
+    t,
+    i18n
+  } = useTranslation('menu');
+  const {
+    isMobile
+  } = useMediaQuery();
+  const currentRoute = location?.pathname || '/';
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  const {
+    ChevronLeftIcon,
+    ChevronRightIcon
+  } = icons;
+  // 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);
+      });
+    }
+  }, []);
+  // 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 {
+    middleMenus,
+    lowerMenus,
+    bottomMenus
+  } = getMenuSeparation(menuData || []);
+  const updateMenuIcons = (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;
+    });
+  };
+  ({
+    menuData: updateMenuIcons(bottomMenus)
+  });
+  // 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-[82vh]';
+    }
+    if (!showHeader) {
+      classes += ' md:h-[84vh]';
+    }
+    if (!showHeader && !menuHeaderRender) {
+      classes += ' md:h-[91vh]';
+    }
+    return classes;
+  };
+  const SidebarStyles = React__default.useMemo(() => ({
+    backgroundColor: settings?.navTheme === 'realDark' ? '#222' : '',
+    color: settings?.navTheme === 'realDark' ? '#fff !important' : ''
+  }), [settings]);
+  // Helper function to render a separator with a name
+  const renderSeparator = name => {
+    if (!deviceLayout?.splitMenus) return null;
+    return collapsed ? jsx("hr", {
+      className: "border-t border-border"
+    }) : jsx(Divider, {
+      className: "text-muted-foreground border-border my-2 p-0",
+      plain: true,
+      children: name
+    });
+  };
+  const renderSidebarContent = () => {
+    return jsxs("div", {
+      className: getSidebarClasses(),
+      style: SidebarStyles,
+      children: [jsx("div", {
+        className: "relative"
+      }), jsxs("div", {
+        className: "flex-grow overflow-y-auto",
+        children: [middleMenus?.length > 0 && jsxs("div", {
+          className: "removeBoxShadow",
+          children: [renderSeparator(deviceLayout?.middleMenuDividerName), jsx(PerplexSidebarMenu, {
+            menuData: updateMenuIcons(middleMenus),
+            routeParams: routeParams,
+            settings: settings,
+            collapsed: collapsed,
+            siderPinned: siderPinned,
+            setSiderPinned: setSiderPinned,
+            actor: actor,
+            deviceSettings: deviceSettings
+          })]
+        }), lowerMenus?.length > 0 && jsxs("div", {
+          className: "removeBoxShadow",
+          children: [renderSeparator(deviceLayout?.lowerMenuDividerName), jsx(PerplexSidebarMenu, {
+            menuData: updateMenuIcons(lowerMenus),
+            routeParams: routeParams,
+            settings: settings,
+            collapsed: collapsed,
+            siderPinned: siderPinned,
+            setSiderPinned: setSiderPinned,
+            actor: actor,
+            deviceSettings: deviceSettings
+          })]
+        })]
+      })]
+    });
+  };
+  const renderMobileSidebarContent = () => {
+    return jsxs("div", {
+      className: getSidebarClasses(),
+      style: SidebarStyles,
+      children: [jsx("div", {
+        className: "relative",
+        children: jsx("button", {
+          onClick: closeSideMenu,
+          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',
+          children: collapsed ? jsx(ChevronRightIcon, {
+            fontSize: '11px'
+          }) : jsx(ChevronLeftIcon, {
+            fontSize: '11px'
+          })
+        })
+      }), jsx("div", {
+        className: "flex-grow overflow-y-auto",
+        children: jsxs("div", {
+          children: [middleMenus?.length > 0 && jsxs("div", {
+            className: "removeBoxShadow",
+            children: [renderSeparator(deviceLayout?.middleMenuDividerName), jsx(MainSidebarMenu, {
+              menuData: updateMenuIcons(middleMenus),
+              routeParams: routeParams,
+              settings: settings,
+              collapsed: collapsed
+            })]
+          }), lowerMenus?.length > 0 && jsxs("div", {
+            className: "removeBoxShadow",
+            children: [renderSeparator(deviceLayout?.lowerMenuDividerName), jsx(MainSidebarMenu, {
+              menuData: updateMenuIcons(lowerMenus),
+              routeParams: routeParams,
+              settings: settings,
+              collapsed: collapsed
+            })]
+          })]
+        })
+      })]
+    });
+  };
+  return jsxs("div", {
+    children: [!isMobile && jsxs("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 w-[92px]`,
+      children: [menuHeaderRender && isSideMenuLayout && jsx("div", {
+        className: "border-b border-border py-1 flex items-center justify-center",
+        children: jsx(SideMenuLogoSlot, {
+          settings: settings,
+          location: location
+        })
+      }), jsx("div", {
+        children: renderSidebarContent()
+      }), jsx("div", {
+        className: "flex-shrink-0 p-4 border-t border-border",
+        children: jsx(BottomMenu, {
+          match: null,
+          menuData: menuData,
+          settings: settings,
+          routeParams: routeParams,
+          getMenuSeparation: getMenuSeparation,
+          scrolled: undefined,
+          authorities: authorities,
+          picture: picture
+        })
+      })]
+    }), isSideMenuOpen && isMobile && jsx("div", {
+      className: "fixed mt-16 inset-0 z-40 bg-black bg-opacity-50 transition-opacity duration-300 ease-in-out",
+      onClick: closeSideMenu
+    }), jsx("aside", {
+      id: "mobile-sidebar",
+      className: `fixed mt-16 top-0 left-0 z-50 h-full w-[280px] bg-white dark:bg-gray-900 shadow-xl transform transition-transform duration-300 ease-in-out md:hidden ${isSideMenuOpen ? 'translate-x-0' : '-translate-x-full'}`,
+      children: jsxs("div", {
+        className: "flex flex-col h-[calc(100vh-64px)]",
+        children: [jsx("div", {
+          className: "flex-1 overflow-y-auto py-2 px-4",
+          children: jsx("div", {
+            className: "space-y-1",
+            children: renderMobileSidebarContent()
+          })
+        }), jsx("div", {
+          className: "flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800",
+          children: jsx(BottomMenu, {
+            match: null,
+            menuData: menuData,
+            settings: settings,
+            routeParams: routeParams,
+            getMenuSeparation: getMenuSeparation,
+            scrolled: undefined,
+            authorities: authorities,
+            picture: picture,
+            isMobile: isMobile
+          })
+        })]
+      })
+    })]
+  });
+};export{PerplexSidebar,PerplexSidebar as default};//# sourceMappingURL=PerplexSidebar.js.map

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

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

package/lib/components/Layout/Sidebar/PerplexSidebarMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SidebarMenuProps } from '../../typings';
+export declare const PerplexSidebarMenu: React.FC<SidebarMenuProps>;
+//# sourceMappingURL=PerplexSidebarMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PerplexSidebarMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/Sidebar/PerplexSidebarMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgazD,CAAC"}