@admin-layout/tailwind-design-pro 12.0.16-alpha.9 → 12.0.16-alpha.90

package/lib/cdm-locales/en/menu.json

@@ -110,6 +110,7 @@
         "dict": "Dict",
         "config": "Config",
         "system_log": "System Log",
-        "login_info": "Login Info"
+        "login_info": "Login Info",
+        "tenant_management": "Tenant Management"
     }
 }

package/lib/cdm-locales/es/menu.json

@@ -110,6 +110,7 @@
         "dict": "Diccionario",
         "config": "Configuración",
         "system_log": "Registro del Sistema",
-        "login_info": "Información de Inicio de Sesión"
+        "login_info": "Información de Inicio de Sesión",
+        "tenant_management": "Gestión de Inquilinos"
     }
 }

package/lib/cdm-locales/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@admin-layout/client/src/graphql/link';
+//# sourceMappingURL=index.d.ts.map

package/lib/cdm-locales/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cdm-locales/index.ts"],"names":[],"mappings":"AAAA,cAAc,uCAAuC,CAAC"}

package/lib/cdm-locales/index.ts

@@ -0,0 +1 @@
+export * from '@admin-layout/client/src/graphql/link';

package/lib/components/LanguageMenu/LanguageMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY,+CAyFxB,CAAC"}
+{"version":3,"file":"LanguageMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,YAAY,+CAiFxB,CAAC"}

package/lib/components/LanguageMenu/LanguageMenu.js

