From fe9bf6375f0fcbea0984a2066c93cebd292e6ee2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 1 Aug 2025 15:14:03 -0700
Subject: [PATCH] fix sticky sidebar

---
 .../src/Components/Sidebar/components/authFooter.jsx   |  2 +-
 client/src/Components/Sidebar/index.jsx                | 10 ++++++++--
 client/src/index.css                                   |  2 ++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/Components/Sidebar/components/authFooter.jsx b/client/src/Components/Sidebar/components/authFooter.jsx
index dbc1ccfb0..224bdbb34 100644
--- a/client/src/Components/Sidebar/components/authFooter.jsx
+++ b/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)}
diff --git a/client/src/Components/Sidebar/index.jsx b/client/src/Components/Sidebar/index.jsx
index bbecb075d..6b7b6577c 100644
--- a/client/src/Components/Sidebar/index.jsx
+++ b/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)}
diff --git a/client/src/index.css b/client/src/index.css
index f83cdc461..a5d305d46 100644
--- a/client/src/index.css
+++ b/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;