fix: menu vertical overflow

Signed-off-by: Ryan Wang <i@ryanc.cc>

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>

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 {

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;

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>