From 1db07c4215c9d26367f8a2f11fa3c20d9ac9e985 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 23 Dec 2023 01:49:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E9=A1=B5=E5=86=85headers=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/client/components/DocOutlineItem.vue  |  57 ++++++
 .../theme/src/client/components/LocalNav.vue  |  55 +++++-
 .../components/LocalNavOutlineDropdown.vue    | 163 ++++++++++++++++++
 3 files changed, 267 insertions(+), 8 deletions(-)
 create mode 100644 packages/theme/src/client/components/DocOutlineItem.vue
 create mode 100644 packages/theme/src/client/components/LocalNavOutlineDropdown.vue

diff --git a/packages/theme/src/client/components/DocOutlineItem.vue b/packages/theme/src/client/components/DocOutlineItem.vue
new file mode 100644
index 00000000..0cf328a3
--- /dev/null
+++ b/packages/theme/src/client/components/DocOutlineItem.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { PageHeader } from '@vuepress/client'
+
+defineProps<{
+  headers: PageHeader[]
+  root?: boolean
+}>()
+
+function onClick({ target: el }: Event) {
+  const id = (el as HTMLAnchorElement).href!.split('#')[1]
+  const heading = document.getElementById(decodeURIComponent(id))
+  heading?.focus({ preventScroll: true })
+}
+</script>
+
+<template>
+  <ul :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title } in headers" :key="link">
+      <a class="outline-link" :href="link" :title="title" @click="onClick">{{ title }}</a>
+      <template v-if="children?.length">
+        <DocOutlineItem :headers="children" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.root {
+  position: relative;
+  z-index: 1;
+}
+
+.nested {
+  padding-left: 16px;
+}
+
+.outline-link {
+  display: block;
+  line-height: 28px;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+  font-weight: 400;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.outline-link.nested {
+  padding-left: 13px;
+}
+</style>
diff --git a/packages/theme/src/client/components/LocalNav.vue b/packages/theme/src/client/components/LocalNav.vue
index 6fe607d9..ff5a8e5b 100644
--- a/packages/theme/src/client/components/LocalNav.vue
+++ b/packages/theme/src/client/components/LocalNav.vue
@@ -1,6 +1,13 @@
 <script lang="ts" setup>
-import { useSidebar } from '../composables/index.js'
+import { usePageData } from '@vuepress/client'
+import { useWindowScroll } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+import type {
+  PlumeThemePageData,
+} from '../../shared/index.js'
+import { useSidebar, useThemeLocaleData } from '../composables/index.js'
 import IconAlignLeft from './icons/IconAlignLeft.vue'
+import LocalNavOutlineDropdown from './LocalNavOutlineDropdown.vue'
 
 defineProps<{
   open: boolean
@@ -8,15 +15,39 @@ defineProps<{
 
 defineEmits<(e: 'open-menu') => void>()
 
-const { hasSidebar } = useSidebar()
+const page = usePageData<PlumeThemePageData>()
+const themeData = useThemeLocaleData()
+
+const { hasSidebar } = useSidebar()
+const { y } = useWindowScroll()
+
+const navHeight = ref(0)
+
+const headers = computed(() => page.value.headers)
+const empty = computed(() => {
+  return headers.value.length === 0 && !hasSidebar.value
+})
+
+onMounted(() => {
+  navHeight.value = parseInt(
+    getComputedStyle(document.documentElement).getPropertyValue(
+      '--vp-nav-height'
+    )
+  )
+})
+
+const classes = computed(() => {
+  return {
+    'local-nav': true,
+    fixed: empty.value,
+    'reached-top': y.value >= navHeight.value
+  }
+})
 
-function scrollToTop() {
-  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
-}
 </script>
 
 <template>
-  <div v-if="hasSidebar" class="local-nav">
+  <div v-if="hasSidebar && (!empty || y >= navHeight)" :class="classes">
     <button
       class="menu"
       :aria-expanded="open"
@@ -24,10 +55,10 @@ function scrollToTop() {
       @click="$emit('open-menu')"
     >
       <IconAlignLeft class="menu-icon" />
-      <span class="menu-text"> Menu </span>
+      <span class="menu-text"> {{ themeData.sidebarMenuLabel || 'Menu' }} </span>
     </button>
 
-    <a class="top-link" href="#" @click="scrollToTop"> Return to top </a>
+    <LocalNavOutlineDropdown :headers="headers" :nav-height="navHeight" />
   </div>
 </template>
 
@@ -48,6 +79,14 @@ function scrollToTop() {
   transition: border-color 0.5s, background-color 0.5s;
 }
 
+.local-nav.fixed {
+  position: fixed;
+}
+
+.local-nav.reached-top {
+  border-top-color: transparent;
+}
+
 @media (min-width: 960px) {
   .local-nav {
     display: none;
diff --git a/packages/theme/src/client/components/LocalNavOutlineDropdown.vue b/packages/theme/src/client/components/LocalNavOutlineDropdown.vue
new file mode 100644
index 00000000..765cead7
--- /dev/null
+++ b/packages/theme/src/client/components/LocalNavOutlineDropdown.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type {PageHeader} from '@vuepress/client';
+import {onClickOutside} from '@vueuse/core'
+import { nextTick, ref, watch } from 'vue'
+import { useThemeLocaleData } from '../composables/index.js'
+import DocOutlineItem from './DocOutlineItem.vue'
+import IconChevronRight from './icons/IconChevronRight.vue'
+
+const props = defineProps<{
+  headers: PageHeader[]
+  navHeight: number
+}>()
+
+const theme = useThemeLocaleData()
+const open = ref(false)
+const vh = ref(0)
+const items = ref<HTMLDivElement>()
+const btn = ref<HTMLButtonElement>()
+
+watch(() => props.headers, () => {
+  open.value = false
+})
+
+onClickOutside(items, () => {
+  open.value = false
+}, { ignore: [btn] })
+
+function toggle() {
+  open.value = !open.value
+  vh.value = window.innerHeight + Math.min(window.scrollY - props.navHeight, 0)
+}
+
+function onItemClick(e: Event) {
+  if ((e.target as HTMLElement).classList.contains('outline-link')) {
+    // disable animation on hash navigation when page jumps
+    if (items.value) {
+      items.value.style.transition = 'none'
+    }
+    nextTick(() => {
+      open.value = false
+    })
+  }
+}
+
+function scrollToTop() {
+  open.value = false
+  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+}
+</script>
+
+<template>
+  <div class="local-nav-outline-dropdown" :style="{ '--vp-vh': vh + 'px' }">
+    <button v-if="headers.length > 0" ref="btn" :class="{ open }" @click="toggle">
+      {{ 'On this page' }}
+      <IconChevronRight class="icon" />
+    </button>
+    <button v-else @click="scrollToTop">
+      {{ theme.returnToTopLabel || 'Return to top' }}
+    </button>
+    <Transition name="flyout">
+      <div v-if="open" ref="items" class="items" @click="onItemClick">
+        <div class="header">
+          <a class="top-link" href="#" @click="scrollToTop">
+            {{ theme.returnToTopLabel || 'Return to top' }}
+          </a>
+        </div>
+        <div class="outline">
+          <DocOutlineItem :headers="headers" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.local-nav-outline-dropdown {
+  padding: 12px 20px 11px;
+}
+
+.local-nav-outline-dropdown button {
+  display: block;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 24px;
+  color: var(--vp-c-text-2);
+  transition: color 0.5s;
+  position: relative;
+}
+
+.local-nav-outline-dropdown button:hover {
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.local-nav-outline-dropdown button.open {
+  color: var(--vp-c-text-1);
+}
+
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 2px;
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+:deep(.outline-link) {
+  font-size: 14px;
+  padding: 2px 0;
+}
+
+.open>.icon {
+  transform: rotate(90deg);
+}
+
+.items {
+  position: absolute;
+  top: 64px;
+  right: 16px;
+  left: 16px;
+  display: grid;
+  /* gap: 1px; */
+  border: 1px solid var(--vp-c-border);
+  border-radius: 8px;
+  background-color: var(--vp-c-gutter);
+  max-height: calc(var(--vp-vh, 100vh) - 86px);
+  overflow: hidden auto;
+  box-shadow: var(--vp-shadow-3);
+}
+
+.header {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.top-link {
+  display: block;
+  padding: 0 16px;
+  line-height: 48px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.outline {
+  padding: 8px 0;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.flyout-enter-active {
+  transition: all .2s ease-out;
+}
+
+.flyout-leave-active {
+  transition: all .15s ease-in;
+}
+
+.flyout-enter-from,
+.flyout-leave-to {
+  opacity: 0;
+  transform: translateY(-16px);
+}
+</style>