From 038bea728cb12dfa7b912fc08d2799d8b604d525 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 24 Apr 2022 14:33:46 +0800
Subject: [PATCH] fix: menu vertical overflow

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 src/App.vue                            | 24 ++++++++++++++++++++++++
 src/components/base/menu/MenuItem.vue  |  2 +-
 src/components/base/menu/MenuLabel.vue |  4 ++--
 src/layouts/FilledLayout.vue           | 11 +++++++----
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8c3013c5..2a240da5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,30 @@ import { RouterView } from "vue-router";
 
 <style lang="scss">
 body {
+  overflow-y: overlay;
   background: #eff4f9;
 }
+*::-webkit-scrollbar-track-piece {
+  background-color: #f8f8f8;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  background-clip: padding-box;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: #bbb;
+}
 </style>
diff --git a/src/components/base/menu/MenuItem.vue b/src/components/base/menu/MenuItem.vue
index a6412cc1..cfd8075a 100644
--- a/src/components/base/menu/MenuItem.vue
+++ b/src/components/base/menu/MenuItem.vue
@@ -85,7 +85,7 @@ function handleClick() {
   @apply relative;
 
   border-radius: 4px;
-  padding: 8px 10px;
+  padding: 6px 10px;
 
   &:hover,
   &.active {
diff --git a/src/components/base/menu/MenuLabel.vue b/src/components/base/menu/MenuLabel.vue
index 5d183ab7..30f15082 100644
--- a/src/components/base/menu/MenuLabel.vue
+++ b/src/components/base/menu/MenuLabel.vue
@@ -5,8 +5,8 @@
 </template>
 <style lang="scss">
 .menu-label {
-  padding-top: 12px;
-  padding-bottom: 13px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   color: #847e7e;
   font-size: 14px;
   font-weight: 400;
diff --git a/src/layouts/FilledLayout.vue b/src/layouts/FilledLayout.vue
index 275084bc..48366dbc 100644
--- a/src/layouts/FilledLayout.vue
+++ b/src/layouts/FilledLayout.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex h-full">
-    <aside class="navbar h-full" style="background: #fff">
-      <div class="logo flex justify-center py-6 animate-pulse">
-        <img :src="logo" style="width: 80px" alt="Halo Logo" />
+    <aside class="navbar fixed h-full overflow-y-auto" style="background: #fff">
+      <div class="logo flex justify-center py-5">
+        <img :src="logo" alt="Halo Logo" style="width: 78px" />
       </div>
       <VRoutesMenu :menus="menus" />
     </aside>
@@ -20,6 +20,9 @@ import logo from "@/assets/logo.svg";
 
 <style lang="scss">
 .navbar {
-  flex: 0 0 270px;
+  width: 260px;
+}
+.content {
+  margin-left: 260px;
 }
 </style>