valaxy-theme-press 0.15.9 → 0.15.11

package/client/config.ts

@@ -1 +1 @@
-export const targetPadding = -40
+export const targetPadding = 0

package/components/PressArticle.vue

@@ -53,7 +53,7 @@ const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.valu
     >
       <PressAuthor v-if="frontmatter.author" :frontmatter="frontmatter" />
       <div class="divide-y divide-gray-200 xl:pb-0 xl:col-span-8 xl:row-span-2">
-        <router-view />
+        <RouterView />
       </div>
 
       <footer
@@ -70,9 +70,9 @@ const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.valu
             Next Article
           </h2>
           <div class="link">
-            <router-link :to="nextPost.href">
+            <RouterLink :to="nextPost.href">
               {{ nextPost.title }}
-            </router-link>
+            </RouterLink>
           </div>
         </div>
         <div v-if="prevPost && prevPost.href" class="py-8">
@@ -80,15 +80,15 @@ const localeTitle = computed(() => getLocaleTitle(locale.value, frontmatter.valu
             Previous Article
           </h2>
           <div class="link">
-            <router-link :to="prevPost.href">
+            <RouterLink :to="prevPost.href">
               {{ prevPost.title }}
-            </router-link>
+            </RouterLink>
           </div>
         </div>
         <div class="pt-8">
-          <router-link class="link" to="/">
+          <RouterLink class="link" to="/">
             ← Back to Home
-          </router-link>
+          </RouterLink>
         </div>
       </footer>
     </div>

package/components/PressArticleCard.vue

@@ -12,9 +12,9 @@ defineProps<{
     <div class="space-y-5 xl:col-span-3">
       <div class="space-y-6">
         <h2 class="text-2xl leading-8 font-bold tracking-tight">
-          <router-link class="text-gray-900" :to="post.path || ''">
+          <RouterLink class="text-gray-900" :to="post.path || ''">
             {{ post.title }}
-          </router-link>
+          </RouterLink>
         </h2>
         <div
           v-if="post.excerpt"
@@ -23,9 +23,9 @@ defineProps<{
         />
       </div>
       <div class="text-base leading-6 font-medium">
-        <router-link class="link" aria-label="read more" :to="post.path || ''">
+        <RouterLink class="link" aria-label="read more" :to="post.path || ''">
           Read more →
-        </router-link>
+        </RouterLink>
       </div>
     </div>
   </article>

package/components/PressBackdrop.vue

@@ -5,9 +5,9 @@ defineProps<{
 </script>
 
 <template>
-  <transition name="fade">
+  <Transition name="fade">
     <div v-if="show" class="press-backdrop" />
-  </transition>
+  </Transition>
 </template>
 
 <style scoped lang="scss">

package/components/PressCategory.vue

@@ -32,7 +32,8 @@ function getTitle(post: Post | any) {
     v-if="category.total"
     p="t-2"
     w="full" border="t t-$pr-c-divider-light"
-    class="category-list-item inline-flex items-center justify-between"
+    class="press-sidebar-item category-list-item inline-flex items-center justify-between"
+    text-14px
     tabindex="0"
   >
     <span class="category-name" font="bold" m="l-1" @click="displayCategory ? displayCategory(category.name) : null">
@@ -41,7 +42,9 @@ function getTitle(post: Post | any) {
     </span>
     <button
       tabindex="0" role="button" aria-label="toggle section"
-      class="folder-action inline-flex cursor-pointer" opacity="50" @click="collapsable = !collapsable"
+      class="caret folder-action inline-flex cursor-pointer"
+      text-base
+      @click="collapsable = !collapsable"
     >
       <div v-if="collapsable" i-ri-folder-add-line />
       <div v-else i-ri-folder-reduce-line />
@@ -51,9 +54,9 @@ function getTitle(post: Post | any) {
   <ul v-if="!collapsable">
     <li v-for="categoryItem, i in category.children" :key="i" class="post-list-item">
       <template v-if="!isCategoryList(categoryItem)">
-        <router-link v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center" active-class="active">
+        <RouterLink v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center" active-class="active">
           <span m="l-1" text="sm">{{ getTitle(categoryItem) }}</span>
-        </router-link>
+        </RouterLink>
       </template>
 
       <PressCategory v-else :category="categoryItem" :display-category="displayCategory" :collapsable="collapsable" />

package/components/PressHome.vue

@@ -13,7 +13,7 @@
     <slot name="home-features-after" />
 
     <slot>
-      <router-view />
+      <RouterView />
     </slot>
   </div>
 </template>

package/components/PressNavBar.vue

@@ -18,10 +18,10 @@ const themeConfig = useThemeConfig()
 
 <template>
   <div class="pr-navbar flex justify-between items-center pl-4 pr-2" :class="{ 'has-sidebar': hasSidebar }">
-    <router-link class="text-xl flex justify-center items-center" to="/" :aria-label="siteConfig.title">
+    <RouterLink class="text-xl flex justify-center items-center" to="/" :aria-label="siteConfig.title">
       <img v-if="themeConfig.logo" class="logo" :src="themeConfig.logo" alt="LOGO">
       <span class="inline-flex">{{ siteConfig.title }}</span>
-    </router-link>
+    </RouterLink>
     <div class="self-stretch flex justify-center items-center text-sm leading-5">
       <PressNavBarSearch p="x-2" />
       <PressNavBarMenu p="x-2" />

package/components/PressNavItemLink.vue

@@ -14,7 +14,7 @@ const { t } = useI18n()
 
 <template>
   <AppLink
-    class="press-nav-item-link"
+    class="press-nav-item-link flex justify-center items-center"
     :class="{
       active: route.path === item.link,
     }"

package/components/PressNavScreen.vue

@@ -11,7 +11,7 @@ const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock(screen)
 </script>
 
 <template>
-  <transition
+  <Transition
     name="fade"
     @enter="lockBodyScroll"
     @after-leave="unlockBodyScroll"
@@ -27,7 +27,7 @@ const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock(screen)
         <slot name="nav-screen-content-after" />
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <style scoped>

package/components/PressOutlineItem.vue

@@ -13,8 +13,14 @@ const { locale } = useI18n()
 
 <template>
   <ul :class="root ? 'root' : 'nested'" class="va-toc css-i18n-toc">
-    <li v-for="{ children, link, title, lang } in headers" :key="link" class="va-toc-item" :lang="lang || locale">
-      <a class="outline-link" :href="link" @click="onClick">{{ title }}</a>
+    <li
+      v-for="{ children, link, title, lang } in headers"
+      :key="link" class="va-toc-item"
+      :lang="lang || locale"
+    >
+      <RouterLink class="outline-link" :to="link" @click="onClick">
+        {{ title }}
+      </RouterLink>
       <template v-if="children?.length">
         <PressOutlineItem :headers="children" :on-click="onClick" />
       </template>

package/components/PressSidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { removeItemFromCategory, useCategory, usePageList, useSidebar } from 'valaxy'
+import { removeItemFromCategory, useCategories, usePageList, useSidebar } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
 defineProps<{
@@ -10,8 +10,9 @@ defineProps<{
 const pages = usePageList()
 const themeConfig = useThemeConfig()
 
+const sidebar = computed(() => themeConfig.value.sidebar)
 const categories = computed(() => {
-  const cs = useCategory('', pages.value)
+  const cs = useCategories('', pages.value)
   const cList = cs.value
   removeItemFromCategory(cList, 'Uncategorized')
 
@@ -25,6 +26,10 @@ const categories = computed(() => {
   return cList
 })
 
+function getCategoryByName(name: string) {
+  return categories.value.children.find(c => c.name === name)
+}
+
 const { hasSidebar } = useSidebar()
 </script>
 
@@ -35,7 +40,22 @@ const { hasSidebar } = useSidebar()
     @click.stop
   >
     <div text="left" m="2">
-      <PressCategories :categories="categories.children" :collapsable="false" />
+      <ul v-for="item in sidebar" :key="item" class="category-list">
+        <template v-if="typeof item === 'string'">
+          <PressCategory
+            v-if="getCategoryByName(item)"
+            :category="getCategoryByName(item)"
+            :collapsable="false"
+          />
+        </template>
+        <PressSidebarItem
+          v-else
+          p="t-2"
+          border="t t-$pr-c-divider-light"
+          :item="item"
+          :depth="0"
+        />
+      </ul>
     </div>
   </aside>
 </template>
@@ -85,4 +105,54 @@ const { hasSidebar } = useSidebar()
     top: 0;
   }
 }
+
+.category-list {
+  &:first-child {
+    .category-list-item {
+      border-top: 0;
+    }
+  }
+}
+
+.post-list-item {
+  a {
+    color: var(--va-c-text-light);
+    transition: all 0.2s;
+
+    &:hover {
+      color: var(--va-c-primary);
+    }
+
+    &.active {
+      color: var(--va-c-primary);
+    }
+  }
+}
+
+.press-sidebar-item {
+  .caret {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: -7px;
+    width: 32px;
+    height: 32px;
+    color: var(--vp-c-text-3);
+    cursor: pointer;
+    transition: color 0.25s;
+    flex-shrink: 0;
+  }
+
+  &:hover .caret {
+    color: var(--vp-c-text-2);
+  }
+
+  &:hover .caret:hover {
+    color: var(--vp-c-text-1);
+  }
+}
+
+.category-list+.category-list {
+  margin-top: 1rem;
+}
 </style>

package/components/PressSidebarItem.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { DefaultTheme } from 'vitepress/theme'
+import { useI18n } from 'vue-i18n'
+import { useSidebarControl } from '../composables/sidebar'
+
+const props = defineProps<{
+  item: DefaultTheme.SidebarItem
+  depth: number
+}>()
+
+const {
+  collapsed,
+  collapsible,
+  isLink,
+  isActiveLink,
+  hasActiveLink,
+  hasChildren,
+  toggle,
+} = useSidebarControl(computed(() => props.item))
+
+const sectionTag = computed(() => (hasChildren.value ? 'section' : `div`))
+
+const linkTag = computed(() => (isLink.value ? 'a' : 'div'))
+
+const textTag = computed(() => {
+  return !hasChildren.value
+    ? 'p'
+    : props.depth + 2 === 7
+      ? 'p'
+      : `h${props.depth + 2}`
+})
+
+const itemRole = computed(() => (isLink.value ? undefined : 'button'))
+
+const classes = computed(() => [
+  [`level-${props.depth}`],
+  { collapsible: collapsible.value },
+  { collapsed: collapsed.value },
+  { 'is-link': isLink.value },
+  { 'is-active': isActiveLink.value },
+  { 'has-active': hasActiveLink.value },
+])
+
+function onItemInteraction(e: MouseEvent | Event) {
+  if ('key' in e && e.key !== 'Enter')
+    return
+
+  !props.item.link && toggle()
+}
+
+function onCaretClick() {
+  props.item.link && toggle()
+}
+
+const { t } = useI18n()
+
+const htmlText = computed(() => t(props.item.text || ''))
+</script>
+
+<template>
+  <component
+    :is="sectionTag"
+    class="VPSidebarItem" :class="classes"
+  >
+    <div
+      v-if="item.text"
+      class="press-sidebar-item item"
+      :role="itemRole"
+      :tabindex="item.items && 0"
+      v-on="
+        item.items
+          ? { click: onItemInteraction, keydown: onItemInteraction }
+          : {}
+      "
+    >
+      <div class="indicator" />
+
+      <AppLink
+        v-if="item.link"
+        :tag="linkTag"
+        class="link"
+        :href="item.link"
+        :rel="item.rel"
+        :target="item.target"
+      >
+        <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+        <component :is="textTag" class="text ml-1" v-html="htmlText" />
+      </AppLink>
+      <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+      <component :is="textTag" v-else class="text ml-1" v-html="htmlText" />
+
+      <button
+        v-if="item.collapsed != null"
+        tabindex="0" role="button" aria-label="toggle section"
+        class="caret folder-action inline-flex cursor-pointer"
+        @click="onCaretClick" @keydown.enter="onCaretClick"
+      >
+        <div v-if="collapsed" i-ri-folder-add-line />
+        <div v-else i-ri-folder-reduce-line />
+      </button>
+    </div>
+
+    <div v-if="item.items && item.items.length" class="items">
+      <template v-if="depth < 5">
+        <PressSidebarItem
+          v-for="i in item.items"
+          :key="i.text"
+          :item="i"
+          :depth="depth + 1"
+        />
+      </template>
+    </div>
+  </component>
+</template>
+
+<style scoped>
+.item {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+.VPSidebarItem.collapsible > .item {
+  cursor: pointer;
+}
+
+.indicator {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  left: -17px;
+  width: 2px;
+  border-radius: 2px;
+  transition: background-color 0.25s;
+}
+
+.VPSidebarItem.level-2.is-active > .item > .indicator,
+.VPSidebarItem.level-3.is-active > .item > .indicator,
+.VPSidebarItem.level-4.is-active > .item > .indicator,
+.VPSidebarItem.level-5.is-active > .item > .indicator {
+  background-color: var(--vp-c-brand-1);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.text {
+  flex-grow: 1;
+  padding: 4px 0;
+  line-height: 24px;
+  font-size: 14px;
+  transition: color 0.25s;
+}
+
+.VPSidebarItem.level-0 .text {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+
+.VPSidebarItem.level-1 .text,
+.VPSidebarItem.level-2 .text,
+.VPSidebarItem.level-3 .text,
+.VPSidebarItem.level-4 .text,
+.VPSidebarItem.level-5 .text {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
+.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
+  color: var(--vp-c-brand-1);
+}
+
+.VPSidebarItem.level-0.has-active > .item > .text,
+.VPSidebarItem.level-1.has-active > .item > .text,
+.VPSidebarItem.level-2.has-active > .item > .text,
+.VPSidebarItem.level-3.has-active > .item > .text,
+.VPSidebarItem.level-4.has-active > .item > .text,
+.VPSidebarItem.level-5.has-active > .item > .text,
+.VPSidebarItem.level-0.has-active > .item > .link > .text,
+.VPSidebarItem.level-1.has-active > .item > .link > .text,
+.VPSidebarItem.level-2.has-active > .item > .link > .text,
+.VPSidebarItem.level-3.has-active > .item > .link > .text,
+.VPSidebarItem.level-4.has-active > .item > .link > .text,
+.VPSidebarItem.level-5.has-active > .item > .link > .text {
+  color: var(--vp-c-text-1);
+}
+
+.VPSidebarItem.level-0.is-active > .item .link > .text,
+.VPSidebarItem.level-1.is-active > .item .link > .text,
+.VPSidebarItem.level-2.is-active > .item .link > .text,
+.VPSidebarItem.level-3.is-active > .item .link > .text,
+.VPSidebarItem.level-4.is-active > .item .link > .text,
+.VPSidebarItem.level-5.is-active > .item .link > .text {
+  color: var(--vp-c-brand-1);
+}
+
+.VPSidebarItem.level-1 .items,
+.VPSidebarItem.level-2 .items,
+.VPSidebarItem.level-3 .items,
+.VPSidebarItem.level-4 .items,
+.VPSidebarItem.level-5 .items {
+  border-left: 1px solid var(--vp-c-divider);
+  padding-left: 16px;
+}
+
+.VPSidebarItem.collapsed .items {
+  display: none;
+}
+</style>

package/components/PressSwitchAppearance.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { isDark, toggleDark } from 'valaxy'
+import { isDark, toggleDarkWithTransition } from 'valaxy'
 </script>
 
 <template>
-  <button class="switch switch-appearance" type="button" aria-label="Toggle Dark Mode" @click="toggleDark()">
+  <button class="switch switch-appearance" type="button" aria-label="Toggle Dark Mode" @click="toggleDarkWithTransition">
     <span class="check">
       <span class="icon-wrap">
         <div v-if="!isDark" class="icon" i-ri-sun-line />

package/composables/sidebar.ts

@@ -0,0 +1,172 @@
+import { isClient } from '@vueuse/core'
+import type { DefaultTheme } from 'vitepress/theme'
+import {
+  type ComputedRef,
+  type Ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  watchEffect,
+  watchPostEffect,
+} from 'vue'
+
+import { useRoute } from 'vue-router'
+
+import type { PressTheme } from 'valaxy-theme-press'
+
+export interface SidebarControl {
+  collapsed: Ref<boolean>
+  collapsible: ComputedRef<boolean>
+  isLink: ComputedRef<boolean>
+  isActiveLink: Ref<boolean>
+  hasActiveLink: ComputedRef<boolean>
+  hasChildren: ComputedRef<boolean>
+  toggle(): void
+}
+
+export const HASH_RE = /#.*$/
+export const EXT_RE = /(index)?\.(md|html)$/
+export function normalize(path: string): string {
+  return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '')
+}
+
+export function isActive(
+  currentPath: string,
+  matchPath?: string,
+  asRegex: boolean = false,
+): boolean {
+  if (matchPath === undefined)
+    return false
+
+  currentPath = normalize(`/${currentPath}`)
+
+  if (asRegex)
+    return new RegExp(matchPath).test(currentPath)
+
+  if (normalize(matchPath) !== currentPath)
+    return false
+
+  const hashMatch = matchPath.match(HASH_RE)
+
+  if (hashMatch)
+    return (isClient ? location.hash : '') === hashMatch[0]
+
+  return true
+}
+
+/**
+ * a11y: cache the element that opened the Sidebar (the menu button) then
+ * focus that button again when Menu is closed with Escape key.
+ */
+export function useCloseSidebarOnEscape(
+  isOpen: Ref<boolean>,
+  close: () => void,
+) {
+  let triggerElement: HTMLButtonElement | undefined
+
+  watchEffect(() => {
+    triggerElement = isOpen.value
+      ? (document.activeElement as HTMLButtonElement)
+      : undefined
+  })
+
+  onMounted(() => {
+    window.addEventListener('keyup', onEscape)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keyup', onEscape)
+  })
+
+  function onEscape(e: KeyboardEvent) {
+    if (e.key === 'Escape' && isOpen.value) {
+      close()
+      triggerElement?.focus()
+    }
+  }
+}
+
+const hashRef = ref(isClient ? location.hash : '')
+if (isClient) {
+  window.addEventListener('hashchange', () => {
+    hashRef.value = location.hash
+  })
+}
+
+/**
+ * Check if the given sidebar item contains any active link.
+ */
+export function containsActiveLink(
+  path: string,
+  items: PressTheme.SidebarItem | PressTheme.SidebarItem[],
+): boolean {
+  if (Array.isArray(items))
+    return items.some(item => containsActiveLink(path, item))
+
+  return isActive(path, items.link)
+    ? true
+    : items.items
+      ? containsActiveLink(path, items.items)
+      : false
+}
+
+export function useSidebarControl(
+  item: ComputedRef<DefaultTheme.SidebarItem>,
+): SidebarControl {
+  const collapsed = ref(false)
+
+  const collapsible = computed(() => {
+    return item.value.collapsed != null
+  })
+
+  const isLink = computed(() => {
+    return !!item.value.link
+  })
+
+  const isActiveLink = ref(false)
+  const route = useRoute()
+  const updateIsActiveLink = () => {
+    isActiveLink.value = route.path === item.value.link
+  }
+
+  watch([route, item, hashRef], updateIsActiveLink)
+  onMounted(updateIsActiveLink)
+
+  const hasActiveLink = computed(() => {
+    if (isActiveLink.value)
+      return true
+
+    return item.value.items
+      ? containsActiveLink(route.path, item.value.items)
+      : false
+  })
+
+  const hasChildren = computed(() => {
+    return !!(item.value.items && item.value.items.length)
+  })
+
+  watchEffect(() => {
+    collapsed.value = !!(collapsible.value && item.value.collapsed)
+  })
+
+  watchPostEffect(() => {
+    ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
+  })
+
+  function toggle() {
+    if (collapsible.value)
+      collapsed.value = !collapsed.value
+  }
+
+  return {
+    collapsed,
+    collapsible,
+    isLink,
+    isActiveLink,
+    hasActiveLink,
+    hasChildren,
+    toggle,
+  }
+}

package/layouts/404.vue

@@ -12,10 +12,12 @@ const { t } = useI18n()
       <div />
     </template>
     <div text="center" m="t-20">
-      <div text-4xl>
-        <div i-ri-alarm-warning-line inline-block />
+      <div class="not-found" title="404" font="mono">
+        404
       </div>
-      <router-view />
+
+      <RouterView />
+      <RouterView />
       <div>
         <button btn text-sm m="3 t8" @click="router.back()">
           {{ t('button.back') }}
@@ -24,3 +26,10 @@ const { t } = useI18n()
     </div>
   </Layout>
 </template>
+
+<style lang="scss" scoped>
+.not-found {
+  font-size: 10rem;
+  text-shadow: 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+}
+</style>

package/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
   <Layout>
-    <router-view />
+    <RouterView />
   </Layout>
 </template>

package/layouts/layout.vue

@@ -15,7 +15,7 @@ const layout = useLayout()
     <PressBackdrop :show="isSidebarOpen" @click="closeSidebar" />
 
     <slot>
-      <router-view v-slot="{ Component }">
+      <RouterView v-slot="{ Component }">
         <component :is="asAny(Component)">
           <template #main-header>
             <slot name="main-header" />
@@ -49,7 +49,7 @@ const layout = useLayout()
             <slot name="footer" />
           </template>
         </component>
-      </router-view>
+      </RouterView>
     </slot>
 
     <PressFooter />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-press",
-  "version": "0.15.9",
+  "version": "0.15.11",
   "description": "Docs Theme for Valaxy",
   "author": {
     "email": "me@yunyoujun.cn",
@@ -23,6 +23,6 @@
     "@docsearch/js": "^3.5.2"
   },
   "devDependencies": {
-    "valaxy": "0.15.9"
+    "valaxy": "0.15.11"
   }
 }

package/setup/main.ts

@@ -12,57 +12,11 @@ import 'vitepress/dist/client/theme-default/styles/components/custom-block.css'
 
 // import 'vitepress/dist/client/theme-default/styles/components/vp-sponsor.css'
 
-import { targetPadding } from '../client'
-
 export default defineAppSetup((ctx) => {
   const { router, isClient } = ctx
   if (!isClient)
     return
 
-  window.addEventListener(
-    'click',
-    async (e) => {
-      const link = (e.target as Element).closest('a')
-      if (link) {
-        const { protocol, hostname, pathname, hash, target } = link
-        const currentUrl = window.location
-        const extMatch = pathname.match(/\.\w+$/)
-        // only intercept inbound links
-        if (
-          !e.ctrlKey
-            && !e.shiftKey
-            && !e.altKey
-            && !e.metaKey
-            && target !== '_blank'
-            && protocol === currentUrl.protocol
-            && hostname === currentUrl.hostname
-            && !(extMatch && extMatch[0] !== '.html')
-        ) {
-          if (pathname === currentUrl.pathname) {
-            e.preventDefault()
-            // scroll between hash anchors in the same page
-            if (hash && hash !== currentUrl.hash) {
-              await router.push({ hash })
-              history.replaceState({ ...history.state }, '')
-
-              // still emit the event so we can listen to it in themes
-              window.dispatchEvent(new Event('hashchange'))
-              // use smooth scroll when clicking on header anchor links
-              scrollTo(link, hash, {
-                smooth: link.classList.contains('header-anchor'),
-              })
-            }
-          }
-        }
-      }
-    },
-    { capture: true },
-  )
-
-  window.addEventListener('hashchange', (e) => {
-    e.preventDefault()
-  })
-
   router.beforeEach((to, from) => {
     if (to.path !== from.path)
       return
@@ -70,7 +24,6 @@ export default defineAppSetup((ctx) => {
     nextTick(() => {
       scrollTo(document.body, to.hash, {
         smooth: true,
-        targetPadding,
       })
     })
   })

package/types/index.d.ts

@@ -30,6 +30,49 @@ export namespace PressTheme {
     text?: string
   }
 
+  export type Sidebar = SidebarItem[] | SidebarMulti
+  export interface SidebarMulti {
+    [path: string]: SidebarItem[] | { items: SidebarItem[]; base: string }
+  }
+  export interface SidebarItem {
+    /**
+     * The text label of the item.
+     */
+    text?: string
+
+    /**
+     * The link of the item.
+     */
+    link?: string
+
+    /**
+     * The children of the item.
+     */
+    items?: SidebarItem[]
+
+    /**
+     * If not specified, group is not collapsible.
+     *
+     * If `true`, group is collapsible and collapsed by default
+     *
+     * If `false`, group is collapsible but expanded by default
+     */
+    collapsed?: boolean
+
+    /**
+     * Base path for the children items.
+     */
+    base?: string
+
+    /**
+     * Customize text that appears on the footer of previous/next page.
+     */
+    docFooterText?: string
+
+    rel?: string
+    target?: string
+  }
+
   export interface Config {
     logo: string
 
@@ -41,8 +84,8 @@ export namespace PressTheme {
       primary: string
     }
 
-    nav: Array<NavItem>
-    sidebar: string[]
+    nav: NavItem[]
+    sidebar?: Sidebar
 
     editLink: EditLink