add scrollable sidebar

docs/src/layouts/App/base.scss

@@ -24,7 +24,11 @@
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 8px;
-  background-color: $colorBlack;
+  background-color: rgba($colorBlack, 0);
+}
+
+:hover::-webkit-scrollbar-thumb {
+  background-color: rgba($colorBlack, 0.1);
 }
 
 ::-webkit-scrollbar-button {
@@ -48,7 +52,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.7;
   font-feature-settings: 'cv05' 1;
-  background-color: rgba($colorBlack, 0.02);
+  background-color: $colorBackground;
   height: 100%;
 }
 

docs/src/layouts/App/index.vue

@@ -11,6 +11,7 @@
       />
     </header>
     <div class="app__content">
+      <div class="app__sidebar-wrapper">
         <nav class="app__sidebar">
           <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
             <div class="app__link-group-title">
@@ -25,6 +26,7 @@
             </ul>
           </div>
         </nav>
+      </div>
       <main class="app__main">
         <slot/>
         <page-navigation />

docs/src/layouts/App/style.scss

@@ -51,26 +51,44 @@
   }
 
   &__header {
+    align-self: center;
+    position: fixed;
+    z-index: 2;
+    width: 100%;
+    top: 0;
     flex: 0 0 auto;
     align-items: center;
     justify-content: space-between;
     padding-top: 2rem;
     padding-bottom: 2rem;
+    background-color: rgba($colorBackground, 0.8);
+    backdrop-filter: blur(10px);
   }
 
   &__content {
     flex: 1 1 auto;
   }
 
-  &__sidebar {
+  &__sidebar-wrapper {
     flex: 0 0 auto;
+    align-self: flex-start;
+    position: sticky;
+    top: 0;
     width: 18rem;
+    height: 100vh;
     padding-right: 3rem;
+    padding-top: 100px;
+  }
+
+  &__sidebar {
+    overflow: auto;
+    height: 100%;
   }
 
   &__main {
     flex: 1 1 auto;
     min-width: 0;
+    padding-top: 100px;
   }
 
   &__inner {

docs/src/variables.scss

@@ -1,5 +1,6 @@
 $colorWhite: #FFF;
 $colorBlack: #000;
+$colorBackground: mix($colorBlack, $colorWhite, 2%);
 
 /* Default Equations */
 $linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);