feat: update sidebar ui (#257)

* update sidebar ui * fix dark theme * Update docs * Update style * Refactor * Remove unused style * Update style
egoist · Jul 31, 2019 · cec2af2 · cec2af2
1 parent 94b8168
commit cec2af2
Show file tree

Hide file tree

Showing 11 changed files with 236 additions and 128 deletions.
diff --git a/src/components/PageToc.vue b/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>
diff --git a/src/components/Sidebar.vue b/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 || []

diff --git a/src/components/SidebarItem.vue b/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>
diff --git a/src/css/main.css b/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;
 }