feat: update sidebar ui (#257)

* update sidebar ui

* fix dark theme

* Update docs

* Update style

* Refactor

* Remove unused style

* Update style

Author: saltysugar

src/components/PageToc.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="PageToc"
+    v-if="
+      !$store.state.fetchingFile &&
+        link.toc !== false &&
+        link.link === $route.path &&
+        $store.state.page.headings &&
+        $store.state.page.headings.length > 0
+    "
+  >
+    <router-link
+      class="PageTocHeading"
+      :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>
+
+<script>
+export default {
+  props: {
+    link: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.PageToc {
+  border-left: 1px solid var(--border-color);
+  margin-left: 16px;
+  margin-top: 10px;
+}
+
+.PageTocHeading {
+  display: flex;
+  line-height: 1;
+  position: relative;
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  &[data-level='2'] {
+    margin-left: 16px;
+  }
+
+  &.router-link-exact-active {
+    font-weight: bold;
+    color: var(--sidebar-link-active-color);
+  }
+}
+</style>

src/components/Sidebar.vue

@@ -14,8 +14,8 @@
         v-for="(item, index) in $store.getters.sidebar"
         :key="index"
         :item="item"
-        :open="currentOpenIndex === index"
-        @toggle="openSidebar(index)"
+        :open="openItems.indexOf(index) !== -1"
+        @toggle="toggleItem(index)"
       />
     </div>
 
@@ -35,23 +35,33 @@ export default {
   },
   data() {
     return {
-      currentOpenIndex: 0
+      openItems: []
     }
   },
   watch: {
     '$route.path': {
       handler() {
-        this.currentOpenIndex = this.getCurrentIndex(
+        const index = this.getCurrentIndex(
           this.$route.path,
           this.$store.getters.sidebar
         )
+        this.openItem(index)
       },
       immediate: true
     }
   },
   methods: {
-    openSidebar(index) {
-      this.currentOpenIndex = this.currentOpenIndex === index ? -1 : index
+    openItem(index) {
+      if (this.openItems.indexOf(index) === -1) {
+        this.openItems.push(index)
+      }
+    },
+    toggleItem(index) {
+      if (this.openItems.indexOf(index) === -1) {
+        this.openItems.push(index)
+      } else {
+        this.openItems = this.openItems.filter(v => v !== index)
+      }
     },
     getCurrentIndex(currentPath, sidebarItems) {
       for (let idx = 0; idx < sidebarItems.length; idx++) {
@@ -63,7 +73,7 @@ export default {
           return idx
         }
       }
-      return -1
+      return 0
     },
     getChildren(item) {
       return item.children || item.links || []

src/components/SidebarItem.vue

@@ -2,60 +2,66 @@
   <div :class="['SidebarItem', item.title && 'hasTitle']">
     <div
       class="ItemTitle"
-      v-if="item.title"
-      :collapsable="item.collapsable"
-      :class="{collapsable: item.collapsable}"
+      :class="{collapsable: item.collapsable !== false}"
+      v-if="item.title && children"
       @click="$emit('toggle')"
     >
-      {{ item.title }}
-      <span
-        v-if="item.collapsable"
-        class="arrow"
-        :class="open ? 'down' : 'right'"
-      ></span>
+      <span v-if="item.collapsable !== false" class="arrow" :class="{open}">
+        <svg
+          width="6"
+          height="10"
+          viewBox="0 0 6 10"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.4 8.56L4.67 5M1.4 1.23L4.66 4.7"
+            stroke="currentColor"
+            stroke-linecap="square"
+          />
+        </svg>
+      </span>
+      <span>{{ item.title }}</span>
+    </div>
+    <uni-link
+      class="ItemLink"
+      :class="{active: $route.path === item.link}"
+      v-if="item.title && item.link"
+      :to="item.link"
+      >{{ item.title }}</uni-link
+    >
+    <div class="ItemLinkToc" v-if="item.title && item.link">
+      <PageToc :link="item" />
     </div>
-    <template v-if="!item.collapsable || open">
-      <template v-for="(link, index) of children">
+
+    <div
+      class="ItemChildren"
+      v-if="children && (open || item.collapsable === false)"
+    >
+      <div class="ItemChild" v-for="(link, index) of children" :key="index">
         <uni-link
-          class="ItemLink"
-          :key="index"
+          class="ItemChildLink"
+          :class="{active: $route.path === link.link}"
           :to="link.link"
           :openInNewTab="link.openInNewTab"
           :prefetchFiles="getPrefetchFiles(link.link)"
           >{{ link.title }}</uni-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>
+        <PageToc :link="link" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import {isExternalLink, getFileUrl, getFilenameByPath} from '../utils'
 import UniLink from './UniLink.vue'
+import PageToc from './PageToc.vue'
 
 export default {
   components: {
-    UniLink
+    UniLink,
+    PageToc
   },
   props: {
     item: {
@@ -75,7 +81,7 @@ export default {
   },
   computed: {
     children() {
-      return this.item.children || this.item.links || []
+      return this.item.children || this.item.links
     }
   },
   methods: {
@@ -105,66 +111,81 @@ export default {
 <style scoped>
 .SidebarItem {
   &:not(:last-child) {
-    margin-bottom: 1.2rem;
+    margin-bottom: 10px;
   }
 
-  &.hasTitle {
-    & .ItemLink {
-      font-size: 0.9rem;
-    }
-  }
+  font-size: 0.875rem;
 
-  &.hasTitle >>> .TocHeading {
-    font-size: 0.9rem;
+  & a {
+    color: var(--sidebar-link-color);
+
+    &:hover {
+      color: var(--sidebar-link-active-color);
+    }
   }
 }
 
 .ItemTitle {
-  font-size: 1rem;
   padding: 0 20px;
   margin-bottom: 10px;
   position: relative;
-  color: var(--sidebar-section-title-color);
-  text-transform: uppercase;
+  color: var(--sidebar-link-color);
+  user-select: none;
+  font-size: 0;
 
-  &.collapsable {
-    &:hover {
-      cursor: pointer;
-    }
+  &.collapsable:hover {
+    cursor: pointer;
+    color: var(--sidebar-link-active-color);
+  }
+
+  & span {
+    font-size: 0.9rem;
   }
 }
 
 .ItemLink {
-  padding: 2px 20px;
+  margin: 0 20px;
   display: flex;
-  font-size: 1.1rem;
-  position: relative;
+  align-items: center;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: var(--sidebar-link-arrow-color);
+    margin-right: 8px;
+  }
 
   &.active {
+    color: var(--sidebar-link-active-color);
     font-weight: bold;
   }
 }
 
-.TocHeading {
-  display: flex;
-  line-height: 1.4;
-  margin: 5px 0;
-  position: relative;
+.ItemLinkToc {
+  margin: 0 8px;
+}
 
-  &[data-level='2'] {
-    padding: 0 20px;
-    &:before {
-      content: '-';
-      margin-right: 5px;
-      color: #979797;
-    }
-  }
+.ItemChildren {
+  border-left: 1px solid var(--border-color);
+  margin: 0 20px;
+}
 
-  &[data-level='3'] {
-    padding: 0 20px 0 40px;
+.ItemChild {
+  &:not(:last-child) {
+    margin-bottom: 10px;
   }
+}
+
+.ItemChildLink {
+  padding-left: 16px;
+  display: flex;
+  position: relative;
+  line-height: 1;
 
-  &.router-link-exact-active {
+  &.active {
     font-weight: bold;
   }
 }
@@ -175,20 +196,18 @@ a {
 }
 
 .arrow {
+  width: 16px;
   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;
+  color: var(--sidebar-link-arrow-color);
+
+  & svg {
+    transition: all 0.15s ease;
   }
 
-  &.down {
-    border-top: 6px solid #ccc;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
+  &.open {
+    & svg {
+      transform: rotate(90deg);
+    }
   }
 }
 </style>

src/css/main.css

@@ -2,6 +2,8 @@ body {
   margin: 0;
   color: var(--text-color);
   background: var(--page-background);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
   font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }