Update mui based layout ui

src/components/ResponsiveDrawer.tsx

@@ -1,17 +1,15 @@
-import { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import React, { FC, useCallback } from 'react';
+import React, { FC } from 'react';
 
 import browser from 'scripts/browser';
 
 export const DRAWER_WIDTH = 240;
 
 export interface ResponsiveDrawerProps {
-    hasSecondaryToolBar?: boolean
     open: boolean
     onClose: () => void
     onOpen: () => void
@@ -19,17 +17,11 @@ export interface ResponsiveDrawerProps {
 
 const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
     children,
-    hasSecondaryToolBar = false,
     open = false,
     onClose,
     onOpen
 }) => {
     const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('sm'));
-    const isLargeScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('lg'));
-
-    const getToolbarStyles = useCallback((theme: Theme) => ({
-        marginBottom: (hasSecondaryToolBar && !isLargeScreen) ? theme.spacing(6) : 0
-    }), [ hasSecondaryToolBar, isLargeScreen ]);
 
     return ( isSmallScreen ? (
         /* DESKTOP DRAWER */
@@ -42,14 +34,9 @@ const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
                     boxSizing: 'border-box'
                 }
             }}
-            variant='persistent'
+            variant='permanent'
             anchor='left'
-            open={open}
         >
-            <Toolbar
-                variant='dense'
-                sx={getToolbarStyles}
-            />
             {children}
         </Drawer>
     ) : (
@@ -65,10 +52,6 @@ const ResponsiveDrawer: FC<ResponsiveDrawerProps> = ({
                 keepMounted: true // Better open performance on mobile.
             }}
         >
-            <Toolbar
-                variant='dense'
-                sx={getToolbarStyles}
-            />
             <Box
                 role='presentation'
                 // Close the drawer when the content is clicked