From b5f5d2d22f72cd26111436e38c80c5fe3cfa2358 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sun, 11 Aug 2024 22:21:13 +0800
Subject: [PATCH] :lipstick: Better nav links on mobile

---
 layouts/default.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index c772a96..3d46f28 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -5,9 +5,11 @@
         <v-avatar class="me-4 ms-1" color="transparent" size="32" :image="Logo" />
       </nuxt-link>
 
-      <v-btn variant="text" text="Products" to="/products" exact />
-      <v-btn variant="text" text="Activity" to="/activity" exact />
-      <v-btn variant="text" text="Gallery" to="/gallery" exact />
+      <div class="nav-links overflow-y-auto flex">
+        <v-btn variant="text" text="Products" to="/products" exact />
+        <v-btn variant="text" text="Activity" to="/activity" exact />
+        <v-btn variant="text" text="Gallery" to="/gallery" exact />
+      </div>
 
       <v-spacer></v-spacer>
 
@@ -25,3 +27,14 @@
 <script setup lang="ts">
 import Logo from "../assets/logo-w-shadow.png"
 </script>
+
+<style scoped>
+.nav-links::-webkit-scrollbar {
+  display: none;
+}
+
+.nav-links {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>