Hide dashboard sidebar scrollbar

Author: terrywangcode

web/src/app/globals.css

@@ -171,3 +171,12 @@ select {
   outline: none;
   box-shadow: 0 0 0 3px rgb(32 35 32 / 0.12);
 }
+
+.dashboard-scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.dashboard-scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}

web/src/components/ui/sidebar-nav.test.tsx

@@ -64,6 +64,14 @@ describe("SidebarNav", () => {
     expect(within(sidebar).getByRole("button", { name: "Collapse sidebar" })).toHaveClass("lg:grid");
   });
 
+  it("hides the desktop navigation scrollbar without disabling vertical scroll", () => {
+    renderSidebar();
+
+    const nav = screen.getByLabelText("Dashboard navigation");
+    expect(nav).toHaveClass("overflow-y-auto");
+    expect(nav).toHaveClass("dashboard-scrollbar-hidden");
+  });
+
   it("wraps mobile navigation chips instead of relying on horizontal scrolling", () => {
     renderSidebar();
 

web/src/components/ui/sidebar-nav.tsx

@@ -365,7 +365,10 @@ export function SidebarNav({
           </button>
         </div>
 
-        <nav aria-label="Dashboard navigation" className="mt-5 flex-1 space-y-4 overflow-y-auto pb-4">
+        <nav
+          aria-label="Dashboard navigation"
+          className="dashboard-scrollbar-hidden mt-5 flex-1 space-y-4 overflow-y-auto pb-4"
+        >
           {sections.map((section) => (
             <div key={section.id} className="space-y-2">
               <p className={sectionLabelClass}>{section.label}</p>