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