@@ -1,16 +1,19 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {useTranslation}from'react-i18next';import {useMediaQuery}from'react-responsive';import {useAppDispatch,languages,CHANGE_LANGUAGE}from'@admin-layout/client';import {Globe}from'lucide-react';import config from'@app/cde-webconfig.json';const LanguageMenu = () => {
-  const isMobile = useMediaQuery({
-    maxWidth: 767
-  });
-  const [locale, setLocale] = useState('en');
-  const dispatch = useAppDispatch();
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'react';import {useTranslation}from'react-i18next';import {useMediaQuery}from'react-responsive';import {languages,useLayoutSettings}from'@admin-layout/client';import {Globe}from'lucide-react';import config from'@app/cde-webconfig.json';const LanguageMenu = () => {
   const {
     i18n
   } = useTranslation();
   const {
     i18n: i18nextInstance
   } = config;
-  const [currentLang, setCurrentLang] = useState({
+  const filteredLanguages = languages.filter(language => i18nextInstance.supportedLngs.includes(language.key));
+  const isMobile = useMediaQuery({
+    maxWidth: 767
+  });
+  const {
+    settings,
+    setSettings
+  } = useLayoutSettings();
+  const [currentLang, setCurrentLang] = useState(filteredLanguages.find(language => language.key === settings.language) || {
     key: 'en',
     label: 'English',
     flag: '🇬🇧',
@@ -18,13 +21,9 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
   });
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
-  const filteredLanguages = languages.filter(language => i18nextInstance.supportedLngs.includes(language.key));
   useEffect(() => {
-    dispatch({
-      type: CHANGE_LANGUAGE,
-      payload: locale
-    });
-  }, [locale, dispatch]);
+    i18n.changeLanguage(settings.language);
+  }, []);
   useEffect(() => {
     const handleClickOutside = event => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -37,15 +36,12 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useRef,useEffect}from'
     };
   }, []);
   const handleLanguageChange = language => {
-    setCurrentLang({
-      key: language.key,
-      label: language.label,
-      flag: language.flag,
-      global: language.global
-    });
+    setCurrentLang(language);
     i18n.changeLanguage(language.key);
-    setLocale(language.key);
     setIsOpen(false);
+    setSettings(settings, {
+      language: language.key
+    });
   };
   const toggleDropdown = () => {
     setIsOpen(!isOpen);

package/lib/components/LanguageMenu/LanguageMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageMenu.js","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":"wUAQO,MAAM,YAAY,GAAG,MAAK;QACvB,QAAA,GAAW,aAAA,CAAA;IACjB,QAAa,EAAA;AACb,GAAA,CAAA;AACA,EAAA,MAAA,CAAA,MAAY,EAAA,SAAK,CAAA,GAAA,QAAiB,CAAA,IAAA,CAAA;AAClC,EAAA,MAAA,QAAY,iBAAiB,EAAE;AAC/B,EAAA,MAAA;AACI,IAAA;AACA,GAAA,GAAA,cAAgB,EAAA;AAChB,EAAA,MAAA;AACA,IAAA,IAAA,EAAA;AACH,GAAA,GAAC,MAAC;QACG,CAAA,WAAkB,EAAA,cAAY,CAAA,GAAA,QAAQ,CAAA;AAC5C,IAAA,GAAA,EAAA;IAEA,KAAM,EAAA,SAAA;IAEN,IAAS,EAAA;AACL,IAAA,MAAA,EAAA;AACI,GAAA,CAAA;AACA,EAAA,MAAA,CAAA,MAAA,EAAA,SAAe,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAClB,EAAA,MAAA,WAAE,GAAA,MAAA,CAAA,IAAA,CAAA;AACP,EAAA,MAAI,iBAAiB,GAAE,SAAA,CAAA,MAAA,CAAA,QAAA,IAAA,eAAA,CAAA,aAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA;WAEd,CAAA,MAAM;AACX,IAAA,QAAA,CAAA;AACI,MAAA,IAAA,EAAA,eAAe;;;AAGnB,GAAA,EAAA,CAAA,MAAE,EAAA,QAAA,CAAA,CAAA;AAEF,EAAA,SAAA,CAAA,MAAyB;AACzB,IAAA,MAAA,kBAAY,GAAA,KAAA,IAAA;AACR,MAAA,IAAA,WAAS,CAAmB,OAAA,IAAA,CAAA,mBAAc,CAAA,QAAA,CAAA,KAAA,CAAA,MAAoB,CAAA,EAAA;AAClE,QAAA,SAAE,CAAA,KAAA,CAAA;;AAGN,KAAA;AACI,IAAA,QAAA,CAAA,gBAAe,CAAA,WAAA,EAAA,kBAAA,CAAA;iBACN;cACA,CAAA,mBAAgB,CAAA,WAAA,EAAA,kBAAA,CAAA;;;AAGxB,EAAA,MAAA,oBAAE,GAAA,QAAA,IAAA;AACH,IAAA,cAAmB,CAAA;AACnB,MAAA,GAAA,EAAA,QAAU,CAAA,GAAA;WACD,EAAA,QAAM,CAAA,KAAE;AACrB,MAAE,IAAA,EAAA,QAAA,CAAA,IAAA;MAEI,MAAA,EAAA,QAAA,CAAA;AACF,KAAA,CAAA;AACJ,IAAA,IAAE,CAAA,cAAA,CAAA,QAAA,CAAA,GAAA,CAAA;AAEF,IAAA,SACS,CAAA,QAAA,CAAA,GAAA,CAAA;AAmCb,IAAE,SAAA,CAAA,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LanguageMenu.js","sources":["../../../src/components/LanguageMenu/LanguageMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":"2TAQO,MAAM,YAAY,GAAG,MAAK;AAC7B,EAAA,MAAA;AACA,IAAA;MACA,cAAM,EAAA;QACN;IACA,IAAA,EAAM;MACN,MAAO;AAEC,EAAA,MAAA,iBAAS,GAAA,SAAA,CAAA,MAAA,CAAA,QAAA,IAAA,eAAA,CAAA,aAAA,CAAA,QAAA,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA;AACT,EAAA,MAAA,QAAO,GAAA,aAAS,CAAA;AAChB,IAAA,QAAI,EAAE;AACN,GAAA,CAAA;AACH,EAAA,MACH;IACF,QAAO;AACP,IAAA;MAEA,iBAAe,EAAA;AACX,EAAA,MAAA,CAAA,WAAK,EAAA,cAAuB,CAAC,GAAA,QAAU,CAAA,iBAAA,CAAA,IAAA,CAAA,QAAA,IAAA,QAAA,CAAA,GAAA,KAAA,QAAA,CAAA,QAAA,CAAA,IAAA;IAC3C,GAAG,EAAE,IAAE;IAEP,KAAA,EAAA,SAAe;AACX,IAAA,IAAA,EAAA,MAAM;AACF,IAAA,MAAA,EAAA;;eAEC,EAAA,SAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACL,EAAA,MAAA,WAAE,GAAA,MAAA,CAAA,IAAA,CAAA;AAEF,EAAA,SAAA,CAAA,MAAS;AACT,IAAA,IAAA,CAAA,cAAY,CAAA,QAAA,CAAA,QAAA,CAAA;AACR,EAAA,CAAA,EAAA,EAAA,CAAA;AACJ,EAAA,SAAE,CAAA,MAAA;IACN,MAAM,kBAAC,GAAA,KAAA,IAAA;AAEP,MAAA,IAAM,WAAA,CAAA,OAAA,IAAuB,CAAC,WAAU,CAAE,OAAA,CAAA,QAAA,CAAA,KAAA,CAAA,MAAA,CAAA,EAAA;QACtC,SAAA,CAAA,KAAe,CAAA;AACf,MAAA;;YAEA,CAAA,gBAAoB,CAAE,WAAU,EAAE,kBAAgB,CAAA;AACtD,IAAA,OAAE,MAAA;MAEF,QAAM,CAAA,mBAAsB,CAAA,WAAA,EAAA,kBAAA,CAAA;AACxB,IAAA,CAAA;AACJ,EAAA,CAAA,EAAC,EAAC,CAAA;AAEF,EAAA,MAAA,oBACS,GAAA,QAAU,IAAA;AAmCvB,IAAE,cAAA,CAAA,QAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/BasicLayout/index.d.ts

@@ -1,12 +1,13 @@
-import React from 'react';
 import { BasicLayoutProps, GlobalHeaderProps } from '@admin-layout/client';
-export declare const useHorizontalScroll: ({ setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
+import React from 'react';
+export declare function useHorizontalScroll({ setScrolled, setSearchOptionsShown, onScrollReachEnd }: {
     setScrolled: any;
     setSearchOptionsShown: any;
     onScrollReachEnd: any;
-}) => React.MutableRefObject<undefined>;
-export declare const BasicLayout: React.FC<BasicLayoutProps & GlobalHeaderProps & {
+}): React.MutableRefObject<undefined>;
+export declare function BasicLayout(props: BasicLayoutProps & GlobalHeaderProps & {
     routeParams?: any;
     children?: React.ReactNode;
-}>;
+    routePattern?: string;
+}): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Layout/BasicLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAIpB,MAAM,sBAAsB,CAAC;AAS9B,eAAO,MAAM,mBAAmB,GAAI;;;;CAAwD,sCAkC3F,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAgR3F,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAIhB,iBAAiB,EAEpB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,KAA4D,MAAM,OAAO,CAAC;AAcjF,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,qBAAqB,EAAE,gBAAgB,EAAE;;;;CAAA,qCA+B3F;AAwCD,wBAAgB,WAAW,CACvB,KAAK,EAAE,gBAAgB,GACnB,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,2CAkXnG"}

package/lib/components/Layout/BasicLayout/index.js

@@ -1,8 +1,9 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useEffect,useRef}from'react';import warning from'warning';import {omit}from'lodash-es';import {Outlet}from'@remix-run/react';import {Sidebar}from'../Sidebar/Sidebar.js';import {GlobalHeader}from'../GlobalHeader/Header.js';import {SettingDrawer}from'../../SettingDrawer/SettingDrawer.js';import {defaultSettings,useComponentSize,getMenuSeparation,getThemeColors}from'@admin-layout/client';import isBrowser from'../../../utils/isBrowser/index.js';import {getPageTitleInfo}from'../getPageTitle.js';import {MainHeader}from'../GlobalHeader/MainHeader.js';import'../GlobalHeader/Logo.js';import'react-router';import'../../../helpers/DynamicIcon.js';import'@app/dialog/WrappedDialogsSwitch';import'@common-stack/components-pro';import {FooterSlot}from'../slot-fill/Footer.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';import {config}from'../../../config/env-config.js';import {useScrollThreshold}from'../../../hooks/useScrollThreshold.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';const useHorizontalScroll = ({
+import {jsxs,jsx}from'react/jsx-runtime';import {getThemeColors,getMenuSeparation,useComponentSize}from'@admin-layout/client';import {Outlet}from'@remix-run/react';import {omit}from'lodash-es';import {useRef,useState,useMemo,useEffect,useCallback}from'react';import warning from'warning';import {config}from'../../../config/env-config.js';import'@react-icons/all-files/fa/FaMoon.js';import'@react-icons/all-files/fa/FaSun.js';import {useMediaQuery}from'../../../hooks/useMediaQuery.js';import {useScrollThreshold}from'../../../hooks/useScrollThreshold.js';import {SettingDrawer}from'../../SettingDrawer/SettingDrawer.js';import {getPageTitleInfo}from'../getPageTitle.js';import {MainHeader}from'../GlobalHeader/MainHeader.js';import'@remix-run/router';import'../../../helpers/DynamicIcon.js';import'@app/dialog/WrappedDialogsSwitch';import {GlobalHeader}from'../GlobalHeader/Header.js';import {MainSidebar}from'../Sidebar/MainSidebar.js';import {PerplexSidebar}from'../Sidebar/PerplexSidebar.js';import'@common-stack/components-pro';import {FooterSlot}from'../slot-fill/Footer.js';import'reflect-metadata';import'@admin-layout/client/lib/constants/layout.js';//helper func
+function useHorizontalScroll({
   setScrolled,
   setSearchOptionsShown,
   onScrollReachEnd
-}) => {
+}) {
   const elRef = useRef();
   useEffect(() => {
     const el = elRef.current || null;
@@ -10,9 +11,6 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useEffect,useRef}from'
       const onWheel = e => {
         if (e.deltaY == 0) return;
         e.preventDefault();
-        // if (!isMobileView) {
-        //     setSearchOptionsShown(false);
-        // }
         if (window.scrollY > 50) {
           setScrolled(true);
         }
@@ -30,8 +28,8 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState,useEffect,useRef}from'
     }
   }, []);
   return elRef;
