From 6a188d405599bd3d4c42495d547c1c6cbde5a516 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 20 Apr 2021 11:07:50 +0200
Subject: [PATCH] docs: use sticky instead of fixed menu

---
 docs/src/layouts/App/index.vue  | 16 ++++++++--------
 docs/src/layouts/App/style.scss | 12 +++++++-----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index 201691ad..c996e19a 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="app">
-    <div class="app__navigation">
-      <banner-message
-        to="https://www.tiptap.dev/"
-        v-if="$route.name === 'home'"
-        color="black"
-      >
-        You’re browsing the documentation for v2.x. Click here for v1.x documentation →
-      </banner-message>
+    <banner-message
+      to="https://www.tiptap.dev/"
+      v-if="$route.name === 'home'"
+      color="black"
+    >
+      You’re browsing the documentation for v2.x. Click here for v1.x documentation →
+    </banner-message>
 
+    <div class="app__navigation">
       <div class="app__top-bar">
         <g-link class="app__logo" to="/">
           <img src="~@/assets/images/logo.svg">
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index c003481a..12798bf0 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -4,7 +4,7 @@ $menuBreakPoint: 800px;
 
 .app {
   &__navigation {
-    position: fixed;
+    position: sticky;
     display: flex;
     flex-direction: column;
     z-index: 2;
@@ -43,6 +43,10 @@ $menuBreakPoint: 800px;
   &__menu {
     display: flex;
     align-items: center;
+
+    > .vue-portal-target {
+      display: flex;
+    }
   }
 
   &__menu-item {
@@ -139,15 +143,14 @@ $menuBreakPoint: 800px;
       width: 20rem;
       flex: 0 0 auto;
       position: sticky;
-      top: 0;
+      top: $navHeight;
       align-self: flex-start;
       padding: 2rem;
-      padding-top: $navHeight + 2rem;
+      padding-top: 2rem;
       height: 100vh;
       overflow-x: hidden;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
-      overscroll-behavior: contain;
     }
   }
 
@@ -162,7 +165,6 @@ $menuBreakPoint: 800px;
   &__main {
     flex: 1 1 auto;
     min-width: 0;
-    padding-top: $navHeight;
     overflow: hidden;
   }