Merge pull request #66 from kleros/feat(frontend)/add-overlay-scrollbar

alcercu · web-flow · commit dc057b7582d4 · 2025-01-31T11:48:44.000+01:00
Feat(frontend): add overlay scrollbar to main element
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,8 @@
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",
     "next": "^15.1.4",
+    "overlayscrollbars": "^2.10.1",
+    "overlayscrollbars-react": "^0.5.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-use": "^17.6.0"
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -4,8 +4,10 @@ import { Urbanist } from "next/font/google";
 
 import Footer from "@/components/Footer";
 import Navbar from "@/components/Navbar";
+import OverlayScrollbarBody from "@/components/OverlayScrollbarMain";
 import { navbarQuery, NavbarQueryType } from "@/queries/navbar";
 import "@/styles/globals.css";
+import "overlayscrollbars/overlayscrollbars.css";
 import { request } from "@/utils/graphQLClient";
 
 const urbanist = Urbanist({
@@ -21,14 +23,14 @@ export default async function RootLayout({
   const navbarData = await request<NavbarQueryType>(navbarQuery);
 
   return (
-    <html lang="en">
-      <body className="antialiased">
+    <html lang="en" data-overlayscrollbars-initialize>
+      <OverlayScrollbarBody className="bg-background-1 antialiased">
         <main className={urbanist.className}>
           <Navbar {...{ navbarData }} />
           {children}
           <Footer />
         </main>
-      </body>
+      </OverlayScrollbarBody>
     </html>
   );
 }
diff --git a/frontend/src/components/OverlayScrollbarMain.tsx b/frontend/src/components/OverlayScrollbarMain.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import "overlayscrollbars/overlayscrollbars.css";
+
+interface IOverlayScrollbarBody extends React.ComponentProps<"body"> {
+  children: React.ReactNode;
+}
+
+const OverlayScrollbarBody: React.FC<IOverlayScrollbarBody> = ({
+  children,
+  className,
+}) => (
+  <OverlayScrollbarsComponent
+    element="body"
+    {...{ className }}
+    defer
+    data-overlayscrollbars-initialize
+    options={{ scrollbars: { autoHide: "move" } }}
+  >
+    {children}
+  </OverlayScrollbarsComponent>
+);
+
+export default OverlayScrollbarBody;
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -7,6 +7,10 @@
   --foreground: #171717;
 }
 
+.os-scrollbar {
+  --os-handle-bg: #42498f;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2120,6 +2120,8 @@ __metadata:
     husky: "npm:^9.1.7"
     lint-staged: "npm:^15.3.0"
     next: "npm:^15.1.4"
+    overlayscrollbars: "npm:^2.10.1"
+    overlayscrollbars-react: "npm:^0.5.6"
     postcss: "npm:^8"
     prettier: "npm:^3.4.2"
     prettier-plugin-tailwindcss: "npm:^0.6.9"
@@ -3577,6 +3579,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"overlayscrollbars-react@npm:^0.5.6":
+  version: 0.5.6
+  resolution: "overlayscrollbars-react@npm:0.5.6"
+  peerDependencies:
+    overlayscrollbars: ^2.0.0
+    react: ">=16.8.0"
+  checksum: 10/473f5af860feab4b5418f9adc8e356fb201e9de61286443ff64002b9c997bc19bf17cf60e314c502c14ca41fa213c12f18111e6fe913be86ad68a15c32e66789
+  languageName: node
+  linkType: hard
+
+"overlayscrollbars@npm:^2.10.1":
+  version: 2.10.1
+  resolution: "overlayscrollbars@npm:2.10.1"
+  checksum: 10/dfea9d3cf439a50b671119a806c42a7b49ad8db686a607ac8874706da092aa3cf69542605fb600dc96ee94df54b785a81c1cbdca16e8bd3fd69ba3d16ab192a1
+  languageName: node
+  linkType: hard
+
 "own-keys@npm:^1.0.1":
   version: 1.0.1
   resolution: "own-keys@npm:1.0.1"
