feature: scrollbars (#240)

Author: lukepolo

assets/css/tailwind.css

@@ -131,27 +131,6 @@
   }
 }
 
-
-
-@layer base {
-  /* Hide scrollbars globally (macOS-style); scrolling still works */
-  /* WebKit (Chrome, Safari, Edge) */
-  ::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  /* Firefox */
-  * {
-    scrollbar-width: none;
-  }
-
-  /* IE / legacy Edge */
-  * {
-    -ms-overflow-style: none;
-  }
-}
-
 @layer base {
   html {
     touch-action: manipulation;

composables/useOverlayScrollbarsOptions.ts

@@ -0,0 +1,15 @@
+import { computed } from "vue";
+import type { PartialOptions } from "overlayscrollbars";
+
+export function useOverlayScrollbarsOptions() {
+  const colorMode = useColorMode();
+
+  const options = computed<PartialOptions>(() => ({
+    scrollbars: {
+      theme: colorMode.value === "dark" ? "os-theme-light" : "os-theme-dark",
+      autoHide: "scroll",
+    },
+  }));
+
+  return { options };
+}

layouts/components/MainContent.vue

@@ -4,8 +4,10 @@ import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { useRightSidebar } from "@/composables/useRightSidebar";
 import SidebarMobileSync from "./SidebarMobileSync.vue";
 import { inject, computed } from "vue";
+import { useOverlayScrollbarsOptions } from "~/composables/useOverlayScrollbarsOptions";
 
 const { rightSidebarOpen, setRightSidebarOpen } = useRightSidebar();
+const { options: scrollbarOptions } = useOverlayScrollbarsOptions();
 
 // Inject values from default.vue
 const showLeftNav = inject<ReturnType<typeof computed<boolean>>>("showLeftNav");
@@ -26,17 +28,23 @@ const containContentValue = computed(() => containContent?.value ?? true);
       class="min-h-0 h-full"
     >
       <SidebarMobileSync />
-      <SidebarInset class="overflow-scroll min-h-0 h-full">
-        <!-- todo fix bg color bg-muted/10 -->
-        <div
-          class="p-4 w-full self-center"
-          :class="{
-            'mx-auto': !showLeftNavValue,
-            'lg:max-w-7xl': containContentValue,
-          }"
+      <SidebarInset class="overflow-hidden min-h-0 h-full">
+        <OverlayScrollbars
+          element="div"
+          :options="scrollbarOptions"
+          defer
+          class="h-full"
         >
-          <slot></slot>
-        </div>
+          <div
+            class="p-4 w-full self-center"
+            :class="{
+              'mx-auto': !showLeftNavValue,
+              'lg:max-w-7xl': containContentValue,
+            }"
+          >
+            <slot></slot>
+          </div>
+        </OverlayScrollbars>
       </SidebarInset>
 
       <AppSidebar side="right" class="main-content-sidebar" />

layouts/default.vue

@@ -10,10 +10,13 @@ import { useAuthStore } from "~/stores/AuthStore";
 import { e_player_roles_enum } from "~/generated/zeus";
 import { useGtm } from "@/layouts/composables/useGtm";
 import { useChatTabSetup } from "~/composables/useChatTabSetup";
+import { useOverlayScrollbarsOptions } from "~/composables/useOverlayScrollbarsOptions";
 
 useGtm();
 useChatTabSetup();
 
+const { options: scrollbarOptions } = useOverlayScrollbarsOptions();
+
 const route = useRoute();
 const authStore = useAuthStore();
 
@@ -51,15 +54,22 @@ provide("containContent", containContent);
     <AppSidebar v-if="showLeftNav" />
 
     <SidebarInset
-      class="flex flex-col overflow-y-auto overflow-x-hidden"
+      class="flex flex-col overflow-hidden"
       style="height: 100svh"
     >
       <TopNav v-if="!showLeftNav" />
       <AppHeader class="px-6" v-if="showLeftNav" />
 
-      <MainContent class="flex-1">
-        <slot></slot>
-      </MainContent>
+      <OverlayScrollbars
+        element="div"
+        :options="scrollbarOptions"
+        defer
+        class="flex-1 overflow-auto"
+      >
+        <MainContent>
+          <slot></slot>
+        </MainContent>
+      </OverlayScrollbars>
     </SidebarInset>
   </SidebarProvider>
 

package.json

@@ -68,6 +68,8 @@
     "minisearch": "^7.1.2",
     "monaco-editor": "^0.55.1",
     "node-fetch": "^3.3.2",
+    "overlayscrollbars": "^2.14.0",
+    "overlayscrollbars-vue": "^0.5.9",
     "pev2": "^1.20.1",
     "pinia": "^3.0.2",
     "reka-ui": "^2.8.0",

plugins/overlayscrollbars.client.ts

@@ -0,0 +1,6 @@
+import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
+import "overlayscrollbars/overlayscrollbars.css";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component("OverlayScrollbars", OverlayScrollbarsComponent);
+});

yarn.lock

@@ -49,6 +49,8 @@ __metadata:
     monaco-editor: "npm:^0.55.1"
     node-fetch: "npm:^3.3.2"
     nuxt: "npm:^3.17.2"
+    overlayscrollbars: "npm:^2.14.0"
+    overlayscrollbars-vue: "npm:^0.5.9"
     pev2: "npm:^1.20.1"
     pinia: "npm:^3.0.2"
     postcss: "npm:^8.5.3"
@@ -11787,6 +11789,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"overlayscrollbars-vue@npm:^0.5.9":
+  version: 0.5.9
+  resolution: "overlayscrollbars-vue@npm:0.5.9"
+  peerDependencies:
+    overlayscrollbars: ^2.0.0
+    vue: ^3.2.25
+  checksum: 10c0/bd40df4e29b90e26570d5a321fe6c8ea6d7983250ddfcc8b06767434c5c2f08b393db1434c83e0e4a369aeb17cfb65360e5ce1e0430cd72ce85cb59ed16424b4
+  languageName: node
+  linkType: hard
+
+"overlayscrollbars@npm:^2.14.0":
+  version: 2.14.0
+  resolution: "overlayscrollbars@npm:2.14.0"
+  checksum: 10c0/e08d188733032aadb258b6ddf56249c6747b7e5ac745dd34ae402320a5f8d4cd832a3a73baff29f8a64a6faf334be719617725972fab8c29fb708a9fd96bc3e8
+  languageName: node
+  linkType: hard
+
 "own-keys@npm:^1.0.1":
   version: 1.0.1
   resolution: "own-keys@npm:1.0.1"