fix sticky sidebar

client/src/Components/Sidebar/components/authFooter.jsx

@@ -81,7 +81,7 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 	return (
 		<Stack
 			direction="row"
-			height="50px"
+			height="var(--env-var-side-bar-auth-footer-height)"
 			alignItems="center"
 			py={theme.spacing(4)}
 			px={theme.spacing(8)}

client/src/Components/Sidebar/index.jsx

@@ -91,9 +91,15 @@ const Sidebar = () => {
 
 	return (
 		<Stack
-			width={collapsed ? "64px" : "var(--env-var-side-bar-width)"}
+			height="100vh"
+			width={
+				collapsed
+					? "var(--env-var-side-bar-collapsed-width)"
+					: "var(--env-var-side-bar-width)"
+			}
 			component="aside"
-			position="relative"
+			position="sticky"
+			top={0}
 			borderRight={`1px solid ${theme.palette.primary.lowContrast}`}
 			paddingTop={theme.spacing(6)}
 			paddingBottom={theme.spacing(6)}

client/src/index.css

@@ -28,6 +28,8 @@ html {
 
 	--env-var-nav-bar-height: 70px;
 	--env-var-side-bar-width: 250px;
+	--env-var-side-bar-collapsed-width: 64px;
+	--env-var-side-bar-auth-footer-height: 50px;
 
 	--env-var-spacing-1: 12px;
 	--env-var-spacing-1-plus: 16px;