From 483cf66db992169d361487c8461938810793b978 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Thu, 14 Apr 2022 18:45:47 +0200
Subject: [PATCH] refactor(style): menu scrollbar

---
 src/layouts/base.layout.vue | 50 +++++++++++++------------------------
 src/plugins/naive.plugin.ts |  2 ++
 2 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index efa5bb25..0c35fa00 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -30,42 +30,24 @@ const m = toolsByCategory.map(category => ({
 
 <template>
     <n-layout has-sider>
-        <n-layout-sider
-            bordered
-            collapse-mode="width"
-            :collapsed-width="64"
-            :width="240"
-            :collapsed="collapsed"
-            show-trigger
-            @collapse="collapsed = true"
-            @expand="collapsed = false"
-        >
-            <router-link
-                to="/"
-                style="text-decoration: none; color: grey; display: block; text-align: center; margin:25px 0; font-size: 25px;"
-            >
-                <strong>IT-Tools</strong>
-            </router-link>
+        <n-layout-sider bordered collapse-mode="width" :collapsed-width="64" :width="260" :collapsed="collapsed"
+            @collapse="collapsed = true" @expand="collapsed = false" :show-trigger="false">
+            <n-scrollbar>
+                <router-link to="/"
+                    style="text-decoration: none; color: grey; display: block; text-align: center; margin:25px 0; font-size: 25px;">
+                    <strong>IT-Tools</strong>
+                </router-link>
 
-            <n-menu
-                :value="route.name"
-                class="menu"
-                :collapsed="collapsed"
-                :collapsed-width="64"
-                :collapsed-icon-size="22"
-                :options="m"
-                v-model:value="activeKey"
-            />
+                <n-menu :value="route.name" class="menu" :collapsed="collapsed" :collapsed-width="64"
+                    :collapsed-icon-size="22" :options="m" v-model:value="activeKey" />
+
+            </n-scrollbar>
         </n-layout-sider>
         <n-layout class="content">
             <div class="bar-wrapper">
                 <search-bar />
 
-                <n-button
-                    circle
-                    quaternary
-                    @click="styleStore.isDarkTheme = !styleStore.isDarkTheme"
-                >
+                <n-button circle quaternary @click="styleStore.isDarkTheme = !styleStore.isDarkTheme">
                     <n-icon size="large" v-if="styleStore.isDarkTheme">
                         <LightModeFilled />
                     </n-icon>
@@ -82,20 +64,24 @@ const m = toolsByCategory.map(category => ({
 <style lang="less" scoped>
 .bar-wrapper {
     display: flex;
-    & > *:not(:first-child) {
+
+    &>*:not(:first-child) {
         margin-left: 15px;
     }
-    & > :first-child {
+
+    &> :first-child {
         flex-grow: 1;
     }
 }
 
 .content {
+
     // background-color: #f1f5f9;
     ::v-deep(.n-layout-scroll-container) {
         padding: 26px;
     }
 }
+
 .n-layout {
     height: 100vh;
 }
diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index ccbb049b..90f366af 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -48,9 +48,11 @@ import {
   NTable,
   NUploadDragger,
   NImage,
+  NScrollbar,
 } from 'naive-ui';
 
 const components = [
+  NScrollbar,
   NImage,
   NUploadDragger,
   NTable,