From eb2c9cbbe0f4f18079bdcefbfdbfd4db5ddd2325 Mon Sep 17 00:00:00 2001
From: Dana <dana.ottaviani@gmail.com>
Date: Sat, 3 Oct 2020 17:04:58 -0400
Subject: [PATCH 1/2] feat: add docs menu collapse functionality

feat: hide border for first menu section


clean-up
---
 src/assets/images/icon-arrow.svg | 18 ++++++++
 src/assets/style/sidebar.scss    | 16 +++----
 src/layouts/Docs.vue             | 47 +++++++++++---------
 src/layouts/DocsMenu.vue         | 74 ++++++++++++++++++++++++++++++++
 4 files changed, 127 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/images/icon-arrow.svg
 create mode 100644 src/layouts/DocsMenu.vue

diff --git a/src/assets/images/icon-arrow.svg b/src/assets/images/icon-arrow.svg
new file mode 100644
index 000000000..c81a1c528
--- /dev/null
+++ b/src/assets/images/icon-arrow.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg class="icon-arrow" width="11px" height="20px" viewBox="0 0 11 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>arrow_back_ios</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Rounded" transform="translate(-548.000000, -3434.000000)">
+            <g id="Navigation" transform="translate(100.000000, 3378.000000)">
+                <g id="-Round-/-Navigation-/-arrow_back_ios" transform="translate(442.000000, 54.000000)">
+                    <g>
+                        <polygon id="Path" opacity="0.87" points="0 0 24 0 24 24 0 24"></polygon>
+                        <path d="M16.62,2.99 C16.13,2.5 15.34,2.5 14.85,2.99 L6.54,11.3 C6.15,11.69 6.15,12.32 6.54,12.71 L14.85,21.02 C15.34,21.51 16.13,21.51 16.62,21.02 C17.11,20.53 17.11,19.74 16.62,19.25 L9.38,12 L16.63,4.75 C17.11,4.27 17.11,3.47 16.62,2.99 Z" id="🔹-Icon-Color" fill="#1D1D1D"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/style/sidebar.scss b/src/assets/style/sidebar.scss
index a0e735d69..e7cb9c049 100644
--- a/src/assets/style/sidebar.scss
+++ b/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%;
diff --git a/src/layouts/Docs.vue b/src/layouts/Docs.vue
index 6e7eff37c..5c9af023e 100644
--- a/src/layouts/Docs.vue
+++ b/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: () => [] },
diff --git a/src/layouts/DocsMenu.vue b/src/layouts/DocsMenu.vue
new file mode 100644
index 000000000..83c60c57b
--- /dev/null
+++ b/src/layouts/DocsMenu.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="menu-section">
+    <a href="#" class="menu-title" @click="openMenu = !openMenu">
+      <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
+        }
+    }
+}
+</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>

From 1f588def84ff1c8a45f913ce8825877bc5049ff9 Mon Sep 17 00:00:00 2001
From: Dana <dana.ottaviani@gmail.com>
Date: Tue, 6 Oct 2020 14:51:21 -0400
Subject: [PATCH 2/2] feat: set local storage to closed doc menus

---
 src/layouts/DocsMenu.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/layouts/DocsMenu.vue b/src/layouts/DocsMenu.vue
index 83c60c57b..325cd7b31 100644
--- a/src/layouts/DocsMenu.vue
+++ b/src/layouts/DocsMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="menu-section">
-    <a href="#" class="menu-title" @click="openMenu = !openMenu">
+    <a href="#" class="menu-title" @click="toggleMenu">
       <h3 class="menu-item">
         {{ group.title }}
         <MenuArrow :class="{open: openMenu}" />
@@ -39,13 +39,40 @@ export default {
         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;
+  display: block;
 }
 
 h3.menu-item {