Implement menu state as provider

Author: bjorger

packages/bootstrap-shell/cra-template-bs/template/src/config/config.js

@@ -34,10 +34,6 @@ const config = {
   },
   menu: {
     width: 240,
-    offlineIndicatorHeight: 12,
-    initialAuthMenuOpen: false,
-    initialMiniMode: false,
-    initialMenuOpen: true,
     initialMobileMenuOpen: false,
     initialMiniSwitchVisibility: true,
     MenuRight: lazy(() => import('../components/Menu/MenuRight')),

packages/bootstrap-shell/cra-template-bs/template/src/pages/Home/Home.js

@@ -2,10 +2,8 @@ import React from 'react'
 import Page from 'bootstrap-shell/lib/containers/Page/Page'
 
 export default function Home() {
-  console.log('Home')
+
   return (
-    <Page>
-      <div>Hallo</div>
-    </Page>
+    <div>Hallo</div>
   )
 }

packages/bootstrap-shell/src/components/Menu/Menu.js

@@ -1,21 +1,20 @@
 import React from 'react'
 import { useConfig } from 'base-shell/lib/providers/Config'
 import * as BS from 'react-bootstrap'
-//import RMWLogo from "../../assets/rmw.svg";
+import RMWLogo from "../../assets/rmw.svg";
 import { useMenu } from 'bootstrap-shell/lib/providers/Menu'
-//import { GiHamburgerMenu } from 'react-icons/gi'
+import { SET_IS_MOBILE_MENU_OPEN } from "bootstrap-shell/lib/providers/Menu/store/types";
+import { GiHamburgerMenu } from 'react-icons/gi'
 
 const Menu = ({ brand }) => {
   const { appConfig } = useConfig()
   const { routes } = appConfig || {}
   const { menu } = appConfig || {}
   const { globalBrand, MenuRight } = menu || {}
-  const menuContext = useMenu()
+  const menuContext = useMenu();
+  const { DISPATCH_ACTION, isMobileMenuOpen } = menuContext;
 
-  console.log('menucontext', menuContext)
-
-  // Replace with Provider
-  const [toggleMenu, setToggleMenu] = React.useState(false)
+  console.log(isMobileMenuOpen)
 
   const _brand = brand ? brand : globalBrand
 
@@ -26,7 +25,7 @@ const Menu = ({ brand }) => {
           <BS.Col>
             <BS.Navbar>
               <BS.Navbar.Brand href="#home" className="text-white">
-                {/*_brand ? _brand : <img src={RMWLogo} alt="RMW Logo" width="40px" />*/}
+                {brand ? _brand : <img src={RMWLogo} alt="RMW Logo" width="40px" />}
               </BS.Navbar.Brand>
               <BS.Navbar.Toggle aria-controls="basic-navbar-nav" />
               <BS.Navbar.Collapse>
@@ -54,10 +53,10 @@ const Menu = ({ brand }) => {
             </BS.Navbar>
             {/*Mobile Menu*/}
             <BS.Navbar className="d-sm-flex d-md-none d-lg-none justify-content-end">
-              {/*<GiHamburgerMenu
+              <GiHamburgerMenu
                 className="text-white d-sm-block d-md-none d-lg-none"
-                onClick={() => setToggleMenu(!toggleMenu)}
-              />*/}
+                onClick={() => DISPATCH_ACTION(SET_IS_MOBILE_MENU_OPEN)}
+              />
             </BS.Navbar>
           </BS.Col>
         </BS.Container>
@@ -66,7 +65,7 @@ const Menu = ({ brand }) => {
       <BS.Col
         className="top-0 float-right bg-dark p-2 overflow-hidden"
         style={{
-          maxHeight: toggleMenu ? 1000 : 0,
+          maxHeight: isMobileMenuOpen ? 1000 : 0,
           transition: 'max-height 2s linear',
         }}
       >

packages/bootstrap-shell/src/containers/LayoutContainer/LayoutContainer.js

@@ -10,6 +10,7 @@ const LayoutContent = ({ children }) => {
     <div
       style={{
         display: 'flex',
+        flexDirection: 'column'
       }}
     >
       {children}

packages/bootstrap-shell/src/providers/Menu/Provider.js

@@ -8,24 +8,25 @@ import reducer from './store/reducer';
 import { SET_IS_MOBILE_MENU_OPEN } from './store/types';
 
 const Provider = ({ appConfig, children, persistKey = 'menu' }) => {
-  console.log("Provider");
   const { menu } = appConfig || {};
   const { initialMobileMenuOpen } = menu;
   const savedState = JSON.parse(localStorage.getItem(persistKey))
   const [menuStore, dispatch] = useReducer(reducer, {
     isMobileMenuOpen: initialMobileMenuOpen,
     ...savedState,
-  })
+  });
 
   const props = {
     DISPATCH_ACTION(value, newValue = null) {
       if (value === SET_IS_MOBILE_MENU_OPEN) {
-        dispatch(setIsMobileMenuOpen(newValue !== null ? newValue : !menuStore.isMobileMenuOpen));
+        console.log("provider", !menuStore.isMobileMenuOpen)
+        dispatch(setIsMobileMenuOpen(!menuStore.isMobileMenuOpen));
+        console.log("menustore", menuStore)
       }
     },
 
     // getters
-    isMobileMenuOpen: menuStore.setIsMobileMenuOpen,
+    isMobileMenuOpen: menuStore.isMobileMenuOpen,
   }
 
   useEffect(() => {

packages/bootstrap-shell/src/providers/Menu/store/reducer.js

@@ -4,7 +4,7 @@ export default function reducer(state = {}, action) {
   const { type, payload } = action
   switch (type) {
     case types.SET_IS_MOBILE_MENU_OPEN:
-      return { ...state, isAuthMenuOpen: payload }
+      return { ...state, isMobileMenuOpen: payload }
     default:
       return state
   }