chore: Make the main container dynamic based on the with of the menudrawer

src/components/AppHeader.jsx

@@ -1,64 +1,45 @@
-import { useState } from 'react';
-import { AppBar, Toolbar, Typography, IconButton, Box, Avatar } from '@mui/material';
-
-import MenuDrawer from './MenuDrawer';
-import MenuDrawerPrivate from './MenuDrawerPrivate';
 import { useAuth } from '../context/AuthContext';
-import { useNavigate } from 'react-router-dom';
+import { AppBar, Toolbar, Typography, IconButton, Box, Avatar, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { OPEN_WIDTH, MINI_WIDTH } from './MenuDrawerPrivate';
 
-export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
 
-  const bgColor = {
-    public: 'white',
-    restricted: 'white',
-    private: 'white',
-  };
-
-  const [drawerExpanded, setDrawerExpanded] = useState(true);
-  const [currentPage, setCurrentPage] = useState('Dashboard');
+export default function AppHeader({ drawerExpanded = true, currentPage = 'Dashboard' }) {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width:900px)');
   const { user } = useAuth();
 
-  const isPrivate = zone === 'private';
-  const isRestricted = zone === 'restricted';
-  const isPublic = zone === 'public';
 
-  const navigate = useNavigate();
-
-  const handleMenuSelect = (page) => {
-    setCurrentPage(page);
-    onSelectMenuItem?.(page);
-  };
+  const leftOffset = isMobile ? 0 : (drawerExpanded ? OPEN_WIDTH : MINI_WIDTH);
 
   return (
-    <AppBar position="fixed"
+    <AppBar
+      position="fixed"
       sx={{
-        textAlign: 'center',
-        backgroundColor: bgColor[zone],
-        fontSize: { xs: '0.75rem', md: '1rem' },
+        background: 'white',
+        color: '#40120E',
         boxShadow: '0px 2px 4px rgba(0,0,0,0.1)',
-        border: 'none',
-        width: '100%',
-        left: 0,
-        right: 0,
-      }} >
-      <Toolbar disableGutters sx={{ justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'nowrap', pl: 0, pr: 0, minHeight: 64, width: '100%', '&.MuiToolbar-gutters': { pl: 0, pr: 0 }, position: 'relative', }}>
+      }}
+    >
+      <Toolbar sx={{ minHeight: 64 }}>
         <Box
           sx={{
+            ml: `${leftOffset}px`,
+            transition: theme.transitions.create('margin-left', {
+              duration: theme.transitions.duration.standard,
+              easing: theme.transitions.easing.sharp,
+            }),
             display: 'flex',
             alignItems: 'center',
-            ml: `${drawerExpanded ? '300px' : '72px'}`,
+            flexGrow: 1,
           }}
         >
-          <Typography
-            variant="h6"
-            noWrap
-            sx={{ color: '#40120EFF', fontWeight: 'light', fontSize: '30px' }}
-          >
+          <Typography variant="h6" sx={{ fontWeight: 600 }}>
             {currentPage}
           </Typography>
         </Box>
 
-        <Box
+                <Box
           sx={{
             position: 'absolute',
             right: 20,
@@ -87,12 +68,6 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           )}
         </Box>
 
-        <MenuDrawerPrivate
-          zone="private"
-          onSelect={handleMenuSelect}
-          onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
-        />
-
       </Toolbar>
     </AppBar>
   );