-};
-const defaultPageTitleRender = (pageProps, props) => {
+}
+function defaultPageTitleRender(pageProps, props) {
   const {
     pageTitleRender
   } = props;
@@ -54,111 +52,165 @@ const defaultPageTitleRender = (pageProps, props) => {
     warning(typeof title === 'string', 'pro-layout: renderPageTitle return value should be a string');
   }
   return pageTitleInfo;
-};
-const BasicLayout = props => {
-  const propsWithSettings = {
-    ...defaultSettings,
-    ...props
-  };
-  const [scrolled, setScrolled] = useState(false);
-  const [collapsed, setCollapsed] = useState(false);
+}
+function getUILayoutValueFromSettings(settingsObj, routeForBracket, device, path) {
+  const routeDeviceKey = `[${routeForBracket}][${device}]`;
+  const uiOverride = settingsObj?.uiSettings?.[routeDeviceKey];
+  if (uiOverride) {
+    const value = path.split('.').reduce((obj, key) => obj?.[key], uiOverride);
+    if (value !== undefined) return value;
+  }
+  return path.split('.').reduce((obj, key) => obj?.[key], settingsObj);
+}
+function BasicLayout(props) {
+  // Destructure props
   const {
+    children,
+    onCollapse: propsOnCollapse,
+    defaultCollapsed,
     menuData,
+    fullMenuData,
+    siderWidth = 208,
+    menu,
+    menuDataRender,
+    loading,
     location,
     routeParams,
     settings,
     authorities,
     primaryColor,
-    onSettingChange,
     mainHeaderProps,
-    actor
-  } = propsWithSettings;
+    actor,
+    routePattern
+  } = props;
+  // Refs
+  useRef(settings);
+  // Hooks
+  const {
+    isMobile
+  } = useMediaQuery();
+  // State
+  const [scrolled, setScrolled] = useState(false);
+  const [collapsed, setCollapsed] = useState(false);
+  const [siderPinned, setSiderPinned] = useState(false);
   const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
   const [scrollEnd, setScrollEnd] = useState(false);
   const [searchOptionsShown, setSearchOptionsShown] = useState(false);
