fix: make sidebar fixed to prevent re-rendering on content expansion

- Change sidebar from sticky to fixed positioning on desktop
- Set sidebar width to w-80 (320px)
- Add overflow-y-auto to sidebar for scrolling if needed
- Add lg:ml-80 margin to main content to account for fixed sidebar
- Sidebar now stays in place when content expands/collapses

Author: jaspreetbhamra

src/components/PageLayout.jsx

@@ -23,7 +23,7 @@ const PageLayout = ({ children }) => {
 				{/* Page content */}
 				<main
 					id="main-content"
-					className="flex-1 px-6 sm:px-10 flex flex-col gap-10 mt-16 sm:mt-24 min-h-screen"
+					className="flex-1 px-6 sm:px-10 flex flex-col gap-10 mt-16 sm:mt-24 min-h-screen lg:ml-80"
 				>
 					<div className="flex-1">{children}</div>
 					<Footer />

src/components/Sidebar.jsx

@@ -24,7 +24,7 @@ const Sidebar = ({ textColorClass, headingFontClass }) => {
 	return (
 		<aside
 			className={`fantasy-page relative flex flex-col items-center gap-6 p-8
-        lg:w-1/4 lg:sticky lg:top-0 lg:h-screen
+        lg:fixed lg:left-0 lg:top-0 lg:h-screen lg:w-80 lg:overflow-y-auto
       `}
 		>
 			{/* Binding divider (book spine illusion) */}

src/pages/Home.jsx

@@ -132,7 +132,7 @@ const Home = () => {
 						{/* Main Content */}
 						<main
 							id="main-content"
-							className={`fantasy-page flex flex-1 flex-col min-h-screen gap-10 p-10`}
+							className={`fantasy-page flex flex-1 flex-col min-h-screen gap-10 p-10 lg:ml-80`}
 						>
 							<div className="flex-1 flex flex-col justify-center gap-10">
 								<section className="rounded-3xl border border-transparent bg-transparent shadow-none">