From f1c776eb4f7172da2df74fcf8bc7cc5cec55fee4 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 12 May 2022 22:11:15 +0800
Subject: [PATCH] =?UTF-8?q?perf(theme):=20=E8=B0=83=E6=95=B4=20sidebar=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=B8=8E=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/src/client/components/Sidebar.vue   | 15 +++++--
 .../src/client/components/SidebarItems.vue    | 44 +++++++++++--------
 .../theme/src/client/components/icons/icon.ts |  2 +-
 .../theme/src/client/styles/vars-dark.scss    |  2 +
 packages/theme/src/client/styles/vars.scss    |  2 +
 5 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/packages/theme/src/client/components/Sidebar.vue b/packages/theme/src/client/components/Sidebar.vue
index 8abeffee..59652129 100644
--- a/packages/theme/src/client/components/Sidebar.vue
+++ b/packages/theme/src/client/components/Sidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import SidebarItems from '@theme-plume/SidebarItems.vue'
 import type { PropType } from 'vue'
-import { watchEffect } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 import type { SidebarOptions } from '../../shared'
 import { useAsideNavbar, useSidebarIndex } from '../composables'
@@ -21,9 +21,16 @@ watchEffect(() => {
   initSidebarList(route.path)
   triggerAsideNavbar(false)
 })
+
+const el = ref<HTMLElement | null>(null)
+onMounted(() => {
+  if (__VUEPRESS_SSR__) return
+  const activeEl = el.value?.querySelector<HTMLElement>('.router-link-active')
+  activeEl && activeEl.scrollIntoView(false)
+})
 </script>
 <template>
-  <aside class="plume-theme-sidebar-wrapper">
+  <aside :ref="(e) => (el = e)" class="plume-theme-sidebar-wrapper">
     <SidebarItems
       v-if="aside.length"
       class="aside-navbar"
