From a0778d9104d565dfbc90f9b9ea7e0daf1fdf6a3e Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Thu, 30 Jan 2025 17:27:26 +0100 Subject: [PATCH] feat(frontend): add overlay scrollbar to main element --- frontend/package.json | 2 ++ frontend/src/app/layout.tsx | 8 +++--- .../src/components/OverlayScrollbarMain.tsx | 27 +++++++++++++++++++ frontend/src/styles/globals.css | 4 +++ frontend/yarn.lock | 19 +++++++++++++ 5 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/OverlayScrollbarMain.tsx diff --git a/frontend/package.json b/frontend/package.json index 2b39fa4..7615523 100644 --- 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 index 3981a03..9014a70 100644 --- 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(navbarQuery); return ( - - + +
{children}
- + ); } diff --git a/frontend/src/components/OverlayScrollbarMain.tsx b/frontend/src/components/OverlayScrollbarMain.tsx new file mode 100644 index 0000000..b359ad2 --- /dev/null +++ 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 = ({ + children, + className, +}) => ( + + {children} + +); + +export default OverlayScrollbarBody; diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css index d445eb8..1f3b229 100644 --- 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 index 9bf0f21..6539c34 100644 --- 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"