Merge pull request #3147 from bluewave-labs/fix/sidebar-scroll-gap

Fix sidebar gap when scrolling on pages with tall content

client/src/Components/v1/Layouts/HomeLayout/index.css

@@ -14,15 +14,7 @@
 	}
 } */
 
-/* .home-layout aside {
-	position: sticky;
-	top: 0;
-	left: 0;
-	height: 100vh;
-	max-width: var(--env-var-side-bar-width);
-} */
-
-.home-layout > div {
+.home-layout > .home-content-wrapper {
 	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
 	flex: 1;
 }

client/src/Components/v1/Layouts/HomeLayout/index.jsx

@@ -1,17 +1,27 @@
 import Sidebar from "../../Sidebar/index.jsx";
 import { Outlet } from "react-router";
-import { Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { useSidebar } from "@/Hooks/useSidebar.js";
 
 import "./index.css";
 
 const HomeLayout = () => {
+	const { width, transition } = useSidebar();
+
 	return (
 		<Stack
 			className="home-layout"
 			flexDirection="row"
-			gap={14}
 		>
 			<Sidebar />
+			{/* Spacer for fixed sidebar */}
+			<Box
+				sx={{
+					width,
+					flexShrink: 0,
+					transition,
+				}}
+			/>
 			<Stack className="home-content-wrapper">
 				<Outlet />
 			</Stack>

client/src/Components/v1/Sidebar/index.jsx

@@ -12,9 +12,9 @@ import Icon from "../Icon";
 
 // Utils
 import { useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
+import { useSidebar } from "@/Hooks/useSidebar.js";
 
 const URL_MAP = {
 	support: "https://discord.com/invite/NAb6H3UTjK",
@@ -65,8 +65,7 @@ const Sidebar = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	// Redux state
-	const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false);
+	const { collapsed, width, transition } = useSidebar();
 
 	const menu = getMenu(t);
 	const otherMenuItems = getOtherMenuItems(t);
@@ -75,20 +74,19 @@ const Sidebar = () => {
 	return (
 		<Stack
 			height="100vh"
-			width={
-				collapsed
-					? "var(--env-var-side-bar-collapsed-width)"
-					: "var(--env-var-side-bar-width)"
-			}
+			width={width}
 			component="aside"
-			position="sticky"
+			position="fixed"
 			top={0}
-			borderRight={`1px solid ${theme.palette.primary.lowContrast}`}
+			left={0}
 			paddingTop={theme.spacing(6)}
 			paddingBottom={theme.spacing(6)}
 			gap={theme.spacing(6)}
 			sx={{
-				transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
+				transition,
+				backgroundColor: "#000000",
+				borderRight: "1px solid #344054",
+				zIndex: 1000,
 			}}
 		>
 			<CollapseButton collapsed={collapsed} />

client/src/Hooks/useSidebar.js

@@ -0,0 +1,29 @@
+import { useSelector } from "react-redux";
+
+// CSS variable names for sidebar widths
+const SIDEBAR_WIDTH_VAR = "var(--env-var-side-bar-width)";
+const SIDEBAR_COLLAPSED_WIDTH_VAR = "var(--env-var-side-bar-collapsed-width)";
+
+// Transition timing for sidebar width changes
+const SIDEBAR_TRANSITION = "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+
+/**
+ * Hook to get sidebar state and computed width
+ * Centralizes sidebar width logic to avoid duplication between Sidebar and HomeLayout
+ *
+ * @returns {Object} Sidebar state and styles
+ * @returns {boolean} collapsed - Whether the sidebar is collapsed
+ * @returns {string} width - CSS width value based on collapsed state
+ * @returns {string} transition - CSS transition for width changes
+ */
+export const useSidebar = () => {
+	const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false);
+
+	return {
+		collapsed,
+		width: collapsed ? SIDEBAR_COLLAPSED_WIDTH_VAR : SIDEBAR_WIDTH_VAR,
+		transition: SIDEBAR_TRANSITION,
+	};
+};
+
+export default useSidebar;

client/src/index.css

@@ -4,6 +4,12 @@
 	box-sizing: border-box;
 }
 
+html,
+body {
+	background-color: #000000;
+	overscroll-behavior: none;
+}
+
 html {
 	scroll-behavior: smooth;
 }