changes regarding the mui to astryx tempalate based design

src/layout/MainLayout/index.jsx

@@ -1,56 +1,35 @@
 import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import { Box, useMediaQuery } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { AppShell } from '@astryxdesign/core/AppShell';
 
 import Header from './Header';
 import Sidebar from './Sidebar';
 
 export default function MainLayout() {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
-  const [open, setOpen] = useState(false);
-  const [mobileOpen, setMobileOpen] = useState(false);
-
-  const toggle = () => {
-    if (isMobile) setMobileOpen((p) => !p);
-    else setOpen((p) => !p);
-  };
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);
 
   return (
-    <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,
-          minWidth: 0,
-          minHeight: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-          transition: theme.transitions.create('width', { duration: theme.transitions.duration.standard })
-        }}
-      >
-        <Box sx={{ height: 64, flexShrink: 0 }} />
-        <Box
-          sx={{
-            flexGrow: 1,
-            width: '100%',
-            maxWidth: '100%',
-            overflowX: 'hidden',
-            px: { xs: 1.5, sm: 2.5, md: 3.5 },
-            py: { xs: 2, sm: 2.5, md: 3 }
-          }}
-        >
-          <Outlet />
-        </Box>
-      </Box>
-    </Box>
+    <AppShell
+      variant="section"
+      height="fill"
+      contentPadding={0}
+      topNav={<Header isSidebarCollapsed={isSidebarCollapsed} />}
+      sideNav={<Sidebar isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
+      mobileNav={{ breakpoint: 'lg' }}
+    >
+      <div className="main-content-area" style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
+        <Outlet />
+      </div>
+      <style>{`
+        .main-content-area {
+          padding: 24px;
+        }
+        @media (max-width: 768px) {
+          .main-content-area {
+            padding: 16px;
+          }
+        }
+      `}</style>
+    </AppShell>
   );
 }