fix(theme): fix sidebar collapsing and restore base property (#2753)

pull/2755/head
Divyansh Singh 1 year ago committed by GitHub
parent 5ef1195da2
commit 9a4ee07260
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -53,8 +53,8 @@ export default defineConfig({
nav: nav(), nav: nav(),
sidebar: { sidebar: {
'/guide/': sidebarGuide(), '/guide/': { base: '/guide/', items: sidebarGuide() },
'/reference/': sidebarReference() '/reference/': { base: '/reference/', items: sidebarReference() }
}, },
editLink: { editLink: {
@ -122,72 +122,72 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
text: 'Introduction', text: 'Introduction',
collapsed: false, collapsed: false,
items: [ items: [
{ text: 'What is VitePress?', link: '/guide/what-is-vitepress' }, { text: 'What is VitePress?', link: 'what-is-vitepress' },
{ text: 'Getting Started', link: '/guide/getting-started' }, { text: 'Getting Started', link: 'getting-started' },
{ text: 'Routing', link: '/guide/routing' }, { text: 'Routing', link: 'routing' },
{ text: 'Deploy', link: '/guide/deploy' } { text: 'Deploy', link: 'deploy' }
] ]
}, },
{ {
text: 'Writing', text: 'Writing',
collapsed: false, collapsed: false,
items: [ items: [
{ text: 'Markdown Extensions', link: '/guide/markdown' }, { text: 'Markdown Extensions', link: 'markdown' },
{ text: 'Asset Handling', link: '/guide/asset-handling' }, { text: 'Asset Handling', link: 'asset-handling' },
{ text: 'Frontmatter', link: '/guide/frontmatter' }, { text: 'Frontmatter', link: 'frontmatter' },
{ text: 'Using Vue in Markdown', link: '/guide/using-vue' }, { text: 'Using Vue in Markdown', link: 'using-vue' },
{ text: 'Internationalization', link: '/guide/i18n' } { text: 'Internationalization', link: 'i18n' }
] ]
}, },
{ {
text: 'Customization', text: 'Customization',
collapsed: false, collapsed: false,
items: [ items: [
{ text: 'Using a Custom Theme', link: '/guide/custom-theme' }, { text: 'Using a Custom Theme', link: 'custom-theme' },
{ text: 'Extending the Default Theme', link: '/guide/extending-default-theme' }, { text: 'Extending the Default Theme', link: 'extending-default-theme' },
{ text: 'Build-Time Data Loading', link: '/guide/data-loading' }, { text: 'Build-Time Data Loading', link: 'data-loading' },
{ text: 'SSR Compatibility', link: '/guide/ssr-compat' }, { text: 'SSR Compatibility', link: 'ssr-compat' },
{ text: 'Connecting to a CMS', link: '/guide/cms' } { text: 'Connecting to a CMS', link: 'cms' }
] ]
}, },
{ {
text: 'Experimental', text: 'Experimental',
collapsed: false, collapsed: false,
items: [ items: [
{ text: 'MPA Mode', link: '/guide/mpa-mode' }, { text: 'MPA Mode', link: 'mpa-mode' },
{ text: 'Sitemap Generation', link: '/guide/sitemap-generation' } { text: 'Sitemap Generation', link: 'sitemap-generation' }
] ]
}, },
{ text: 'Config & API Reference', link: '/reference/site-config' } { text: 'Config & API Reference', base: '/reference/', link: 'site-config' }
] ]
} }
/* prettier-ignore */
function sidebarReference(): DefaultTheme.SidebarItem[] { function sidebarReference(): DefaultTheme.SidebarItem[] {
return [ return [
{ {
text: 'Reference', text: 'Reference',
items: [ items: [
{ text: 'Site Config', link: '/reference/site-config' }, { text: 'Site Config', link: 'site-config' },
{ text: 'Frontmatter Config', link: '/reference/frontmatter-config' }, { text: 'Frontmatter Config', link: 'frontmatter-config' },
{ text: 'Runtime API', link: '/reference/runtime-api' }, { text: 'Runtime API', link: 'runtime-api' },
{ text: 'CLI', link: '/reference/cli' }, { text: 'CLI', link: 'cli' },
{ {
text: 'Default Theme', text: 'Default Theme',
base: '/reference/default-theme-',
items: [ items: [
{ text: 'Overview', link: '/reference/default-theme-config' }, { text: 'Overview', link: 'config' },
{ text: 'Nav', link: '/reference/default-theme-nav' }, { text: 'Nav', link: 'nav' },
{ text: 'Sidebar', link: '/reference/default-theme-sidebar' }, { text: 'Sidebar', link: 'sidebar' },
{ text: 'Home Page', link: '/reference/default-theme-home-page' }, { text: 'Home Page', link: 'home-page' },
{ text: 'Footer', link: '/reference/default-theme-footer' }, { text: 'Footer', link: 'footer' },
{ text: 'Layout', link: '/reference/default-theme-layout' }, { text: 'Layout', link: 'layout' },
{ text: 'Badge', link: '/reference/default-theme-badge' }, { text: 'Badge', link: 'badge' },
{ text: 'Team Page', link: '/reference/default-theme-team-page' }, { text: 'Team Page', link: 'team-page' },
{ text: 'Prev / Next Links', link: '/reference/default-theme-prev-next-links' }, { text: 'Prev / Next Links', link: 'prev-next-links' },
{ text: 'Edit Link', link: '/reference/default-theme-edit-link' }, { text: 'Edit Link', link: 'edit-link' },
{ text: 'Last Updated Timestamp', link: '/reference/default-theme-last-updated' }, { text: 'Last Updated Timestamp', link: 'last-updated' },
{ text: 'Search', link: '/reference/default-theme-search' }, { text: 'Search', link: 'search' },
{ text: 'Carbon Ads', link: '/reference/default-theme-carbon-ads' } { text: 'Carbon Ads', link: 'carbon-ads' }
] ]
} }
] ]

@ -1,16 +1,16 @@
import { useMediaQuery } from '@vueuse/core'
import type { DefaultTheme } from 'vitepress/theme'
import { import {
type ComputedRef,
type Ref,
computed, computed,
onMounted, onMounted,
onUnmounted, onUnmounted,
ref, ref,
watch,
watchEffect, watchEffect,
watch watchPostEffect,
type ComputedRef,
type Ref
} from 'vue' } from 'vue'
import { useMediaQuery } from '@vueuse/core'
import { useRoute } from 'vitepress'
import type { DefaultTheme } from 'vitepress/theme'
import { inBrowser, isActive } from '../../shared' import { inBrowser, isActive } from '../../shared'
import { import {
hasActiveLink as containsActiveLink, hasActiveLink as containsActiveLink,
@ -30,15 +30,14 @@ export interface SidebarControl {
} }
export function useSidebar() { export function useSidebar() {
const route = useRoute() const { frontmatter, page, theme } = useData()
const { theme, frontmatter } = useData()
const is960 = useMediaQuery('(min-width: 960px)') const is960 = useMediaQuery('(min-width: 960px)')
const isOpen = ref(false) const isOpen = ref(false)
const sidebar = computed(() => { const sidebar = computed(() => {
const sidebarConfig = theme.value.sidebar const sidebarConfig = theme.value.sidebar
const relativePath = route.data.relativePath const relativePath = page.value.relativePath
return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : [] return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : []
}) })
@ -176,7 +175,7 @@ export function useSidebarControl(
collapsed.value = !!(collapsible.value && item.value.collapsed) collapsed.value = !!(collapsible.value && item.value.collapsed)
}) })
watchEffect(() => { watchPostEffect(() => {
;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false) ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
}) })

@ -20,7 +20,7 @@ export function getSidebar(
_sidebar: DefaultTheme.Sidebar | undefined, _sidebar: DefaultTheme.Sidebar | undefined,
path: string path: string
): SidebarItem[] { ): SidebarItem[] {
if (Array.isArray(_sidebar)) return _sidebar if (Array.isArray(_sidebar)) return addBase(_sidebar)
if (_sidebar == null) return [] if (_sidebar == null) return []
path = ensureStartingSlash(path) path = ensureStartingSlash(path)
@ -34,7 +34,10 @@ export function getSidebar(
return path.startsWith(ensureStartingSlash(dir)) return path.startsWith(ensureStartingSlash(dir))
}) })
return dir ? _sidebar[dir] : [] const sidebar = dir ? _sidebar[dir] : []
return Array.isArray(sidebar)
? addBase(sidebar)
: addBase(sidebar.items, sidebar.base)
} }
/** /**
@ -104,3 +107,13 @@ export function hasActiveLink(
? hasActiveLink(path, items.items) ? hasActiveLink(path, items.items)
: false : false
} }
function addBase(items: SidebarItem[], _base?: string): SidebarItem[] {
return [...items].map((_item) => {
const item = { ..._item }
const base = item.base || _base
if (base && item.link) item.link = base + item.link
if (item.items) item.items = addBase(item.items, base)
return item
})
}

@ -202,7 +202,7 @@ export namespace DefaultTheme {
export type Sidebar = SidebarItem[] | SidebarMulti export type Sidebar = SidebarItem[] | SidebarMulti
export interface SidebarMulti { export interface SidebarMulti {
[path: string]: SidebarItem[] [path: string]: SidebarItem[] | { items: SidebarItem[]; base: string }
} }
export type SidebarItem = { export type SidebarItem = {
@ -230,6 +230,11 @@ export namespace DefaultTheme {
*/ */
collapsed?: boolean collapsed?: boolean
/**
* Base path for the children items.
*/
base?: string
/** /**
* Customize text that appears on the footer of previous/next page. * Customize text that appears on the footer of previous/next page.
*/ */

Loading…
Cancel
Save