@nethru/ui 2.1.7 → 2.1.8

package/base/frame/AppBar.js

@@ -14,6 +14,7 @@ const AppBar = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const {
+    sections,
     states
   } = useSidebarContext();
   const styles = useMemo(() => ({
@@ -46,9 +47,12 @@ const AppBar = /*#__PURE__*/forwardRef(({
           children: [children, !children && /*#__PURE__*/_jsx(Box, {}), avatarSlot]
         })]
       })
-    }), /*#__PURE__*/_jsx(Box, {
+    }), !isEmpty(sections) && /*#__PURE__*/_jsx(Box, {
       sx: styles
     })]
   });
 });
-export default AppBar;
+export default AppBar;
+function isEmpty(list) {
+  return list && list.length === 0;
+}

package/base/frame/Frame.js

@@ -21,7 +21,10 @@ const Frame = /*#__PURE__*/forwardRef(({
     flexGrow: 1,
     overflow: 'auto',
     height: '100%',
-    backgroundColor: blueGrey.contentBg
+    backgroundColor: blueGrey.contentBg,
+    borderRadius: '8px 0px 0px 0px',
+    zIndex: `var(--contents-zindex)`,
+    boxShadow: '-10px 1px 8px -10px #65656533, 0px -10px 8px -10px #65656533'
   }), []);
   return /*#__PURE__*/_jsx(Box, {
     ref: ref,

package/base/frame/sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Stack } from "@mui/material";
 import { useSidebarContext } from "./SidebarContext";
@@ -7,11 +7,13 @@ import SecondaryMenu from "./SecondaryMenu";
 import MenuToggler from "./MenuToggler";
 import styles from './css/sidebar.module.css';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Sidebar = /*#__PURE__*/forwardRef((props, ref) => {
-  const [sections, setSections] = useState();
   const {
     menu,
+    sections,
+    setSections,
     states,
     dispatch
   } = useSidebarContext();
@@ -43,17 +45,19 @@ const Sidebar = /*#__PURE__*/forwardRef((props, ref) => {
   }, [states]);
   return /*#__PURE__*/_jsxs(Stack, {
     ref: ref,
-    className: `${styles.container} ${closed || isEmpty(sections) ? styles.closed : styles.opened}`,
+    className: `${styles.container} ${closed ? styles.closed : styles.opened} ${isEmpty(sections) && styles.none}`,
     children: [/*#__PURE__*/_jsx(PrimaryMenu, {
       items: menu,
       onClick: handleClick
-    }), /*#__PURE__*/_jsx(SecondaryMenu, {
-      sections: sections ? sections : [],
-      closed: !isEmpty(sections) ? closed : true,
-      onClick: handleClick
-    }), !isEmpty(sections) && /*#__PURE__*/_jsx(MenuToggler, {
-      closed: closed,
-      onClick: handleToggle
+    }), !isEmpty(sections) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(SecondaryMenu, {
+        sections: sections || [],
+        closed: !isEmpty(sections) ? closed : true,
+        onClick: handleClick
+      }), /*#__PURE__*/_jsx(MenuToggler, {
+        closed: closed,
+        onClick: handleToggle
+      })]
     })]
   });
 });

package/base/frame/sidebar/SidebarContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, useReducer } from "react";
+import { createContext, useContext, useReducer, useState } from "react";
 import { produce } from "immer";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SidebarContext = /*#__PURE__*/createContext();
@@ -8,9 +8,12 @@ export function SidebarContextProvider({
   children
 }) {
   const [states, dispatch] = useReducer(reducer, initialStates);
+  const [sections, setSections] = useState();
   return /*#__PURE__*/_jsx(SidebarContext.Provider, {
     value: {
       menu,
+      sections,
+      setSections,
       icons,
       states,
       dispatch

package/base/frame/sidebar/css/sidebar.module.css

@@ -13,6 +13,11 @@
     width: calc(var(--primary-menu-width) + var(--secondary-menu-collapsed-width));
     min-width: calc(var(--primary-menu-width) + var(--secondary-menu-collapsed-width));
 }
+.container.none {
+    width: calc(var(--primary-menu-width));
+    min-width: calc(var(--primary-menu-width));
+    z-index: var(--primary-menu-only-zindex);
+}
 
 
 .secondary {

package/base/styles/globalStyles.js

@@ -6,17 +6,19 @@ const globalStyles = {
     '--frame-background-color': blueGrey.frameBg,
     '--gnb-background-color': blueGrey.gnbBg,
     '--gnb-height': '64px',
-    '--gnb-zindex': 1101,
-    '--sidebar-zindex': 1100,
+    '--gnb-zindex': 1103,
+    '--sidebar-zindex': 1102,
+    '--primary-menu-only-zindex': 1100,
     '--primary-menu-width': '72px',
-    '--primary-menu-zindex': 1102,
+    '--primary-menu-zindex': 1104,
     '--secondary-menu-width': '180px',
     '--secondary-menu-collapsed-width': '30px',
-    '--secondary-menu-zindex': 1103,
-    '--secondary-menu-toggler-zindex': 1104,
-    '--aside-zindex': 1105,
-    '--aside-button-zindex': 1106,
-    '--divider-zindex': 1107
+    '--secondary-menu-zindex': 1105,
+    '--secondary-menu-toggler-zindex': 1106,
+    '--aside-zindex': 1107,
+    '--aside-button-zindex': 1108,
+    '--divider-zindex': 1109,
+    '--contents-zindex': 1101
   },
   'html, body, #root': {
     margin: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "main": "base/index.js",
   "files": [
     "/base"