@@ -38,10 +45,11 @@ watchEffect(() => {
 .plume-theme-sidebar-wrapper {
   position: sticky;
   top: calc(var(--navbar-height) + 1.25rem);
-  width: 20rem;
+  width: 18rem;
   height: calc(100vh - var(--navbar-height) - 1.25rem);
   border-right: solid 1px var(--c-border);
   font-size: 18px;
+  padding-left: 1.25rem;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--c-brand) var(--c-border);
@@ -57,6 +65,7 @@ watchEffect(() => {
   }
 
   &::-webkit-scrollbar-thumb {
+    border-radius: 3.5px;
     background-color: var(--c-brand);
   }
 
diff --git a/packages/theme/src/client/components/SidebarItems.vue b/packages/theme/src/client/components/SidebarItems.vue
index 4af83197..724bb9ac 100644
--- a/packages/theme/src/client/components/SidebarItems.vue
+++ b/packages/theme/src/client/components/SidebarItems.vue
@@ -53,9 +53,18 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
       :class="{ line: deep === 1 }"
     >
       <p
-        :class="{ 'sidebar-items-title': deep === 1 }"
+        :class="{
+          'sidebar-items-title': deep === 1,
+          'sidebar-items-subtitle':
+            deep > 1 && sidebar.children && sidebar.children.length,
+        }"
         @click.self="sidebarClick(sidebar)"
       >
+        <ArrowRightIcon
+          v-if="deep === 1 && sidebar.children && sidebar.children.length"
+          :class="{ open: sidebar.open }"
+          @click.self="sidebarClick(sidebar)"
+        />
         <AutoLink
           v-if="sidebar.link"
           :item="{ text: sidebar.text, link: sidebar.link }"
@@ -63,11 +72,6 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
         <span v-else @click.self="sidebarClick(sidebar)">
           {{ sidebar.text }}
         </span>
-        <ArrowRightIcon
-          v-if="deep === 1 && sidebar.children && sidebar.children.length"
-          :class="{ open: sidebar.open }"
-          @click.self="sidebarClick(sidebar)"
-        />
       </p>
       <SidebarItems
         v-if="sidebar.children && sidebar.children.length"
@@ -86,9 +90,9 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
     padding: 0;
     li {
       a {
-        color: var(--c-text);
+        color: var(--c-sidebar-text);
         margin: 0.25rem 0;
-        font-weight: bold;
+        font-weight: 500;
         flex: 1;
 
         &:hover {
@@ -110,18 +114,21 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
       }
 
       p.sidebar-items-title {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+        position: relative;
         margin: 0;
         height: 40px;
+        line-height: 40px;
+        cursor: pointer;
 
         .arrow-right-icon {
+          position: absolute;
+          left: -1.5rem;
+          top: 8px;
           width: 20px;
           height: 20px;
-          margin-right: 0.75rem;
           transform: rotate(0);
           transition: transform var(--t-color);
+          color: var(--c-text-quote);
 
           &.open {
             transform: rotate(90deg);
@@ -129,8 +136,13 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
         }
       }
 
+      p.sidebar-items-subtitle {
+        color: var(--c-text);
+        font-weight: bolder;
+      }
+
       &.line {
-        border-bottom: solid 1px var(--c-border);
+        // border-bottom: solid 1px var(--c-border);
 
         &:last-child {
           border-bottom: none;
@@ -139,12 +151,6 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
     }
     .sidebar-items {
       font-size: 16px;
-      padding-left: 1.25rem;
-      padding-bottom: 0.75rem;
-
-      li a {
-        font-weight: normal;
-      }
     }
   }
 }
diff --git a/packages/theme/src/client/components/icons/icon.ts b/packages/theme/src/client/components/icons/icon.ts
index 9cf540dd..fe1b07d1 100644
--- a/packages/theme/src/client/components/icons/icon.ts
+++ b/packages/theme/src/client/components/icons/icon.ts
@@ -60,7 +60,7 @@ TopIcon.displayName = 'TopIcon'
 export const ArrowRightIcon: FunctionalComponent = () =>
   h(IconBase, { name: 'arrow-right', viewBox: '0 0  1024 1024' }, () =>
     h('path', {
-      d: 'M761.056 532.128c0.512-0.992 1.344-1.824 1.792-2.848 8.8-18.304 5.92-40.704-9.664-55.424L399.936 139.744c-19.264-18.208-49.632-17.344-67.872 1.888-18.208 19.264-17.376 49.632 1.888 67.872l316.96 299.84-315.712 304.288c-19.072 18.4-19.648 48.768-1.248 67.872 9.408 9.792 21.984 14.688 34.56 14.688 12 0 24-4.48 33.312-13.44l350.048-337.376c0.672-0.672 0.928-1.6 1.6-2.304 0.512-0.48 1.056-0.832 1.568-1.344C757.76 538.88 759.2 535.392 761.056 532.128z',
+      d: 'M709.546667 560.256c-2.389333 2.474667-11.52 13.056-19.968 21.76-49.706667 54.741333-179.370667 144.341333-247.253334 171.690667-10.325333 4.394667-36.394667 13.696-50.304 14.293333-13.354667 0-26.026667-3.072-38.186666-9.301333a79.957333 79.957333 0 0 1-33.92-38.570667c-4.266667-11.221333-10.922667-44.8-10.922667-45.397333-6.656-36.736-10.325333-96.426667-10.325333-162.389334 0-62.848 3.669333-120.106667 9.088-157.397333 0.64-0.597333 7.253333-42.325333 14.549333-56.618667A76.16 76.16 0 0 1 389.632 256h2.389333c18.176 0.64 56.362667 16.853333 56.362667 17.450667 64.213333 27.392 190.890667 112.597333 241.834667 169.216 0 0 14.336 14.549333 20.565333 23.637333 9.728 13.056 14.549333 29.226667 14.549333 45.397333 0 18.048-5.461333 34.858667-15.786666 48.554667z',
     })
   )
 ArrowRightIcon.displayName = 'ArrowRightIcon'
diff --git a/packages/theme/src/client/styles/vars-dark.scss b/packages/theme/src/client/styles/vars-dark.scss
index f7458100..fd18684d 100644
--- a/packages/theme/src/client/styles/vars-dark.scss
+++ b/packages/theme/src/client/styles/vars-dark.scss
@@ -13,6 +13,8 @@ html.dark {
   --c-text-lighter: #8b94a8;
   --c-text-lightest: #8094a8;
 
+  --c-sidebar-text: rgba(195, 195, 195, 0.7);
+
   --c-border: #3e4c5a;
   --c-border-dark: #34404c;
 
diff --git a/packages/theme/src/client/styles/vars.scss b/packages/theme/src/client/styles/vars.scss
index 37717c64..4003fa8b 100644
--- a/packages/theme/src/client/styles/vars.scss
+++ b/packages/theme/src/client/styles/vars.scss
@@ -20,6 +20,8 @@
   --c-text-lightest: #6a8bad;
   --c-text-quote: #999;
 
+  --c-sidebar-text: rgba(60, 60, 60, 0.7);
+
   // border colors
   --c-border: #eaecef;
   --c-border-dark: #dfe2e5;