From 378fc654b019474081707ae347cf4edabfbefa77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 23 Apr 2020 12:22:59 +0200
Subject: [PATCH] add mobile menu icon

---
 docs/src/assets/icons/close.svg     |  3 +++
 docs/src/assets/icons/menu.svg      |  5 +++++
 docs/src/components/Icon/style.scss |  4 ++--
 docs/src/layouts/App/index.vue      | 31 +++++++++++++++++++++++------
 docs/src/layouts/App/style.scss     | 28 +++++++++++++++++++++++---
 5 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 docs/src/assets/icons/close.svg
 create mode 100644 docs/src/assets/icons/menu.svg

diff --git a/docs/src/assets/icons/close.svg b/docs/src/assets/icons/close.svg
new file mode 100644
index 00000000..882ddfab
--- /dev/null
+++ b/docs/src/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3 12.179C14.2767 12.1558 14.2583 12.1282 14.2456 12.0978C14.233 12.0674 14.2266 12.0349 14.2266 12.002C14.2266 11.9691 14.233 11.9366 14.2456 11.9062C14.2583 11.8758 14.2767 11.8482 14.3 11.825L19.563 6.563C19.8443 6.28134 20.0021 5.89948 20.0018 5.50144C20.0016 5.10339 19.8432 4.72176 19.5615 4.4405C19.2798 4.15924 18.898 4.00138 18.4999 4.00166C18.1019 4.00194 17.7203 4.16034 17.439 4.442L12.177 9.7C12.1538 9.72328 12.1262 9.74175 12.0958 9.75435C12.0654 9.76696 12.0329 9.77345 12 9.77345C11.9671 9.77345 11.9346 9.76696 11.9042 9.75435C11.8738 9.74175 11.8462 9.72328 11.823 9.7L6.561 4.442C6.42174 4.30267 6.25639 4.19213 6.07441 4.1167C5.89242 4.04127 5.69736 4.00242 5.50036 4.00237C5.1025 4.00228 4.7209 4.16024 4.4395 4.4415C4.15811 4.72276 3.99997 5.10429 3.99988 5.50214C3.99978 5.9 4.15774 6.2816 4.439 6.563L9.7 11.825C9.72329 11.8482 9.74176 11.8758 9.75436 11.9062C9.76696 11.9366 9.77345 11.9691 9.77345 12.002C9.77345 12.0349 9.76696 12.0674 9.75436 12.0978C9.74176 12.1282 9.72329 12.1558 9.7 12.179L4.43901 17.442C4.29974 17.5813 4.18928 17.7467 4.11393 17.9288C4.03859 18.1108 3.99983 18.3059 3.99988 18.5029C3.99997 18.9007 4.15811 19.2822 4.43951 19.5635C4.57884 19.7028 4.74424 19.8132 4.92626 19.8886C5.10828 19.9639 5.30336 20.0027 5.50036 20.0026C5.89822 20.0025 6.27974 19.8444 6.56101 19.563L11.823 14.3C11.8462 14.2767 11.8738 14.2582 11.9042 14.2456C11.9346 14.233 11.9671 14.2266 12 14.2266C12.0329 14.2266 12.0654 14.233 12.0958 14.2456C12.1262 14.2582 12.1538 14.2767 12.177 14.3L17.439 19.563C17.7203 19.8444 18.1018 20.0025 18.4997 20.0026C18.8975 20.0027 19.2791 19.8448 19.5605 19.5635C19.8419 19.2822 20 18.9007 20.0001 18.5029C20.0002 18.105 19.8423 17.7234 19.561 17.442L14.3 12.179Z" fill="black"/>
+</svg>
diff --git a/docs/src/assets/icons/menu.svg b/docs/src/assets/icons/menu.svg
new file mode 100644
index 00000000..8db03e66
--- /dev/null
+++ b/docs/src/assets/icons/menu.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 2.5H1.5C0.947715 2.5 0.5 2.94772 0.5 3.5V4.5C0.5 5.05228 0.947715 5.5 1.5 5.5H22.5C23.0523 5.5 23.5 5.05228 23.5 4.5V3.5C23.5 2.94772 23.0523 2.5 22.5 2.5Z" fill="black"/>
+<path d="M22.5 10.5H1.5C0.947715 10.5 0.5 10.9477 0.5 11.5V12.5C0.5 13.0523 0.947715 13.5 1.5 13.5H22.5C23.0523 13.5 23.5 13.0523 23.5 12.5V11.5C23.5 10.9477 23.0523 10.5 22.5 10.5Z" fill="black"/>
+<path d="M22.5 18.5H1.5C0.947715 18.5 0.5 18.9477 0.5 19.5V20.5C0.5 21.0523 0.947715 21.5 1.5 21.5H22.5C23.0523 21.5 23.5 21.0523 23.5 20.5V19.5C23.5 18.9477 23.0523 18.5 22.5 18.5Z" fill="black"/>
+</svg>
diff --git a/docs/src/components/Icon/style.scss b/docs/src/components/Icon/style.scss
index 10ab355f..45d0ef45 100644
--- a/docs/src/components/Icon/style.scss
+++ b/docs/src/components/Icon/style.scss
@@ -1,7 +1,7 @@
 .icon {
   display: inline-flex;
-  width: 1.3rem;
-  height: 1.3rem;
+  width: 1.2rem;
+  height: 1.2rem;
 
   &::v-deep > svg {
     width: 100%;
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index c3bad835..4dca02a2 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -5,15 +5,31 @@
         <g-link class="app__logo" to="/">
           {{ $static.metadata.siteName }}
         </g-link>
-        <github-button
-          href="https://github.com/scrumpy/tiptap"
-          data-show-count="true"
-          aria-label="Star scrumpy/tiptap on GitHub"
-        />
+        <div>
+          <github-button
+            href="https://github.com/scrumpy/tiptap"
+            data-show-count="true"
+            aria-label="Star scrumpy/tiptap on GitHub"
+          />
+          <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>
     </header>
     <div class="app__content">
-      <div class="app__sidebar-wrapper">
+      <div class="app__sidebar-wrapper" :class="{ 'is-mobile-visible': menuIsVisible }">
         <nav class="app__sidebar">
           <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
             <div class="app__link-group-title">
@@ -47,11 +63,13 @@ query {
 
 <script>
 import linkGroups from '@/data/links.yaml'
+import Icon from '@/components/Icon'
 import PageNavigation from '@/components/PageNavigation'
 import GithubButton from 'vue-github-button'
 
 export default {
   components: {
+    Icon,
     PageNavigation,
     GithubButton,
   },
@@ -59,6 +77,7 @@ export default {
   data() {
     return {
       linkGroups,
+      menuIsVisible: false,
     }
   },
 }
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 162141d7..251e2445 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -1,4 +1,5 @@
 $navHeight: 4.5rem;
+$menuBreakPoint: 750px;
 
 .app {
   display: flex;
@@ -67,7 +68,7 @@ $navHeight: 4.5rem;
     margin: 0 auto;
     padding: 0 1rem;
 
-    @media (min-width: 750px) {
+    @media (min-width: $menuBreakPoint) {
       padding: 0 2rem;
     }
   }
@@ -83,12 +84,24 @@ $navHeight: 4.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
 
-    @media (min-width: 750px) {
+    @media (min-width: $menuBreakPoint) {
       padding-left: 2rem;
       padding-right: 2rem;
     }
   }
 
+  &__menu-icon,
+  &__close-icon {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    margin-left: 1rem;
+
+    @media (min-width: $menuBreakPoint) {
+      display: none;
+    }
+  }
+
   &__sidebar-wrapper {
     position: fixed;
     z-index: 2;
@@ -99,8 +112,17 @@ $navHeight: 4.5rem;
     background-color: $colorBackground;
     padding-left: 1rem;
     padding-right: 1rem;
+    visibility: hidden;
+    opacity: 0;
+
+    &.is-mobile-visible {
+      visibility: visible;
+      opacity: 1;
+    }
     
-    @media (min-width: 750px) {
+    @media (min-width: $menuBreakPoint) {
+      visibility: visible;
+      opacity: 1;
       position: sticky;
       flex: 0 0 auto;
       align-self: flex-start;