feat: updates sidebar styling

src/components/Sidebar/Header.tsx

@@ -13,10 +13,12 @@ interface Props {
 
 export const Header = ({ title, onClose }: Props) => {
   return (
-    <Section>
+    <Section py={2}>
       <Grid container spacing={2}>
         <Grid item xs={10}>
-          <Typography variant="h5">{title}</Typography>
+          <Box sx={{ display: "flex", alignItems: "center", height: "100%" }}>
+            <Typography variant="h5">{title}</Typography>
+          </Box>
         </Grid>
         <Grid item xs={2}>
           <Box>

src/components/Sidebar/Section.tsx

@@ -6,11 +6,13 @@ import Stack from "@mui/material/Stack";
 interface Props {
   children: React.ReactNode;
   title?: string;
+  py?: number;
+  px?: number;
 }
 
-export const Section = ({ children, title }: Props) => {
+export const Section = ({ children, py, px, title }: Props) => {
   return (
-    <Box pt={4} px={4}>
+    <Box py={py ?? 3} px={px ?? 4}>
       <Stack>
         {title && <Typography fontWeight={600}>{title}</Typography>}
         {children}

src/components/Sidebar/index.tsx

@@ -16,15 +16,24 @@ export const Sidebar = ({ header, children }: Props) => {
         flexDirection: "column",
       }}
     >
-      <Box sx={{ width: "100%" }}>{header}</Box>
+      <Box sx={{ width: "100%", boxShadow: 6, zIndex: 1 }}>{header}</Box>
       <Box
         sx={{
           width: "100%",
           overflowY: "scroll",
           flexGrow: 1,
+          "*::-webkit-scrollbar": {
+            width: "0.4em",
+          },
+          "*::-webkit-scrollbar-track": {
+            "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,0.00)",
+          },
+          "*::-webkit-scrollbar-thumb": {
+            backgroundColor: "rgba(0,0,0,.1)",
+          },
         }}
       >
-        <Box sx={{ width: "100%" }}>{children}</Box>
+        <Box sx={{ width: "100%", pb: 6 }}>{children}</Box>
       </Box>
     </Box>
   );

src/theme.ts

@@ -30,6 +30,12 @@ const customVars: CustomThemeVars = {
 
 export const theme = createTheme({
   customVars,
+  typography: {
+    h5: {
+      fontSize: "1.3rem",
+      lineHeight: 1.2,
+    },
+  },
   palette: {
     mode: "dark",
     secondary: {