feat: add docs menu collapse functionality

src/assets/style/sidebar.scss

@@ -43,12 +43,13 @@
     font-size: .8rem;
     text-transform: uppercase;
     letter-spacing: 1px;
-    margin: 15px 0 15px;
-    padding-top: 20px;
+    margin-bottom: 0;
+    padding: 10px 0px;
     border-top: 1px solid var(--border-color);
-    &:first-of-type {
-      border:0;
-    }
+  }
+
+  .menu-section:first-of-type h3 {
+    border: 0;
   }
 
   p {
@@ -60,13 +61,12 @@
     color: currentColor;
     opacity: 1;
     font-weight: 400;
-    display: flex;
     text-decoration: none;
 
     &.active--exact {
       color: var(--primary-color-dark);
     }
-    
+
     &:hover {
       color: var(--primary-color);
     }
@@ -127,7 +127,7 @@
       margin:0;
       order: 2;
       padding-bottom: 150px;
-     
+
     } + .section {
       margin-left: 0;
       width: 100%;

src/layouts/Docs.vue

@@ -2,14 +2,7 @@
   <Layout class="has-sidebar docs-page" :footer="false">
     <div class="container flex flex-align-top">
       <div class="sidebar">
-        <template v-if="links" v-for="(group, i1) in links">
-          <h3 class="menu-item" :key="`title-${i1}`">{{ group.title }}</h3>
-          <template v-for="(item, i2) in group.items">
-            <g-link :exact="item.link == '/docs/'" class="menu-item menu-link" :to="item.link" :key="`link-${i1}-${i2}`">
-              {{ item.title }}
-            </g-link>
-          </template>
-        </template>
+        <DocsMenu v-if="links" v-for="(group, i1) in links" :group="group" :index="i1" :key="i1" />
       </div>
       <Section class="doc-content flex-fit" container="base">
         <slot></slot>
@@ -21,24 +14,36 @@
         </p>
         <nav class="docs-nav">
           <div class="docs-nav__previous">
-            <g-link v-if="previousPage" exact class="button  button--small docs-nav__link" :to="previousPage.link">
-              &larr; {{ previousPage.title }}
-            </g-link>
+            <g-link
+              v-if="previousPage"
+              exact
+              class="button button--small docs-nav__link"
+              :to="previousPage.link"
+            >&larr; {{ previousPage.title }}</g-link>
           </div>
           <div class="docs-nav__next">
-            <g-link v-if="nextPage" exact class="button  button--small docs-nav__link" :to="nextPage.link">
-              {{ nextPage.title }} &rarr;
-            </g-link>
+            <g-link
+              v-if="nextPage"
+              exact
+              class="button button--small docs-nav__link"
+              :to="nextPage.link"
+            >{{ nextPage.title }} &rarr;</g-link>
           </div>
         </nav>
       </Section>
-      <div v-if="subtitles.length > 0 && subtitles[0].depth !== 3" class="sidebar sidebar--right hide-for-small">
+      <div
+        v-if="subtitles.length > 0 && subtitles[0].depth !== 3"
+        class="sidebar sidebar--right hide-for-small"
+      >
         <h3>On this page</h3>
         <ul v-if="subtitles.length" class="menu-item submenu">
-          <li class="submenu__item" :class="'submenu__item-depth-' + subtitle.depth" v-for="subtitle in subtitles" :key="subtitle.value">
-            <a class="submenu__link" :href="subtitle.anchor">
-              {{ subtitle.value }}
-            </a>
+          <li
+            class="submenu__item"
+            :class="'submenu__item-depth-' + subtitle.depth"
+            v-for="subtitle in subtitles"
+            :key="subtitle.value"
+          >
+            <a class="submenu__link" :href="subtitle.anchor">{{ subtitle.value }}</a>
           </li>
         </ul>
       </div>
@@ -48,10 +53,12 @@
 
 <script>
 import Github from '~/assets/images/github-logo.svg'
+import DocsMenu from './DocsMenu';
 
 export default {
   components: {
-    Github
+    Github,
+    DocsMenu
   },
   props: {
     subtitles: { type: Array, default: () => [] },

src/layouts/DocsMenu.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="menu-section">
+    <a href="#" class="menu-title" @click="toggleMenu">
+      <h3 class="menu-item">
+        {{ group.title }}
+        <MenuArrow :class="{open: openMenu}" />
+      </h3>
+    </a>
+    <div :class="{'menu-list-collapse': !openMenu}">
+      <template v-for="(item, i2) in group.items">
+        <g-link
+          :exact="item.link == '/docs/'"
+          class="menu-item menu-link"
+          :to="item.link"
+          :key="`link-${index}-${i2}`"
+        >{{ item.title }}</g-link>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuArrow from '~/assets/images/icon-arrow.svg'
+
+export default {
+    components: {
+        MenuArrow
+    },
+    props: {
+        group: {
+            type: Object,
+            default: () => {}
+        },
+        index: {
+            type: Number
+        }
+    },
+    data() {
+        return {
+            openMenu: true
+        }
+    },
+    methods: {
+      toggleMenu() {
+        this.openMenu = !this.openMenu;
+        let closedMenus = localStorage.getItem('closedMenus');
+
+        if (!this.openMenu) {
+          if(!closedMenus) {
+              let menus = [this.index];
+              localStorage.setItem('closedMenus', JSON.stringify(menus));
+          }
+          else{
+            let newMenus = JSON.parse(closedMenus);
+            newMenus.push(this.index);
+            localStorage.setItem('closedMenus', JSON.stringify(newMenus));
+          }
+        }
+        else if (this.openMenu && closedMenus) {
+            let newMenus = JSON.parse(closedMenus);
+            localStorage.setItem('closedMenus', JSON.stringify(newMenus.filter(index => index !== this.index)));
+        }
+      }
+    },
+    mounted() {
+      let closedMenus = localStorage.getItem('closedMenus');
+      let newMenus = JSON.parse(closedMenus);
+      this.openMenu = newMenus?.includes(this.index) ? false : true;
+    }
+}
+</script>
+
+<style lang="scss">
+.menu-title {
+  display: block;
+}
+
+h3.menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .icon-arrow_svg__icon-arrow {
+    margin-right: 10px;
+    transition: transform 0.5s linear;
+    transform: rotate(-180deg);
+
+    &.open {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+.menu-list-collapse {
+  display: none;
+}
+</style>