From 4770be54f458b60bc917fcfbf7f034b53351380e Mon Sep 17 00:00:00 2001
From: Stephen <ganstephenkusumo@gamil.com>
Date: Wed, 14 Aug 2024 19:56:06 +0700
Subject: [PATCH] css scroll Navbar Menu

---
 css/styles.css               | 36 ++++++++++++++++++++++++++++++++++++
 globalcomponent/one-menu.vue | 10 +++++-----
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 01b5a99..d1d11f5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -28,3 +28,39 @@
 body {
   font-family: "Roboto", sans-serif;
 }
+
+
+.scroll-container {
+  scroll-padding: 50px 0 0 50px;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+}
+
+/* this targets the default scrollbar (compulsory) */
+
+::-webkit-scrollbar-track {
+  background-color: #E3F2FD;
+}
+
+/* the new scrollbar will have a flat appearance with the set background color */
+
+::-webkit-scrollbar-thumb {
+  background-color:  #2196F3;
+  ;
+}
+
+/* this will style the thumb, ignoring the track */
+
+::-webkit-scrollbar-button {
+  background-color:  #E3F2FD;
+  ;
+}
+
+/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
+
+::-webkit-scrollbar-corner {
+  background-color: black;
+}
+
diff --git a/globalcomponent/one-menu.vue b/globalcomponent/one-menu.vue
index 4ea3bd9..5bb9f01 100644
--- a/globalcomponent/one-menu.vue
+++ b/globalcomponent/one-menu.vue
@@ -1,18 +1,18 @@
 <template>
-    <v-navigation-drawer style="border: 0;"class="pa-2" v-model="drawer" :width="320">
+    <v-navigation-drawer style="border: 0;"class="pa-4" v-model="drawer" :width="380">
     <!-- <v-navigation-drawer temporary class="blue lighten-2" v-model="drawer" dark fixed app> -->
-      <v-list density="compact">
+      <v-list>
         <v-list-item class="my-5">
-          <v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="images/logo.png"></v-img>
+          <v-img :aspect-ratio="1" max-height="42px" max-width="132px" class="bg-white" src="../globalimages/logo.png"></v-img>
         </v-list-item>
         <!-- LEVEL 0 -->
         <template v-for="(lev_0, i) in level_0" :key="lev_0.id" >
-          <v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg">
+          <v-list-item v-if="!level_1['p_' + lev_0.id] && lev_0.is_parent === 'N'" @click="goto(lev_0.url)" color="primary" rounded="lg" class="my-2">
             <v-list-item-title >{{ lev_0.name }}</v-list-item-title>
           </v-list-item>
           <v-list-group v-else :value="lev_0.name" >
             <template v-slot:activator="{ props }">
-              <v-list-item v-bind="props" color="primary" rounded="lg" >
+              <v-list-item v-bind="props" color="primary" rounded="lg" class="mb-3">
                 <v-list-item-title>{{ lev_0.name }}</v-list-item-title>
               </v-list-item>
             </template>