From a83593850312f744dde3de4997d2d27b22be0af1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 4 Feb 2021 11:08:56 +0100
Subject: [PATCH] refactoring

---
 docs/src/layouts/App/base.scss  | 12 ++++++++++--
 docs/src/layouts/App/index.vue  | 14 +++++++++++---
 docs/src/layouts/App/style.scss |  4 +++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index 2c8c6a6f..86032e85 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -35,6 +35,10 @@
   background-color: rgba($colorBlack, 0.1);
 }
 
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba($colorBlack, 0.15);
+}
+
 ::-webkit-scrollbar-button {
   display: none;
   width: 0;
@@ -45,6 +49,10 @@
   background-color: transparent;
 }
 
+::selection {
+  background: rgba($colorBlue, 0.5);
+}
+
 body {
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -56,8 +64,8 @@ body {
 }
 
 *[id] {
-  scroll-margin-top: 6rem;
-  scroll-snap-margin-top: 6rem;
+  scroll-margin-top: 2rem;
+  scroll-snap-margin-top: 2rem;
 }
 
 button {
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index 462fa66a..389de183 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -144,7 +144,11 @@ export default {
 
   computed: {
     menuPortal() {
-      if (this.windowWidth && this.windowWidth < 800) {
+      if (!this.windowWidth) {
+        return
+      }
+
+      if (this.windowWidth < 800) {
         return 'mobile-menu'
       }
 
@@ -152,7 +156,11 @@ export default {
     },
 
     sidebarPortal() {
-      if (this.windowWidth && this.windowWidth < 800) {
+      if (!this.windowWidth) {
+        return
+      }
+
+      if (this.windowWidth < 800) {
         return 'mobile-sidebar'
       }
 
@@ -213,7 +221,7 @@ export default {
     setTimeout(() => {
       this.handleResize()
       this.initSearch()
-    }, 0)
+    }, 10)
 
     window.addEventListener('resize', this.handleResize)
   },
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 34c42bb2..bd3b81e7 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -158,10 +158,12 @@ $menuBreakPoint: 800px;
   &__close-icon {
     display: flex;
     flex: 0 0 auto;
+    padding: 0.5rem;
     background: transparent;
     border: 0;
     color: $colorText;
     margin-left: 1.5rem;
+    margin-right: -0.5rem;
     transition: color 0.2s $ease;
 
     &:hover {
@@ -296,7 +298,7 @@ $menuBreakPoint: 800px;
       font-weight: bold;
       color: rgba($colorBlack, 0.2);
       position: absolute;
-      margin-left: -1.5em;
+      margin-left: -1rem;
     }
   }