+  const [footerFixed, setFooterFixed] = useState(false);
+  // Computed values
+  const currentRoute = location?.pathname || '/';
+  const deviceType = isMobile ? 'mobile' : 'desktop';
+  const routeForBracket = routePattern || currentRoute;
   const {
     picture
   } = mainHeaderProps;
   const {
     LAYOUT_ROOT
   } = config;
-  const {
-    isMobile
-  } = useMediaQuery();
-  // Effect to disable scrolling when search modal is open in mobile view
+  const deviceSettings = useMemo(() => ({
+    header: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'header'),
+    background: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'background'),
+    footer: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'footer')
+  }), [settings, routeForBracket, deviceType]);
+  const layoutSettings = useMemo(() => ({
+    contentWidth: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'contentWidth'),
+    navigationMode: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'navigationMode'),
+    sideMenuType: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'sideMenuType'),
+    fixedHeader: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'fixedHeader'),
+    fixedSidebar: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'fixedSidebar'),
+    splitMenus: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'splitMenus'),
+    upperMenuDividerName: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'upperMenuDividerName'),
+    middleMenuDividerName: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'middleMenuDividerName'),
+    lowerMenuDividerName: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'lowerMenuDividerName'),
+    menuHeaderRender: getUILayoutValueFromSettings(settings, routeForBracket, deviceType, 'menuHeaderRender')
+  }), [settings, routeForBracket, deviceType]);
+  const backgroundSettings = useMemo(() => {
+    return deviceSettings?.background || {
+      type: 'color',
+      color: 'inherit',
+      image: '',
+      video: ''
+    };
+  }, [deviceSettings]);
+  const themeColors = useMemo(() => getThemeColors(settings?.theme), [settings?.theme]);
+  const backgroundClasses = useMemo(() => {
+    let classes = 'flex flex-col h-screen bg-background font-sans relative';
+    if (backgroundSettings.type === 'image' && backgroundSettings.image) {
+      classes += ' bg-cover bg-center bg-fixed';
+    }
+    return classes;
+  }, [backgroundSettings]);
+  const backgroundStyle = useMemo(() => {
+    if (backgroundSettings.type === 'image' && backgroundSettings.image) {
+      return {
+        backgroundImage: `url(${backgroundSettings.image})`
+      };
+    }
+    if (backgroundSettings.type === 'color' && backgroundSettings.color !== 'inherit') {
+      return {
+        backgroundColor: backgroundSettings.color
+      };
+    }
+    return {};
+  }, [backgroundSettings]);
+  const headerUpperMenus = useMemo(() => getMenuSeparation(menuData).upperMenus, [menuData]);
+  const footerActive = useMemo(() => getOverrideValue('footer.showFooter'), [deviceSettings]);
+  const memoizedMenuData = useMemo(() => menuData, [menuData]);
+  const memoizedRouteParams = useMemo(() => routeParams, [routeParams]);
+  // Derived layout flags
+  const isSidebarLayout = layoutSettings?.navigationMode !== 'topbar';
+  layoutSettings?.navigationMode === 'topbar';
+  const isSideMenuLayout = layoutSettings?.navigationMode === 'sidebar';
+  layoutSettings?.navigationMode === 'mixed';
+  const showMenu = deviceSettings?.header?.showMenu;
+  const showHeader = deviceSettings?.header?.showHeader;
+  const menuHeaderRender = deviceSettings?.header?.menuHeaderRender;
+  const hasFixedSidebar = layoutSettings?.fixedSidebar;
+  const isPerplexLayout = settings?.sideMenuType === 'perplexLayout';
+  const isAppShell = LAYOUT_ROOT != '/';
+  const shouldApplySidebarMargin = isSidebarLayout && showMenu && hasFixedSidebar && !isMobile;
+  const shouldShowSidebar = isSidebarLayout && showMenu;
+  const sideBarMarginTop = !isAppShell && showHeader ? '5rem' : undefined;
+  const computedMarginLeft = useMemo(() => {
+    return shouldApplySidebarMargin ? !isPerplexLayout ? collapsed ? '64px' : '256px' : !siderPinned ? '92px' : '316px' : '0px';
+  }, [shouldApplySidebarMargin, isPerplexLayout, collapsed, siderPinned]);
+  const defaultProps = omit({
+    ...props
+  }, ['layout']);
+  const pageTitleInfo = defaultPageTitleRender({
+    pathname: location?.pathname,
+    ...defaultProps
+  }, props);
+  const scrollThreshold = deviceSettings?.header?.scrollThreshold || 50;
+  // Effects
   useEffect(() => {
     if (searchOptionsShown && isMobile) {
-      // Save the current scroll position
       const scrollY = window.scrollY;
-      // Add the no-scroll class to the body
       document.body.style.position = 'fixed';
       document.body.style.top = `-${scrollY}px`;
       document.body.style.width = '100%';
       document.body.style.overflow = 'hidden';
       return () => {
-        // Remove the no-scroll class when component unmounts or modal closes
         document.body.style.position = '';
         document.body.style.top = '';
         document.body.style.width = '';
         document.body.style.overflow = '';
-        // Restore scroll position
         window.scrollTo(0, scrollY);
       };
     }
   }, [searchOptionsShown, isMobile]);
