feat: scrollbar style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-for-component",
-  "version": "0.14.8",
+  "version": "0.15.1",
   "description": "dumi like documentation tool",
   "main": "dist/node/index.js",
   "typings": "types/index.d.ts",

src/client/theme-default/components/Page.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="page">
-    <div class="container">
+    <div class="container hover-scrollbar">
       <slot name="top" />
 
       <div class="content">
@@ -44,6 +44,7 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
   padding: 0.025rem 2.5rem 2rem;
   /* max-width: 50rem; */
   width: calc(100% - var(--slug-width));
+  height: 100%;
 }
 
 @media (max-width: 900px) {

src/client/theme-default/components/SideBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <aside class="sidebar" :class="{ open }">
+  <aside class="sidebar hover-scrollbar" :class="{ open }">
     <NavLinks class="nav" />
 
     <slot name="sidebar-top" />

src/client/theme-default/styles/layout.css

@@ -207,7 +207,6 @@ form {
   max-height: calc(100% - var(--header-height) - 10rem);
   width: var(--slug-width);
   padding: 50px 24px 0 0;
-  border-right: 1px solid var(--border-color);
   background-color: #fff;
   z-index: 3;
   overflow-y: auto;
@@ -249,14 +248,26 @@ form {
   height: 100vh;
 }
 
+.hover-scrollbar {
+  overflow-y: hidden !important;
+}
+
+.hover-scrollbar:hover {
+  overflow-y: auto !important;
+}
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 10px;
 }
+
 ::-webkit-scrollbar-thumb {
-  background-color: #d3d7dd;
+  background-color: rgba(144, 147, 153, 0.3);
   border-radius: 5px;
+  transition: all 1s;
+  opacity: 0;
 }
+
 ::-webkit-scrollbar-track {
   background-color: transparent;
 }