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

src/App.jsx

@@ -1,65 +1,84 @@
-import { useState } from 'react'
-import './App.css'
+import { useState } from 'react';
+import { Box, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import AppHeader from './components/AppHeader';
+import MenuDrawerPrivate, { OPEN_WIDTH, MINI_WIDTH } from './components/MenuDrawerPrivate';
 import Footer from './components/Footer';
-import Box from '@mui/material/Box';
-
-import Clients from './private/clients/Clients';
 import Dashboard from './private/dashboard/Dashboard';
 import UserManagement from './private/users/UserManagement';
-
 import LoginPage from './private/LoginPage';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+
 import { useAuth } from './context/AuthContext';
 
+const DRAWER_EXPANDED = OPEN_WIDTH;
+const DRAWER_COLLAPSED = MINI_WIDTH;
+const APPBAR_HEIGHT = 64;
+
 function PrivateRoute({ children }) {
   const { user } = useAuth();
   return user ? children : <Navigate to="/login" replace />;
 }
 
-function App() {
+export default function App() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width:900px)');
   const [zone, setZone] = useState('public'); // public | restricted | private
+
+  const [drawerExpanded, setDrawerExpanded] = useState(true);
   const [currentView, setCurrentView] = useState('Dashboard');
 
+  const mainLeft = isMobile ? 0 : (drawerExpanded ? DRAWER_EXPANDED : DRAWER_COLLAPSED);
+
   return (
     <>
+      <AppHeader
+        zone="private"
+        onSelectMenuItem={setCurrentView}
+        drawerExpanded={drawerExpanded}
+      />
+
+      <MenuDrawerPrivate
+        onSelect={(value) => {
+          setCurrentView(value === '/users/UserManagement' ? 'UserManagement' : value);
+        }}
+        onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
+      />
+
       <Box
+        component="main"
         sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: '100vh', // full height of the viewport
+          ml: { xs: 0, md: `${mainLeft}px` },
+          mt: `${APPBAR_HEIGHT}px`,
+          p: 2,
+          transition: theme.transitions.create('margin-left', {
+            duration: theme.transitions.duration.standard,
+            easing: theme.transitions.easing.sharp,
+          }),
         }}
       >
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
 
-        <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />
-        <Box sx={{ height: 64 }} />
+          <Route
+            path="/"
+            element={
+              <PrivateRoute>
+                {zone === 'private' && <Clients />}
+                {zone === 'restricted' && <Clients />}
 
-        <Box component="main" sx={{ flex: 1, p: 2 }}>
-          <Routes>
-            <Route path="/login" element={<LoginPage />} />
+                {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
 
-            <Route
-              path="/"
-              element={
-                <PrivateRoute>
-                  {zone === 'private' && <Clients />}
-                  {zone === 'restricted' && <Clients />}
-
-                  {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
-
-                 {zone === 'public' && currentView === 'UserManagement' && <UserManagement />}
-                </PrivateRoute>
-              }
-            />
-          </Routes>
-        </Box>
-
-        <Box sx={{ height: 64 }} />
-        <Footer zone={zone} />
+                {zone === 'public' && currentView === 'UserManagement' && <UserManagement />}
+              </PrivateRoute>
+            }
+          />
+        </Routes>
       </Box>
 
-    </>
-  )
-}
+      <Box sx={{ height: 64 }} />
+      <Footer zone={zone} />
 
-export default App
+    </>
+  );
+}