Fix: Side scroll individually and hidden scrollbar

code100x · Feb 22, 2024 · bb69aa2 · bb69aa2
1 parent 86975d3
commit bb69aa2
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 555 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -64,6 +64,15 @@
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
+}
 
+/* Hide scrollbar for Chrome, Safari and Opera */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
 }
 
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -115,7 +115,10 @@ export function Sidebar({
   }
 
   return (
-    <div className="w-84" style={{ width: '300px' }}>
+    <div
+      className="w-84 self-start sticky overflow-y-auto h-screen hide-scrollbar"
+      style={{ width: '300px' }}
+    >
       <div className="overflow-scroll min-h-screen overflow-y-auto bg-gray-50 dark:bg-gray-800 cursor-pointer  w-full sticky top-[64px] self-start w-84">
         <div className="flex">
           {/* <ToggleButton