add: sidebar position sticky

Author: techmannih

components/Sidebar.tsx

@@ -179,77 +179,77 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => {
     }
   }, [typeof window !== 'undefined']);
   return (
-    <div className='max-w-[1400px] mx-auto flex flex-col items-center'>
-      <section>
-        <div className='bg-primary dark:bg-slate-900 w-full h-12 mt-[4.5rem] z-150 flex relative flex-col justify-center items-center  lg:hidden '>
-          <div
-            className='z-[150] flex w-full bg-primary dark:bg-slate-900 justify-between items-center'
-            onMouseDown={(e) => e.stopPropagation()}
-            onClick={(e) => {
-              e.stopPropagation();
-              handleRotate();
-              setOpen(!open);
-            }}
-          >
-            {getDocsPath.includes(pathWtihoutFragment) && (
-              <h3 className='text-white  ml-12'>Overview</h3>
-            )}
-            {getStartedPath.includes(pathWtihoutFragment) && (
-              <h3 className='text-white ml-12'>Getting Started</h3>
-            )}
-
-            {getReferencePath.includes(pathWtihoutFragment) && (
-              <h3 className='text-white ml-12'>Reference</h3>
-            )}
-
-            {getSpecificationPath.includes(pathWtihoutFragment) && (
-              <h3 className='text-white ml-12'>Specification</h3>
-            )}
+<div className='max-w-[1400px] mx-auto flex flex-col items-center'>
+  <section>
+    <div className='bg-primary dark:bg-slate-900 w-full h-12 mt-[4.5rem] z-150 flex relative flex-col justify-center items-center lg:hidden'>
+      <div
+        className='z-[150] flex w-full bg-primary dark:bg-slate-900 justify-between items-center'
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleRotate();
+          setOpen(!open);
+        }}
+      >
+        {getDocsPath.includes(pathWtihoutFragment) && (
+          <h3 className='text-white ml-12'>Overview</h3>
+        )}
+        {getStartedPath.includes(pathWtihoutFragment) && (
+          <h3 className='text-white ml-12'>Getting Started</h3>
+        )}
+        {getReferencePath.includes(pathWtihoutFragment) && (
+          <h3 className='text-white ml-12'>Reference</h3>
+        )}
+        {getSpecificationPath.includes(pathWtihoutFragment) && (
+          <h3 className='text-white ml-12'>Specification</h3>
+        )}
+        {router.pathname === null && (
+          <h3 className='text-white ml-12'>Docs</h3>
+        )}
+        <svg
+          style={{
+            marginRight: '50px',
+            color: 'white',
+            transform: rotate,
+            transition: 'all 0.2s linear',
+          }}
+          xmlns='http://www.w3.org/2000/svg'
+          height='24'
+          viewBox='0 0 256 512'
+        >
+          <path
+            d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'
+            id='mainIconPathAttribute'
+            fill='#ffffff'
+          ></path>
+        </svg>
+      </div>
+    </div>
 
-            {router.pathname === null && (
-              <h3 className='text-white ml-12'>Docs</h3>
-            )}
-            <svg
-              style={{
-                marginRight: '50px',
-                color: 'white',
-                transform: rotate,
-                transition: 'all 0.2s linear',
-              }}
-              xmlns='http://www.w3.org/2000/svg'
-              height='24'
-              viewBox='0 0 256 512'
-            >
-              <path
-                d='M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z'
-                id='mainIconPathAttribute'
-                fill='#ffffff'
-              ></path>
-            </svg>
-          </div>
-        </div>
+    <div
+      className={`z-[150] absolute top-10 mt-24 left-0 h-full w-screen bg-white dark:bg-slate-900 dark:shadow-lg transform ${open ? '-translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out filter drop-shadow-md`}
+    >
+      <div className='flex flex-col dark:bg-slate-900'>
+        <DocsNav open={open} setOpen={setOpen} />
+      </div>
+    </div>
 
-        <div
-          className={`z-[150] absolute top-10 mt-24 left-0 h-full w-screen bg-white dark:bg-slate-900 dark:shadow-lg transform ${open ? '-translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out filter drop-shadow-md `}
-        >
-          <div className='flex flex-col  dark:bg-slate-900'>
-            <DocsNav open={open} setOpen={setOpen} />
-          </div>
-        </div>
-        <div className='dark:bg-slate-800 max-w-[1400px] grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12'>
-          <div className='hidden lg:block mt-24'>
-            <DocsNav open={open} setOpen={setOpen} />
-            <CarbonAds
-              className='lg:mt-8 w-4/5 mx-auto lg:ml-4'
-              variant='sidebar'
-            />
-          </div>
-          <div className='col-span-4 md:col-span-3 lg:mt-20 lg:w-5/6 mx-4 md:mx-0'>
-            {children}
-          </div>
+    <div className='dark:bg-slate-800 max-w-[1400px] grid grid-cols-1 lg:grid-cols-4 mx-4 md:mx-12'>
+      <div className='hidden lg:block mt-24 sticky top-24 h-[calc(100vh-6rem)] overflow-hidden'>
+        <div className='h-full overflow-y-auto scrollbar-hidden'>
+          <DocsNav open={open} setOpen={setOpen} />
+          <CarbonAds
+            className='lg:mt-8 w-4/5 mx-auto lg:ml-4'
+            variant='sidebar'
+          />
         </div>
-      </section>
+      </div>
+      <div className='col-span-4 md:col-span-3 lg:mt-20 lg:w-5/6 mx-4 md:mx-0'>
+        {children}
+      </div>
     </div>
+  </section>
+</div>
   );
 };
 

styles/globals.css

@@ -289,3 +289,9 @@ border-radius: 4px; */
   background: grey;
   border-radius: 8px;
 }
+.scrollbar-hidden {
+  scrollbar-width: none; /* Firefox */
+}
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, and Opera */
+}