From 0759f6f8abf8ae635d906faeb56c06b213f417b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 3 Feb 2021 23:36:29 +0100
Subject: [PATCH] improve styling

---
 docs/src/layouts/App/base.scss       |   4 -
 docs/src/layouts/App/index.vue       | 114 +++++++++++---------
 docs/src/layouts/App/style.scss      | 154 +++++++++++++--------------
 docs/src/templates/DocPage/index.vue |   5 +
 4 files changed, 141 insertions(+), 136 deletions(-)

diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index da6b08e8..7a066560 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -45,10 +45,6 @@
   background-color: transparent;
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
 body {
   font-family: 'Inter', sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index 64009c70..e5b8684d 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -1,63 +1,63 @@
 <template>
   <div class="app">
     <div class="app__navigation">
-      <g-link class="app__name" to="/">
-        <img src="~@/assets/images/logo.svg">
-      </g-link>
+      <div class="app__top-bar">
+        <g-link class="app__logo" to="/">
+          <img src="~@/assets/images/logo.svg">
+        </g-link>
 
-      <span style="position: relative">
-        Search
-        <div class="app__search-docsearch" />
-      </span>
-      <g-link to="/overview/installation">
-        Documentation
-      </g-link>
-      <g-link to="https://github.com/ueberdosis/tiptap-next">
-        GitHub
-      </g-link>
+        <div class="app__menu">
+          <span class="app__menu-item">
+            Search
+            <div class="app__search-docsearch" />
+          </span>
 
-      <button
-        class="app__menu-icon"
-        @click="menuIsVisible = true"
-        v-if="!menuIsVisible"
-      >
-        <icon name="menu" />
-      </button>
-      <button
-        class="app__close-icon"
-        @click="menuIsVisible = false"
-        v-if="menuIsVisible"
-      >
-        <icon name="close" />
-      </button>
+          <portal-target name="desktop-menu" />
+        </div>
+
+        <button
+          class="app__menu-icon"
+          @click="menuIsVisible = true"
+          v-if="!menuIsVisible"
+        >
+          <icon name="menu" />
+        </button>
+        <button
+          class="app__close-icon"
+          @click="menuIsVisible = false"
+          v-if="menuIsVisible"
+        >
+          <icon name="close" />
+        </button>
+      </div>
+      <div class="app__mobile-menu" v-if="menuIsVisible">
+        <portal-target name="mobile-menu" />
+        <portal-target name="mobile-sidebar" />
+      </div>
     </div>
 
     <div class="app__content">
       <div class="app__sidebar" v-if="showSidebar">
-        <portal-target name="desktop-nav" />
+        <portal-target name="desktop-sidebar" />
       </div>
 
       <main class="app__main">
-        <div class="app__top-bar">
-          <div class="app__inner app__top-bar-inner" />
-          <div class="app__mobile-nav" v-if="menuIsVisible">
-            <portal-target name="mobile-nav" />
-          </div>
-        </div>
-        <main class="app__main">
-          <div class="app__inner">
-            <slot />
-          </div>
-        </main>
-        <div class="app__page-navigation" v-if="showSidebar">
-          <div class="app__inner">
-            <page-navigation />
-          </div>
+        <div class="app__inner">
+          <slot />
         </div>
       </main>
 
-      <portal :to="portal">
-        <nav class="app__sidebar-navigation">
+      <portal :to="menuPortal">
+        <g-link class="app__menu-item" to="/overview/installation">
+          Documentation
+        </g-link>
+        <g-link class="app__menu-item" to="https://github.com/ueberdosis/tiptap-next">
+          GitHub
+        </g-link>
+      </portal>
+
+      <portal :to="sidebarPortal" v-if="showSidebar">
+        <nav class="app__sidebar-menu">
           <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
             <div class="app__link-group-title">
               {{ linkGroup.title }}
@@ -119,7 +119,6 @@ query {
 <script>
 import linkGroups from '@/links.yaml'
 import Icon from '@/components/Icon'
-import PageNavigation from '@/components/PageNavigation'
 // import GithubButton from 'vue-github-button'
 
 export default {
@@ -132,7 +131,6 @@ export default {
 
   components: {
     Icon,
-    PageNavigation,
     // GithubButton,
   },
 
@@ -145,12 +143,20 @@ export default {
   },
 
   computed: {
-    portal() {
+    menuPortal() {
       if (this.windowWidth && this.windowWidth < 800) {
-        return 'mobile-nav'
+        return 'mobile-menu'
       }
 
-      return 'desktop-nav'
+      return 'desktop-menu'
+    },
+
+    sidebarPortal() {
+      if (this.windowWidth && this.windowWidth < 800) {
+        return 'mobile-sidebar'
+      }
+
+      return 'desktop-sidebar'
     },
 
     currentPath() {
@@ -173,6 +179,10 @@ export default {
     $route() {
       this.menuIsVisible = false
     },
+
+    windowWidth() {
+      this.menuIsVisible = false
+    },
   },
 
   methods: {
@@ -192,8 +202,10 @@ export default {
   },
 
   mounted() {
-    this.initSearch()
     this.handleResize()
+    this.$nextTick(() => {
+      this.initSearch()
+    })
 
     window.addEventListener('resize', this.handleResize)
   },
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 5e439fe1..62e4437d 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -2,19 +2,16 @@ $navHeight: 4.5rem;
 $mobileBreakPoint: 600px;
 $menuBreakPoint: 800px;
 
-
-
 .app {
   &__navigation {
     position: fixed;
     display: flex;
+    flex-direction: column;
     z-index: 2;
     top: 0;
     width: 100%;
-    height: $navHeight;
+    max-height: 100vh;
     backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba($colorBlack, 0.1);
-    padding: 0 2rem;
 
     &::after {
       content: '';
@@ -31,29 +28,66 @@ $menuBreakPoint: 800px;
     }
   }
 
+  &__top-bar {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    height: $navHeight;
+    padding: 0 1rem;
+
+    @media (min-width: $menuBreakPoint) {
+      padding: 0 2rem;
+    }
+  }
+
+  &__menu {
+    display: flex;
+    align-items: center;
+  }
+
+  &__menu-item {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    font-weight: 500;
+
+    @media (min-width: $menuBreakPoint) {
+      display: inline-flex;
+      margin-right: 1.5rem;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
   &__content {
     display: flex;
     position: relative;
     z-index: 1;
   }
 
-  &__name {
+  &__logo {
     display: inline-flex;
     align-items: center;
     font-weight: 600;
     color: $colorBlack;
     font-size: 1.5rem;
+    margin-right: auto;
 
-    &::after {
-      content: '2.0 alpha';
-      display: block;
-      margin-left: 0.5rem;
-      font-size: 0.7rem;
-      letter-spacing: 0.05rem;
-      text-transform: uppercase;
-      border-radius: 5px;
-      border: 1px solid $colorBlack;
-      padding: 0 0.4em;
+    @media (min-width: 500px) {
+      &::after {
+        content: '2.0 alpha';
+        display: block;
+        margin-left: 0.5rem;
+        font-size: 0.7rem;
+        font-weight: 700;
+        letter-spacing: 0.05rem;
+        text-transform: uppercase;
+        border-radius: 0.4rem;
+        border: 2px solid $colorBlack;
+        padding: 0 0.4em;
+      }
     }
   }
 
@@ -105,45 +139,18 @@ $menuBreakPoint: 800px;
     }
   }
 
+  &__sidebar-menu {
+    margin-top: 1.5rem;
+
+    @media (min-width: $menuBreakPoint) {
+      margin-top: 0;
+    }
+  }
+
   &__main {
     flex: 1 1 auto;
     min-width: 0;
-  }
-
-  // &__top-bar {
-  //   display: flex;
-  //   flex-direction: column;
-  //   padding: 1rem 0;
-  //   position: sticky;
-  //   z-index: 2;
-  //   top: 0;
-  //   backdrop-filter: blur(10px);
-  //   max-height: 100vh;
-
-  //   @media (min-width: $menuBreakPoint) {
-  //     padding: 1.5rem 0;
-  //   }
-
-  //   &::after {
-  //     content: '';
-  //     z-index: -1;
-  //     position: absolute;
-  //     top: 0;
-  //     left: 0;
-  //     width: 100%;
-  //     height: 100%;
-  //     background-color: $colorWhite;
-  //     opacity: 0.8;
-  //     transform: translate3d(0,0,0);
-  //     pointer-events: none;
-  //   }
-  // }
-
-  &__top-bar-inner {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
+    padding-top: $navHeight;
   }
 
   &__menu-icon,
@@ -153,7 +160,7 @@ $menuBreakPoint: 800px;
     background: transparent;
     border: 0;
     color: $colorText;
-    margin-left: 1rem;
+    margin-left: 1.5rem;
     transition: color 0.2s $ease;
 
     &:hover {
@@ -165,16 +172,6 @@ $menuBreakPoint: 800px;
     }
   }
 
-  // &__inner {
-  //   margin: 0 auto;
-  //   max-width: 50rem;
-  //   padding: 0 1rem;
-
-  //   @media (min-width: $mobileBreakPoint) {
-  //     padding: 0 2rem;
-  //   }
-  // }
-
   &__link-group {
     margin-bottom: 1rem;
 
@@ -201,7 +198,7 @@ $menuBreakPoint: 800px;
     margin: 0.5rem 0;
   }
 
-  &__mobile-nav &__link-list &__link-list {
+  &__mobile-menu &__link-list &__link-list {
     display: block;
   }
 
@@ -209,6 +206,14 @@ $menuBreakPoint: 800px;
     display: block;
   }
 
+  &__mobile-menu &__menu-item {
+    margin-bottom: 1.5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   &__link {
     display: flex;
     justify-content: space-between;
@@ -294,25 +299,12 @@ $menuBreakPoint: 800px;
     }
   }
 
-  &__mobile-nav &__link--with-children::after {
+  &__mobile-menu &__link--with-children::after {
     display: none;
   }
 
-  &__main {
-    padding: 1rem 0;
-
-    @media (min-width: $mobileBreakPoint) {
-      padding: 2rem 0;
-      padding-top: $navHeight;
-    }
-  }
-
-  &__page-navigation {
-    border-top: 1px solid rgba($colorBlack, 0.1);
-  }
-
-  &__mobile-nav {
-    padding: 1rem;
+  &__mobile-menu {
+    padding: 1rem 0 1rem 1rem;
     flex: 1 1 auto;
     overflow-x: hidden;
     overflow-y: auto;
@@ -320,7 +312,7 @@ $menuBreakPoint: 800px;
     overscroll-behavior: contain;
 
     @media (min-width: $mobileBreakPoint) {
-      padding: 2rem;
+      padding: 2rem 0;
     }
   }
 
diff --git a/docs/src/templates/DocPage/index.vue b/docs/src/templates/DocPage/index.vue
index 50db6f1f..f1ffb4e7 100644
--- a/docs/src/templates/DocPage/index.vue
+++ b/docs/src/templates/DocPage/index.vue
@@ -3,6 +3,9 @@
     <app-section>
       <VueRemarkContent class="text" />
     </app-section>
+    <app-section>
+      <page-navigation />
+    </app-section>
   </Layout>
 </template>
 
@@ -20,10 +23,12 @@ query($path: String!) {
 
 <script>
 import AppSection from '@/components/AppSection'
+import PageNavigation from '@/components/PageNavigation'
 
 export default {
   components: {
     AppSection,
+    PageNavigation,
   },
 
   metaInfo() {