From d65de1532c63c5161a29541f50a90657e85d371e Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 27 Jun 2024 03:16:38 -0400
Subject: [PATCH] Added sidebare.vue scrollbar

---
 src/views/main/SideBar.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
index b7945be..8cf1e60 100644
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -1,9 +1,9 @@
 <template>
-  <aside class="relative h-full">
+  <aside class="relative h-full overflow-y-auto custom-scrollbar">
 
     <nav class="h-full grid grid-rows-[60px_1fr_auto]">
       <div></div>
-      <div class="pt-4 px-4 ">
+      <div class="pt-4 px-4">
         <h2>Subscriptions</h2>
 
         <ul class="space-y">
@@ -49,17 +49,14 @@
                 ARPS
               </div>
             </RouterLink>
-
           </li>
         </ul>
       </div>
 
-
-      <div class="border-t w-full  py-10 ">
+      <div class="border-t w-full py-10">
         <SiteMenu></SiteMenu>
       </div>
     </nav>
-
   </aside>
 </template>
 
@@ -69,7 +66,7 @@
 }
 
 .nav-button:hover {
-  @apply bg-[#903175] text-gray-200 ;
+  @apply bg-[#903175] text-gray-200;
 }
 
 h2 {
@@ -79,6 +76,11 @@ h2 {
 aside {
   @apply relative;
 }
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #903175 #f1f1f1;
+}
 </style>
 
 <script setup lang="ts">