add mobile menu icon

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,
     }
   },
 }

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;