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>
   );

src/components/MenuDrawerPrivate.jsx

@@ -14,8 +14,8 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 
-const OPEN_WIDTH = 400;
-const MINI_WIDTH = 72;
+export const OPEN_WIDTH = 450;
+export const MINI_WIDTH = 72;
 
 const menuData = [
     {
@@ -37,13 +37,15 @@ const menuData = [
                     {
                         title: 'Category Dictionary',
                         children: [
-                            { title: 'Categories' },
-                            { title: 'Products' },
-                            { title: 'All Assets Library' },
-                            { title: 'Media Management' },
-                            { title: 'Product Collections' },
+                            { title: 'Categories' }
                         ]
-                    }
+                    },
+                    { title: 'Products',
+                    children: [
+                        { title: 'AR  Assets Library Management' },
+                        { title: 'Media Management' },
+                    ] },
+                    { title: 'Product Collections' },
                 ]
             }
         ]
@@ -52,13 +54,17 @@ const menuData = [
         title: 'Customers',
         icon: <PeopleAltIcon />,
         children: [
-            { title: 'CRM' },
-            { title: 'Customer List' },
-            {
-                title: 'Projects',
+            { title: 'CRM',
                 children: [
+                     { title: 'Customer List' },
+                      { title: 'Projects' },
                     { title: 'Customer Collections' },
-                    { title: 'Sales' },
+                ]
+             },
+           
+            {
+                title: 'Sales',
+                children: [
                     { title: 'Quotes' },
                     { title: 'Orders' },
                 ]
@@ -80,9 +86,12 @@ const menuData = [
         icon: <AdminPanelSettingsIcon />,
         children: [
             { title: 'Users Management' },
-            { title: 'Access Control' },
-            { title: 'Roles' },
-            { title: 'Permissions' },
+            { title: 'Access Control',
+                children: [
+                    { title: 'Roles' },
+                    { title: 'Permissions' },
+                ]
+             },
         ]
     },
     {