From 866e496ad9e909b32dc4064b4b2587e39fd19659 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 18 Apr 2022 17:19:24 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/theme/src/client/clientAppEnhance.ts   | 17 +++++++++++++----
 .../src/client/components/SidebarItems.vue      | 16 ++++++++--------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/theme/src/client/clientAppEnhance.ts b/packages/theme/src/client/clientAppEnhance.ts
index 043473dc..f0613872 100644
--- a/packages/theme/src/client/clientAppEnhance.ts
+++ b/packages/theme/src/client/clientAppEnhance.ts
@@ -1,14 +1,23 @@
 import { defineClientAppEnhance } from '@vuepress/client'
+import type { Component } from 'vue'
+import { h } from 'vue'
+import { useScrollPromise } from './composables'
 
 import './styles/index.scss'
 
-export default defineClientAppEnhance(({ app }) => {
+export default defineClientAppEnhance(({ app, router }) => {
   app.component('NavbarSearch', () => {
-    const SearchComponent =
-      app.component('Docsearch') || app.component('SearchBox')
+    const SearchComponent = (app.component('Docsearch') ||
+      app.component('SearchBox')) as Component
     if (SearchComponent) {
-      return SearchComponent
+      return h(SearchComponent)
     }
     return null
   })
+
+  const scrollBehavior = router.options.scrollBehavior!
+  router.options.scrollBehavior = async (...args) => {
+    await useScrollPromise().wait()
+    return scrollBehavior(...args)
+  }
 })
diff --git a/packages/theme/src/client/components/SidebarItems.vue b/packages/theme/src/client/components/SidebarItems.vue
index f2880306..12ef05d3 100644
--- a/packages/theme/src/client/components/SidebarItems.vue
+++ b/packages/theme/src/client/components/SidebarItems.vue
@@ -53,13 +53,6 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
       :class="{ line: deep === 1 }"
     >
       <p @click.self="sidebarClick(sidebar)">
-        <ArrowRightIcon
-          v-if="deep === 1 && sidebar.children.length"
-          :class="{ open: sidebar.open }"
-          @click.self="sidebarClick(sidebar)"
-        >
-          >
-        </ArrowRightIcon>
         <AutoLink
           v-if="sidebar.link"
           :item="{ text: sidebar.text, link: sidebar.link }"
@@ -67,6 +60,11 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
         <span v-else @click.self="sidebarClick(sidebar)">
           {{ sidebar.text }}
         </span>
+        <ArrowRightIcon
+          v-if="deep === 1 && sidebar.children.length"
+          :class="{ open: sidebar.open }"
+          @click.self="sidebarClick(sidebar)"
+        />
       </p>
       <SidebarItems
         v-show="sidebar.open"
@@ -87,6 +85,7 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
         color: var(--c-text);
         margin: 0.25rem 0;
         font-weight: bold;
+        flex: 1;
 
         &:hover {
           color: var(--c-text-accent);
@@ -99,12 +98,13 @@ const sidebarClick = (sidebar: SidebarListComputed): void => {
       span {
         font-weight: 600;
         margin: 0.25rem 0;
+        flex: 1;
       }
 
       p {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         margin: 0;
         height: 40px;