-  // Get current route settings with proper fallback
-  const currentRoute = location?.pathname || '/';
-  const routeSettings = settings?.routeSettings?.[currentRoute] || settings?.routeSettings?.['/'] || settings;
-  // Get device-specific settings
-  const deviceType = isMobile ? 'mobile' : 'desktop';
-  const deviceSettings = routeSettings?.regions?.[deviceType] || {};
-  const layoutSettings = routeSettings?.layout?.[deviceType] || {};
-  const backgroundSettings = deviceSettings?.background || {
-    type: 'color',
-    color: 'inherit',
-    image: ''};
-  const onScrollReachEnd = () => {
-    setScrollEnd(prevScrollEnd => !prevScrollEnd);
-  };
-  const horizontalScrollRef = useHorizontalScroll({
-    setScrolled,
-    setSearchOptionsShown,
-    onScrollReachEnd
-  });
-  const defaultProps = omit({
-    ...propsWithSettings
-  }, ['layout']);
-  const pageTitleInfo = defaultPageTitleRender({
-    pathname: location?.pathname,
-    ...defaultProps
-  }, propsWithSettings);
-  const settingRef = useRef(settings);
-  const scrollThreshold = deviceSettings?.header?.scrollThreshold || 50;
-  const {
-    componentVisibility
-  } = useScrollThreshold([{
-    threshold: scrollThreshold,
-    id: 'search-bar',
-    useWindowScroll: true
-  }]);
-  useEffect(() => {
-    if (settingRef.current?.primaryColor === '#3FA541C' && primaryColor !== '#3FA541C') {
-      const newState = {
-        ...settingRef.current,
-        primaryColor
-      };
-      onSettingChange(newState);
-    }
-  }, [primaryColor, isBrowser, settingRef]);
-  // Update settings when route changes
-  useEffect(() => {
+  const sendRouteChange = useCallback(() => {
     if (actor && location?.pathname) {
       actor.send({
-        type: 'ROUTE_CHANGE',
-        pathname: location?.pathname
+        type: 'UISETTING_ROUTE_CHANGE',
+        pathname: location?.pathname,
+        routePattern: props.routePattern
       });
     }
-  }, [location?.pathname, actor]);
+  }, [actor, location?.pathname, props.routePattern]);
+  useEffect(() => {
+    sendRouteChange();
+  }, [sendRouteChange]);
   const {
     ref: refHeader,
     height: heightHeader
@@ -171,84 +223,128 @@ const BasicLayout = props => {
     ref: refFooter,
     height: heightFooter
   } = useComponentSize();
-  const [footerFixed, setFooterFixed] = useState(false);
   useEffect(() => {
     if (heightHeader && heightBody && heightFooter) {
       if (heightBody < window.innerHeight - heightHeader - heightFooter) setFooterFixed(true);else setFooterFixed(false);
     }
   }, [heightHeader, heightBody, heightFooter]);
-  const toggleSideMenu = () => {
-    setIsSideMenuOpen(!isSideMenuOpen);
-  };
-  const closeSideMenu = () => {
+  const {
+    componentVisibility
+  } = useScrollThreshold([{
+    threshold: scrollThreshold,
+    id: 'search-bar',
+    useWindowScroll: true
+  }]);
+  const onScrollReachEnd = useCallback(() => {
+    setScrollEnd(prevScrollEnd => !prevScrollEnd);
+  }, []);
+  const horizontalScrollRef = useHorizontalScroll({
+    setScrolled,
+    setSearchOptionsShown,
+    onScrollReachEnd
+  });
+  // Helper functions
+  function getOverrideValue(path, deviceSettingsRef = deviceSettings) {
+    return path.split('.').reduce((obj, key) => obj?.[key], deviceSettingsRef);
+  }
+  const toggleSideMenu = useCallback(() => {
+    setIsSideMenuOpen(prev => !prev);
+  }, []);
+  const closeSideMenu = useCallback(() => {
     setIsSideMenuOpen(false);
-  };
-  // Use CSS classes instead of theme-based styling
-  const getBackgroundClasses = () => {
-    let classes = 'flex flex-col h-screen bg-background font-sans relative';
-    if (backgroundSettings.type === 'image' && backgroundSettings.image) {
-      classes += ' bg-cover bg-center bg-fixed';
+  }, []);
+  const handleSettingChange = useCallback(newSettings => {
+    if (actor) {
+      actor.send({
+        type: 'UISETTING_UPDATE',
+        value: newSettings
+      });
     }
-    return classes;
-  };
+  }, [actor]);
   return jsxs("div", {
-    className: getBackgroundClasses(),
+    className: backgroundClasses,
     ref: horizontalScrollRef,
-    style: backgroundSettings.type === 'image' && backgroundSettings.image ? {
-      backgroundImage: `url(${backgroundSettings.image})`
-    } : backgroundSettings.type === 'color' && backgroundSettings.color !== 'inherit' ? {
-      backgroundColor: backgroundSettings.color
-    } : {},
-    children: [deviceSettings?.header?.showHeader && LAYOUT_ROOT != '/' && jsx(GlobalHeader, {
+    style: backgroundStyle,
+    children: [deviceSettings?.header?.showHeader && !isSideMenuLayout && LAYOUT_ROOT != '/' && jsx(GlobalHeader, {
       toggleSideMenu: toggleSideMenu,
       settings: settings,
-      upperMenus: getMenuSeparation(menuData).upperMenus,
-      routeParams: routeParams,
+      upperMenus: headerUpperMenus,
+      routeParams: memoizedRouteParams,
       collapsed: collapsed,
-      ...props
+      location: location
     }), LAYOUT_ROOT === '/' && deviceSettings?.header?.showHeader && jsx(MainHeader, {
       scrolled: scrolled,
       location: location,
-      menuData: menuData,
+      menuData: memoizedMenuData,
       settings: settings,
       pageTitleInfo: pageTitleInfo,
-      onSettingChange: onSettingChange,
       searchOptionsShown: searchOptionsShown,
       setSearchOptionsShown: setSearchOptionsShown,
       authorities: authorities,
       picture: picture,
-      componentVisibility: componentVisibility
+      componentVisibility: componentVisibility,
+      showMenu: showMenu,
+      toggleSideMenu: toggleSideMenu
     }), jsxs("div", {
       className: "bg-background",
-      children: [layoutSettings?.navigationMode !== 'topbar' && deviceSettings?.header?.showMenu && LAYOUT_ROOT != '/' && jsx(Sidebar, {
-        isSideMenuOpen: isSideMenuOpen,
-        closeSideMenu: closeSideMenu,
-        menuData: menuData,
-        collapsed: collapsed,
-        setCollapsed: setCollapsed,
-        routeParams: routeParams,
-        settings: settings
+      children: [shouldShowSidebar && !isPerplexLayout && jsx("div", {
+        style: sideBarMarginTop ? {
+          marginTop: sideBarMarginTop
+        } : undefined,
+        children: jsx(MainSidebar, {
+          isSideMenuOpen: isSideMenuOpen,
+          closeSideMenu: closeSideMenu,
+          menuData: memoizedMenuData,
+          collapsed: collapsed,
+          setCollapsed: setCollapsed,
+          routeParams: memoizedRouteParams,
+          settings: settings,
+          siderPinned: siderPinned,
+          setSiderPinned: setSiderPinned,
+          showHeader: showHeader,
+          menuHeaderRender: menuHeaderRender,
+          deviceSettings: deviceSettings,
+          isSideMenuLayout: isSideMenuLayout
+        })
+      }), shouldShowSidebar && isPerplexLayout && jsx("div", {
+        style: sideBarMarginTop ? {
+          marginTop: sideBarMarginTop
+        } : undefined,
+        children: jsx(PerplexSidebar, {
+          isSideMenuOpen: isSideMenuOpen,
+          closeSideMenu: closeSideMenu,
+          menuData: memoizedMenuData,
+          collapsed: collapsed,
+          setCollapsed: setCollapsed,
+          routeParams: memoizedRouteParams,
+          settings: settings,
+          layoutSettings: layoutSettings,
+          menuHeaderRender: menuHeaderRender,
+          deviceSettings: deviceSettings,
+          siderPinned: siderPinned,
+          setSiderPinned: setSiderPinned,
+          actor: actor,
+          sideBarMarginTop: sideBarMarginTop,
+          showHeader: showHeader,
+          isSideMenuLayout: isSideMenuLayout,
+          authorities: authorities,
+          picture: picture
+        })
       }), jsxs("div", {
         className: "flex flex-col flex-1 bg-background",
         style: {
-          marginLeft: layoutSettings?.navigationMode !== 'topbar' && deviceSettings?.header?.showMenu && layoutSettings?.fixedSidebar && !isMobile && LAYOUT_ROOT != '/' ? collapsed ? '64px' : '256px' : '0px',
+          marginLeft: computedMarginLeft,
           padding: LAYOUT_ROOT != '/' ? '24px' : '0px'
         },
         children: [config.ENABLE_SETTING_DRAWER && jsx(SettingDrawer, {
           primaryColor: primaryColor,
           settings: settings,
-          onSettingChange: newSettings => {
-            if (actor) {
-              actor.send({
-                type: 'UPDATE',
-                value: newSettings
-              });
-            }
-            onSettingChange?.(newSettings);
-          },
+          onSettingChange: handleSettingChange,
           actor: actor,
-          colorList: getThemeColors(settings?.theme),
-          ...props
+          colorList: themeColors,
+          fullMenuData: fullMenuData,
+          location: location,
+          routePattern: props.routePattern
         }), jsxs("main", {
           className: "relative",
           children: [searchOptionsShown && deviceSettings?.header?.searchBarOverlay && jsx("div", {
@@ -258,15 +354,15 @@ const BasicLayout = props => {
               setSearchOptionsShown(false);
             }
           }), jsx(Outlet, {})]
-        }), deviceSettings?.footer?.showFooter && jsx("div", {
+        }), getOverrideValue('footer.showFooter') && jsx("div", {
           ref: refFooter,
           className: footerFixed ? 'fixed bottom-0 w-full' : '',
           children: jsx(FooterSlot, {
             settings: settings,
-            active: deviceSettings?.footer?.showFooter
+            active: footerActive
           })
         })]
       })]
     })]
   });
-};export{BasicLayout,useHorizontalScroll};//# sourceMappingURL=index.js.map
+}export{BasicLayout,useHorizontalScroll};//# sourceMappingURL=index.js.map