Revert "updates on the ui changes"

This reverts commit 298fc603a0.

src/layout/MainLayout/index.jsx

@@ -1,36 +1,45 @@
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import { AppShell } from '@astryxdesign/core/AppShell';
+import { Box, Toolbar, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 
 import Header from './Header';
-import Sidebar from './Sidebar';
-
-// ==============================|| DOORMILE - APP SHELL ||============================== //
-// Astryx AppShell owns the responsive chrome: sticky top nav, collapsible side nav,
-// and the auto-generated mobile drawer. Pages keep their own internal padding.
+import Sidebar, { DRAWER_WIDTH, MINI_WIDTH } from './Sidebar';
 
 export default function MainLayout() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
+  const [open, setOpen] = useState(true);
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const toggle = () => {
+    if (isMobile) setMobileOpen((p) => !p);
+    else setOpen((p) => !p);
+  };
+
   return (
-    <AppShell
-      variant="section"
-      height="fill"
-      contentPadding={0}
-      topNav={<Header />}
-      sideNav={<Sidebar />}
-      mobileNav={{ breakpoint: 'lg' }}
-    >
-      <div className="main-content-area" style={{ minHeight: '100%', boxSizing: 'border-box' }}>
-        <Outlet />
-      </div>
-      <style>{`
-        .main-content-area {
-          padding: 24px;
-        }
-        @media (max-width: 480px) {
-          .main-content-area {
-            padding: 16px;
-          }
-        }
-      `}</style>
-    </AppShell>
+    <Box sx={{ display: 'flex', bgcolor: 'background.default', minHeight: '100vh' }}>
+      <Header onToggle={toggle} />
+      <Sidebar
+        open={open}
+        isMobile={isMobile}
+        mobileOpen={mobileOpen}
+        onMobileClose={() => setMobileOpen(false)}
+      />
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          width: { lg: `calc(100% - ${open ? DRAWER_WIDTH : MINI_WIDTH}px)` },
+          minHeight: '100vh',
+          transition: theme.transitions.create('width', { duration: theme.transitions.duration.standard })
+        }}
+      >
+        <Toolbar sx={{ minHeight: 64 }} />
+        <Box sx={{ p: { xs: 2, sm: 3 } }}>
+          <Outlet />
+        </Box>
+      </Box>
+    </Box>
   );
 }