RC-7: add navbar toggle for small viewports to layout 1

src/app/theme-layouts/layout1/Layout1.js

@@ -2,12 +2,14 @@ import FuseDialog from '@fuse/core/FuseDialog';
 import FuseMessage from '@fuse/core/FuseMessage';
 import FuseSuspense from '@fuse/core/FuseSuspense';
 import { styled } from '@mui/material/styles';
+import Hidden from '@mui/material/Hidden';
 import AppContext from 'src/app/contexts/AppContext';
 import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
 import { memo, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { useRoutes } from 'react-router-dom';
 import NavbarWrapperLayout1 from './components/NavbarWrapperLayout1';
+import NavbarToggleButton from '../shared-components/NavbarToggleButton';
 
 const Root = styled('div')(({ theme, config }) => ({
   ...(config.mode === 'boxed' && {
@@ -36,6 +38,10 @@ function Layout1(props) {
         {config.navbar.display && config.navbar.position === 'left' && <NavbarWrapperLayout1 />}
 
         <main id="fuse-main" className="flex flex-col flex-auto min-h-full min-w-0 relative z-10">
+          <Hidden lgUp>
+            <NavbarToggleButton className="w-40 h-40 p-0 mx-0 sm:mx-8" />
+          </Hidden>
+
           <div className="flex flex-col flex-auto min-h-0 relative z-10">
             <FuseDialog />