From 4ad0d8d3c216e5333f199a29ea37c2c51c8e4c9b Mon Sep 17 00:00:00 2001
From: Thang Minh Vu <ittus@users.noreply.github.com>
Date: Sat, 11 May 2019 17:44:26 +0900
Subject: [PATCH] feat: toggle sidebar children (#223)

* Create SidebarItem component

* Add collapsable attribute

* Add arrow icon

* Update document

* Hide collapsable by default

* Automatically open collapsed item by path

* Handle open state in parent

* Update index.js

* Update SidebarItem.vue
---
 src/components/Sidebar.vue             | 162 +++++---------------
 src/components/SidebarItem.vue         | 195 +++++++++++++++++++++++++
 website/docs/guide/customization.md    |   1 +
 website/docs/options.md                |   1 +
 website/docs/zh/guide/customization.md |   1 +
 website/index.js                       |   3 +
 6 files changed, 239 insertions(+), 124 deletions(-)
 create mode 100644 src/components/SidebarItem.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 6304153c..4affe906 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="Sidebar" :class="{isShown: $store.state.showSidebar}">
     <InjectedComponents position="sidebar:start" />
-
     <InjectedComponents position="mobile-sidebar:start" />
 
     <HeaderNav
@@ -11,56 +10,13 @@
     />
 
     <div class="SidebarItems">
-      <div
+      <sidebar-item
         v-for="(item, index) in $store.getters.sidebar"
-        :class="['SidebarItem', item.title && 'hasTitle']"
         :key="index"
-      >
-        <div class="ItemTitle" v-if="item.title">{{ item.title }}</div>
-        <template v-for="(link, index) of getChildren(item)">
-          <a
-            v-if="isExternalLink(link.link)"
-            :key="index"
-            :href="link.link"
-            class="ItemLink"
-            target="_blank"
-          >
-            {{ link.title }}
-            <external-link-icon />
-          </a>
-          <router-link
-            v-else
-            :key="index"
-            :to="link.link"
-            :prefetch-files="getPrefetchFiles(link.link)"
-            class="ItemLink"
-            :class="{active: $route.path === link.link}"
-          >
-            {{ link.title }}
-          </router-link>
-          <div
-            class="LinkToc"
-            v-if="
-              !$store.state.fetchingFile &&
-                link.toc !== false &&
-                link.link === $route.path &&
-                $store.state.page.headings &&
-                $store.state.page.headings.length > 0
-            "
-            :key="`toc-${index}`"
-          >
-            <router-link
-              class="TocHeading"
-              :to="{hash: heading.slug}"
-              :data-level="heading.level"
-              v-for="heading in $store.state.page.headings"
-              :key="heading.slug"
-              v-html="heading.text"
-            >
-            </router-link>
-          </div>
-        </template>
-      </div>
+        :item="item"
+        :open="currentOpenIndex === index"
+        @toggle="openSidebar(index)"
+      />
     </div>
 
     <InjectedComponents position="sidebar:end" />
@@ -69,29 +25,48 @@
 </template>
 
 <script>
-import {isExternalLink, getFileUrl, getFilenameByPath} from '../utils'
 import HeaderNav from './HeaderNav.vue'
+import SidebarItem from './SidebarItem.vue'
 
 export default {
   components: {
-    HeaderNav
+    HeaderNav,
+    SidebarItem
+  },
+  data() {
+    return {
+      currentOpenIndex: 0
+    }
+  },
+  watch: {
+    '$route.path': {
+      handler() {
+        this.currentOpenIndex = this.getCurrentIndex(
+          this.$route.path,
+          this.$store.getters.sidebar
+        )
+      },
+      immediate: true
+    }
   },
-
   methods: {
-    isExternalLink,
-    getPrefetchFiles(path) {
-      const {sourcePath, routes} = this.$store.getters.config
-      if (routes && routes[path]) {
-        const {file} = routes[path]
-        return file ? [file] : []
+    openSidebar(index) {
+      this.currentOpenIndex = this.currentOpenIndex === index ? -1 : index
+    },
+    getCurrentIndex(currentPath, sidebarItems) {
+      for (let idx = 0; idx < sidebarItems.length; idx++) {
+        if (
+          this.getChildren(sidebarItems[idx]).some(
+            child => child.link === currentPath
+          )
+        ) {
+          return idx
+        }
       }
-      const filename = getFilenameByPath(path)
-      const fileUrl = getFileUrl(sourcePath, filename)
-      return fileUrl ? [fileUrl] : []
+      return -1
     },
     getChildren(item) {
-      // backward compabillity
-      return item.children || item.links
+      return item.children || item.links || []
     }
   }
 }
@@ -130,65 +105,4 @@ export default {
     display: none;
   }
 }
-
-.SidebarItem {
-  &:not(:last-child) {
-    padding-bottom: 1.2rem;
-    margin-bottom: 1.2rem;
-  }
-
-  &.hasTitle {
-    & .ItemLink {
-      font-size: 0.9rem;
-    }
-  }
-
-  &.hasTitle >>> .TocHeading {
-    font-size: 0.9rem;
-  }
-}
-
-.ItemTitle {
-  font-size: 1rem;
-  padding: 0 20px;
-  margin-bottom: 10px;
-  position: relative;
-  color: var(--sidebar-section-title-color);
-  text-transform: uppercase;
-}
-
-.ItemLink {
-  padding: 2px 20px;
-  display: flex;
-  font-size: 1.1rem;
-  position: relative;
-
-  &.active {
-    font-weight: bold;
-  }
-}
-
-.TocHeading {
-  display: flex;
-  line-height: 1.4;
-  margin: 5px 0;
-  position: relative;
-
-  &[data-level='2'] {
-    padding: 0 20px;
-    &:before {
-      content: '-';
-      margin-right: 5px;
-      color: #979797;
-    }
-  }
-
-  &[data-level='3'] {
-    padding: 0 20px 0 40px;
-  }
-
-  &.router-link-exact-active {
-    font-weight: bold;
-  }
-}
 </style>
diff --git a/src/components/SidebarItem.vue b/src/components/SidebarItem.vue
new file mode 100644
index 00000000..a722905a
--- /dev/null
+++ b/src/components/SidebarItem.vue
@@ -0,0 +1,195 @@
+<template>
+  <div :class="['SidebarItem', item.title && 'hasTitle']">
+    <div
+      class="ItemTitle"
+      v-if="item.title"
+      :collapsable="item.collapsable"
+      :class="{collapsable: item.collapsable}"
+      @click="$emit('toggle')"
+    >
+      {{ item.title }}
+      <span
+        v-if="item.collapsable"
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      ></span>
+    </div>
+    <template v-if="!item.collapsable || open">
+      <template v-for="(link, index) of children">
+        <a
+          v-if="isExternalLink(link.link)"
+          :key="index"
+          :href="link.link"
+          class="ItemLink"
+          target="_blank"
+        >
+          {{ link.title }}
+          <external-link-icon />
+        </a>
+        <router-link
+          v-else
+          :key="index"
+          :to="link.link"
+          :prefetch-files="getPrefetchFiles(link.link)"
+          class="ItemLink"
+          :class="{active: $route.path === link.link}"
+        >
+          {{ link.title }}
+        </router-link>
+        <div
+          class="LinkToc"
+          v-if="
+            !$store.state.fetchingFile &&
+              link.toc !== false &&
+              link.link === $route.path &&
+              $store.state.page.headings &&
+              $store.state.page.headings.length > 0
+          "
+          :key="`toc-${index}`"
+        >
+          <router-link
+            class="TocHeading"
+            :to="{hash: heading.slug}"
+            :data-level="heading.level"
+            v-for="heading in $store.state.page.headings"
+            :key="heading.slug"
+            v-html="heading.text"
+          >
+          </router-link>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+import {isExternalLink, getFileUrl, getFilenameByPath} from '../utils'
+
+export default {
+  props: {
+    item: {
+      type: Object,
+      required: true,
+      default() {
+        return {}
+      }
+    },
+    open: {
+      type: Boolean,
+      required: false,
+      default() {
+        return true
+      }
+    }
+  },
+  computed: {
+    children() {
+      return this.item.children || this.item.links || []
+    }
+  },
+  methods: {
+    isExternalLink,
+    getPrefetchFiles(path) {
+      const {sourcePath, routes} = this.$store.getters.config
+      if (routes && routes[path]) {
+        const {file} = routes[path]
+        return file ? [file] : []
+      }
+      const filename = getFilenameByPath(path)
+      const fileUrl = getFileUrl(sourcePath, filename)
+      return fileUrl ? [fileUrl] : []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.SidebarItem {
+  &:not(:last-child) {
+    margin-bottom: 1.2rem;
+  }
+
+  &.hasTitle {
+    & .ItemLink {
+      font-size: 0.9rem;
+    }
+  }
+
+  &.hasTitle >>> .TocHeading {
+    font-size: 0.9rem;
+  }
+}
+
+.ItemTitle {
+  font-size: 1rem;
+  padding: 0 20px;
+  margin-bottom: 10px;
+  position: relative;
+  color: var(--sidebar-section-title-color);
+  text-transform: uppercase;
+
+  &.collapsable {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.ItemLink {
+  padding: 2px 20px;
+  display: flex;
+  font-size: 1.1rem;
+  position: relative;
+
+  &.active {
+    font-weight: bold;
+  }
+}
+
+.TocHeading {
+  display: flex;
+  line-height: 1.4;
+  margin: 5px 0;
+  position: relative;
+
+  &[data-level='2'] {
+    padding: 0 20px;
+    &:before {
+      content: '-';
+      margin-right: 5px;
+      color: #979797;
+    }
+  }
+
+  &[data-level='3'] {
+    padding: 0 20px 0 40px;
+  }
+
+  &.router-link-exact-active {
+    font-weight: bold;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: var(--text-color);
+}
+
+.arrow {
+  display: inline-block;
+  position: relative;
+  top: -0.1em;
+  left: 0.5em;
+  &.right {
+    border-left: 6px solid #ccc;
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+  }
+
+  &.down {
+    border-top: 6px solid #ccc;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+  }
+}
+</style>
diff --git a/website/docs/guide/customization.md b/website/docs/guide/customization.md
index 82db7a4f..75d92459 100644
--- a/website/docs/guide/customization.md
+++ b/website/docs/guide/customization.md
@@ -50,6 +50,7 @@ new Docute({
     // A sidebar item, with child links
     {
       title: 'Guide', // Optional
+      collapsable: true, // Optional
       children: [
         {
           title: 'Getting Started',
diff --git a/website/docs/options.md b/website/docs/options.md
index 50afac0f..7cb5a4b6 100644
--- a/website/docs/options.md
+++ b/website/docs/options.md
@@ -49,6 +49,7 @@ An array of navigation items to display at sidebar.
 ```ts
 interface SidebarItem {
   title?: string
+  collapsable?: boolean
   children: Array<SidebarItemLink>
 }
 
diff --git a/website/docs/zh/guide/customization.md b/website/docs/zh/guide/customization.md
index dc283758..dc671c3b 100644
--- a/website/docs/zh/guide/customization.md
+++ b/website/docs/zh/guide/customization.md
@@ -47,6 +47,7 @@ new Docute({
   sidebar: [
     {
       title: 'Guide', // 可选的
+      collapsable: true, // 可选的
       children: [
         {
           title: 'Getting Started',
diff --git a/website/index.js b/website/index.js
index 6ee0ce14..93f84c0d 100644
--- a/website/index.js
+++ b/website/index.js
@@ -135,6 +135,7 @@ new Docute({
     },
     {
       title: 'Advanced',
+      collapsable: true,
       children: [
         {
           title: 'Use With Bundlers',
@@ -148,6 +149,7 @@ new Docute({
     },
     {
       title: 'References',
+      collapsable: true,
       children: [
         {
           title: 'Options',
@@ -165,6 +167,7 @@ new Docute({
     },
     {
       title: 'Misc',
+      collapsable: true,
       children: [
         {
           title: 'Credits',