sidebar

client/src/components/layouts/RootLayout.tsx

@@ -1,22 +1,30 @@
 import { Outlet } from "react-router";
 import Stack from "@mui/material/Stack";
-import { SideBar } from "@/components/layouts/sidebar";
+import {
+  SideBar,
+  COLLAPSED_WIDTH,
+  EXPANDED_WIDTH,
+} from "@/components/layouts/sidebar";
 import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
 const RootLayout = () => {
   const theme = useTheme();
+  const isSmall = useMediaQuery(theme.breakpoints.down("md"));
   return (
     <Stack direction="row" minHeight="100vh">
       <SideBar />
       <Stack
         flex={1}
-        padding={theme.spacing(12)}
+        padding={12}
         overflow={"hidden"}
         sx={{
-          backgroundColor: theme.palette.mode === 'dark'
-            ? 'rgba(255, 255, 255, 0.01)'
-            : 'rgba(0, 0, 0, 0.01)',
-          display: 'flex',
-          alignItems: 'center'
+          pl: `${(isSmall ? COLLAPSED_WIDTH : 0) + 24}px`,
+          backgroundColor:
+            theme.palette.mode === "dark"
+              ? "rgba(255, 255, 255, 0.01)"
+              : "rgba(0, 0, 0, 0.01)",
+          display: "flex",
+          alignItems: "center",
         }}
       >
         <Stack maxWidth={1280} width="100%" paddingY={theme.spacing(6)}>

client/src/components/layouts/sidebar/index.tsx

@@ -38,8 +38,9 @@ export const SideBar = () => {
   return (
     <Stack
       component="aside"
-      position="sticky"
+      position={isSmall ? "fixed" : "sticky"}
       top={0}
+      left={0}
       minHeight={"100vh"}
       maxHeight={"100vh"}
       paddingTop={theme.spacing(6)}
@@ -49,6 +50,8 @@ export const SideBar = () => {
       width={sideBarOpen ? EXPANDED_WIDTH : COLLAPSED_WIDTH}
       sx={{
         transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
+        zIndex: isSmall ? (t) => t.zIndex.drawer : "auto",
+        backgroundColor: theme.palette.background.paper,
       }}
     >
       <CollapseButton sidebarOpen={sideBarOpen} />
@@ -102,9 +105,7 @@ export const SideBar = () => {
           );
         })}
       </List>
-      <Divider
-        sx={{ mt: "auto", borderColor: theme.palette.divider }}
-      />
+      <Divider sx={{ mt: "auto", borderColor: theme.palette.divider }} />
       <BottomControls />
     </Stack>
   );