mirror of https://github.com/vuejs/vitepress
feat(theme): redesign the navbar (#5397)
Co-authored-by: bluwy <34116392+bluwy@users.noreply.github.com> Co-authored-by: xbsheng <56357338+xbsheng@users.noreply.github.com> Co-authored-by: fvsch <243601+fvsch@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>pull/5400/head
Divyansh Singh
3 weeks ago
committed by
GitHub
parent
0f0fe13576
commit
26b76d6d9e
@ -0,0 +1,135 @@
|
||||
import {
|
||||
computeNavFit,
|
||||
type NavFitInput
|
||||
} from 'client/theme-default/composables/nav-overflow'
|
||||
|
||||
function fit(input: Partial<NavFitInput>) {
|
||||
return computeNavFit({
|
||||
itemWidths: [],
|
||||
translations: null,
|
||||
appearance: null,
|
||||
socialLinks: null,
|
||||
available: 0,
|
||||
extraWidth: 40,
|
||||
...input
|
||||
})
|
||||
}
|
||||
|
||||
describe('client/theme-default/composables/nav-overflow', () => {
|
||||
describe('computeNavFit', () => {
|
||||
test('keeps everything when it fits', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
appearance: 60,
|
||||
socialLinks: 90,
|
||||
available: 400
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: true,
|
||||
socialLinks: true
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses social links first', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
appearance: 60,
|
||||
socialLinks: 90,
|
||||
available: 390
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: true,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses the cluster cascade in order', () => {
|
||||
// items (200) + translations (50) fit in the 260 budget after
|
||||
// reserving the extra button, appearance (60) does not — social links
|
||||
// must follow appearance out even though they'd fit alone
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
appearance: 60,
|
||||
socialLinks: 5,
|
||||
available: 300
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: false,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses menu items right-to-left after the cluster', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100, 100],
|
||||
translations: 50,
|
||||
available: 250
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: 2,
|
||||
translations: false,
|
||||
appearance: true,
|
||||
socialLinks: true
|
||||
})
|
||||
})
|
||||
|
||||
test('ignores unconfigured cluster units', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100],
|
||||
socialLinks: 90,
|
||||
available: 150
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: true,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
|
||||
test('collapses everything when nothing fits', () => {
|
||||
expect(
|
||||
fit({
|
||||
itemWidths: [100, 100],
|
||||
translations: 50,
|
||||
available: 30
|
||||
})
|
||||
).toEqual({
|
||||
visibleItemCount: 0,
|
||||
translations: false,
|
||||
// unconfigured units just stay "not collapsed"
|
||||
appearance: true,
|
||||
socialLinks: true
|
||||
})
|
||||
})
|
||||
|
||||
test('a lone overwide item still collapses instead of clipping', () => {
|
||||
expect(fit({ itemWidths: [500], available: 400 }).visibleItemCount).toBe(
|
||||
0
|
||||
)
|
||||
})
|
||||
|
||||
test('handles an empty nav', () => {
|
||||
expect(fit({ socialLinks: 90, appearance: 60, available: 80 })).toEqual({
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: false,
|
||||
socialLinks: false
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,92 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, useId } from 'vue'
|
||||
|
||||
import { useData } from '../composables/data'
|
||||
import { useAppearanceSwitch } from '../composables/nav'
|
||||
import { useNavOverflow } from '../composables/nav-overflow'
|
||||
import VPSwitchAppearance from './VPSwitchAppearance.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
/** labeled row (nav screen and `⋯` menu) instead of the bare switch */
|
||||
row?: boolean
|
||||
/** styling context for the row variant */
|
||||
screen?: boolean
|
||||
}>()
|
||||
|
||||
const { theme } = useData()
|
||||
const show = useAppearanceSwitch()
|
||||
|
||||
// only the inline bar switch participates in the overflow engine
|
||||
const overflow = props.row ? null : useNavOverflow()
|
||||
|
||||
const isCollapsed = computed(() => !!overflow && !overflow.state.appearance)
|
||||
|
||||
const labelId = useId()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="show"
|
||||
class="VPNavAppearance"
|
||||
:class="[
|
||||
row ? (screen ? 'VPNavScreenAppearance' : 'menu-appearance') : 'VPNavBarAppearance',
|
||||
{ collapsed: isCollapsed }
|
||||
]"
|
||||
:ref="(el) => overflow?.setClusterEl('appearance', el as HTMLElement | null)"
|
||||
>
|
||||
<p v-if="row" :id="labelId" class="text">
|
||||
{{ theme.darkModeSwitchLabel || 'Appearance' }}
|
||||
</p>
|
||||
<VPSwitchAppearance :aria-labelledby="row ? labelId : undefined" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarAppearance {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.VPNavBarAppearance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.VPNavAppearance .text {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
/* labeled row inside the nav screen */
|
||||
.VPNavScreenAppearance {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 0.875rem 0.75rem 1rem;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.VPNavScreenAppearance .text {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* labeled row inside the `⋯` menu */
|
||||
.menu-appearance {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
min-width: 11rem;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
/* matches the menu group titles */
|
||||
.menu-appearance .text {
|
||||
line-height: 2.2857143;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
@ -1,32 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import VPSwitchAppearance from './VPSwitchAppearance.vue'
|
||||
|
||||
const { site } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="
|
||||
site.appearance &&
|
||||
site.appearance !== 'force-dark' &&
|
||||
site.appearance !== 'force-auto'
|
||||
"
|
||||
class="VPNavBarAppearance"
|
||||
>
|
||||
<VPSwitchAppearance />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarAppearance {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 80rem) {
|
||||
.VPNavBarAppearance {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,46 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import VPNavBarMenuGroup from './VPNavBarMenuGroup.vue'
|
||||
import VPNavBarMenuLink from './VPNavBarMenuLink.vue'
|
||||
|
||||
const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav
|
||||
v-if="theme.nav"
|
||||
aria-labelledby="main-nav-aria-label"
|
||||
class="VPNavBarMenu"
|
||||
>
|
||||
<span id="main-nav-aria-label" class="visually-hidden">
|
||||
Main Navigation
|
||||
</span>
|
||||
<ul class="list">
|
||||
<li v-for="item in theme.nav" :key="JSON.stringify(item)">
|
||||
<VPNavBarMenuLink v-if="'link' in item" :item />
|
||||
<component
|
||||
v-else-if="'component' in item"
|
||||
:is="item.component"
|
||||
v-bind="item.props"
|
||||
/>
|
||||
<VPNavBarMenuGroup v-else :item />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarMenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.VPNavBarMenu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,54 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoute } from 'vitepress'
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { isActive } from '../../shared'
|
||||
import VPFlyout from './VPFlyout.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: DefaultTheme.NavItemWithChildren
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const isActiveGroup = computed(() => {
|
||||
if (props.item.activeMatch) {
|
||||
return isActive(
|
||||
route.data.relativePath,
|
||||
route.hash,
|
||||
props.item.activeMatch,
|
||||
true
|
||||
)
|
||||
}
|
||||
return isChildActive(props.item)
|
||||
})
|
||||
|
||||
function isChildActive(navItem: DefaultTheme.NavItem): boolean {
|
||||
if ('component' in navItem) return false
|
||||
|
||||
if ('link' in navItem) {
|
||||
const href =
|
||||
typeof navItem.link === 'function'
|
||||
? navItem.link(route.data)
|
||||
: navItem.link
|
||||
|
||||
return isActive(
|
||||
route.data.relativePath,
|
||||
route.hash,
|
||||
navItem.activeMatch || href,
|
||||
!!navItem.activeMatch
|
||||
)
|
||||
}
|
||||
|
||||
return navItem.items.some(isChildActive)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPFlyout
|
||||
:class="{ VPNavBarMenuGroup: true, active: isActiveGroup }"
|
||||
:button="item.text"
|
||||
:items="item.items"
|
||||
/>
|
||||
</template>
|
||||
@ -1,47 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
|
||||
import { useNavItemLink } from '../composables/nav'
|
||||
import VPLink from './VPLink.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: DefaultTheme.NavItemWithLink
|
||||
}>()
|
||||
|
||||
const { href, isActiveLink, isCurrentLink } = useNavItemLink(() => props.item)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPLink
|
||||
:class="{ VPNavBarMenuLink: true, active: isActiveLink }"
|
||||
:aria-current="isCurrentLink ? 'page' : undefined"
|
||||
:href
|
||||
:target="item.target"
|
||||
:rel="item.rel"
|
||||
:no-icon="item.noIcon"
|
||||
tabindex="0"
|
||||
>
|
||||
<span v-html="item.text"></span>
|
||||
</VPLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarMenuLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.75rem;
|
||||
line-height: var(--vp-nav-height);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPNavBarMenuLink.active {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.VPNavBarMenuLink:hover {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import VPSocialLinks from './VPSocialLinks.vue'
|
||||
|
||||
const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPSocialLinks
|
||||
v-if="theme.socialLinks"
|
||||
class="VPNavBarSocialLinks"
|
||||
:links="theme.socialLinks"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarSocialLinks {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 80rem) {
|
||||
.VPNavBarSocialLinks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import { useLangs } from '../composables/langs'
|
||||
import VPFlyout from './VPFlyout.vue'
|
||||
import VPMenuLink from './VPMenuLink.vue'
|
||||
|
||||
const { theme } = useData()
|
||||
const { localeLinks, currentLang } = useLangs({
|
||||
linkToCorrespondingPage: true
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPFlyout
|
||||
v-if="localeLinks.length && currentLang.label"
|
||||
class="VPNavBarTranslations"
|
||||
icon="vpi-languages"
|
||||
:label="theme.langMenuLabel || 'Change language'"
|
||||
>
|
||||
<ul class="items">
|
||||
<li class="title">{{ currentLang.label }}</li>
|
||||
|
||||
<template v-for="locale in localeLinks" :key="locale.link">
|
||||
<VPMenuLink
|
||||
:item="locale"
|
||||
:external="false"
|
||||
:lang="locale.lang"
|
||||
:hreflang="locale.lang"
|
||||
rel="alternate"
|
||||
:dir="locale.dir"
|
||||
data-allow-mismatch="attribute"
|
||||
/>
|
||||
</template>
|
||||
</ul>
|
||||
</VPFlyout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarTranslations {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 80rem) {
|
||||
.VPNavBarTranslations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 1.5rem 0 0.75rem;
|
||||
line-height: 2.2857143;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import { useNavOverflow } from '../composables/nav-overflow'
|
||||
import VPNavMenuGroup from './VPNavMenuGroup.vue'
|
||||
import VPNavMenuLink from './VPNavMenuLink.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
screen?: boolean
|
||||
}>()
|
||||
|
||||
const { theme } = useData()
|
||||
|
||||
// bar only — inside the screen every item is always shown
|
||||
const overflow = props.screen ? null : useNavOverflow()
|
||||
|
||||
function isVisible(index: number) {
|
||||
return !overflow || index < overflow.state.visibleItemCount
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav
|
||||
v-if="theme.nav"
|
||||
:aria-label="theme.navMenuLabel || 'Main Navigation'"
|
||||
class="VPNavMenu"
|
||||
:class="screen ? 'VPNavScreenMenu' : 'VPNavBarMenu'"
|
||||
:ref="(el) => overflow?.setMenuEl(el as HTMLElement | null)"
|
||||
>
|
||||
<ul class="list">
|
||||
<li
|
||||
v-for="(item, index) in theme.nav"
|
||||
:key="JSON.stringify(item)"
|
||||
:class="{ collapsed: !isVisible(index) }"
|
||||
:ref="(el) => overflow?.setItemEl(index, el as HTMLElement | null)"
|
||||
>
|
||||
<VPNavMenuLink v-if="'link' in item" :item :screen />
|
||||
<component
|
||||
v-else-if="'component' in item"
|
||||
:is="item.component"
|
||||
v-bind="item.props"
|
||||
:screen-menu="screen || undefined"
|
||||
/>
|
||||
<VPNavMenuGroup v-else :item :screen />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarMenu {
|
||||
position: relative;
|
||||
display: none;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.VPNavBarMenu .list {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* collapsed into the `⋯` menu — kept mounted (hidden, out of the a11y tree
|
||||
and tab order) so its natural width stays measurable */
|
||||
.VPNavBarMenu .list > li.collapsed {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.VPNavBarMenu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,150 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRoute } from 'vitepress'
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { computed, ref, useId } from 'vue'
|
||||
|
||||
import { isActive } from '../../shared'
|
||||
import VPFlyout from './VPFlyout.vue'
|
||||
import VPMenuGroup from './VPMenuGroup.vue'
|
||||
import VPMenuLink from './VPMenuLink.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: DefaultTheme.NavItemWithChildren
|
||||
/** accordion inside the nav screen */
|
||||
screen?: boolean
|
||||
/** flat titled group inside a menu panel (e.g. the `⋯` menu) */
|
||||
menu?: boolean
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const isActiveGroup = computed(() => {
|
||||
if (props.item.activeMatch) {
|
||||
return isActive(
|
||||
route.data.relativePath,
|
||||
route.hash,
|
||||
props.item.activeMatch,
|
||||
true
|
||||
)
|
||||
}
|
||||
return isChildActive(props.item)
|
||||
})
|
||||
|
||||
function isChildActive(navItem: DefaultTheme.NavItem): boolean {
|
||||
if ('component' in navItem) return false
|
||||
|
||||
if ('link' in navItem) {
|
||||
const href =
|
||||
typeof navItem.link === 'function'
|
||||
? navItem.link(route.data)
|
||||
: navItem.link
|
||||
|
||||
return isActive(
|
||||
route.data.relativePath,
|
||||
route.hash,
|
||||
navItem.activeMatch || href,
|
||||
!!navItem.activeMatch
|
||||
)
|
||||
}
|
||||
|
||||
return navItem.items.some(isChildActive)
|
||||
}
|
||||
|
||||
// screen accordion state — resets when the screen unmounts
|
||||
const isOpen = ref(false)
|
||||
const groupId = useId()
|
||||
|
||||
function toggle() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPMenuGroup
|
||||
v-if="menu"
|
||||
class="VPNavMenuGroup"
|
||||
:text="item.text"
|
||||
:items="item.items"
|
||||
/>
|
||||
|
||||
<VPFlyout
|
||||
v-else-if="!screen"
|
||||
:class="{ VPNavMenuGroup: true, VPNavBarMenuGroup: true, active: isActiveGroup }"
|
||||
:button="item.text"
|
||||
:items="item.items"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="VPNavMenuGroup VPNavScreenMenuGroup"
|
||||
:class="{ open: isOpen, active: isActiveGroup }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="button"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-controls="groupId"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="button-text" v-html="item.text"></span>
|
||||
<span class="vpi-plus button-icon" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<ul v-show="isOpen" :id="groupId" class="items">
|
||||
<template v-for="child in item.items" :key="JSON.stringify(child)">
|
||||
<VPMenuLink v-if="'link' in child" :item="child" />
|
||||
<li v-else-if="'component' in child">
|
||||
<component :is="child.component" v-bind="child.props" screen-menu />
|
||||
</li>
|
||||
<VPMenuGroup v-else :text="child.text" :items="child.items" />
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuGroup {
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open {
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .button {
|
||||
padding-bottom: 0.375rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .button-icon {
|
||||
/*rtl:ignore*/
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0.25rem 0.6875rem 0;
|
||||
width: 100%;
|
||||
line-height: 1.7142857;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.button:hover,
|
||||
.VPNavScreenMenuGroup.active .button {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.items :deep(.VPMenuGroup) {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,40 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import VPSwitchAppearance from './VPSwitchAppearance.vue'
|
||||
|
||||
const { site, theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="
|
||||
site.appearance &&
|
||||
site.appearance !== 'force-dark' &&
|
||||
site.appearance !== 'force-auto'
|
||||
"
|
||||
class="VPNavScreenAppearance"
|
||||
>
|
||||
<p class="text">
|
||||
{{ theme.darkModeSwitchLabel || 'Appearance' }}
|
||||
</p>
|
||||
<VPSwitchAppearance />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenAppearance {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 0.875rem 0.75rem 1rem;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.text {
|
||||
line-height: 2;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
</style>
|
||||
@ -1,28 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import VPNavScreenMenuGroup from './VPNavScreenMenuGroup.vue'
|
||||
import VPNavScreenMenuLink from './VPNavScreenMenuLink.vue'
|
||||
|
||||
const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav v-if="theme.nav" class="VPNavScreenMenu">
|
||||
<ul>
|
||||
<li v-for="item in theme.nav" :key="JSON.stringify(item)">
|
||||
<VPNavScreenMenuLink v-if="'link' in item" :item />
|
||||
<component
|
||||
v-else-if="'component' in item"
|
||||
:is="item.component"
|
||||
v-bind="item.props"
|
||||
screen-menu
|
||||
/>
|
||||
<VPNavScreenMenuGroup
|
||||
v-else
|
||||
:text="item.text || ''"
|
||||
:items="item.items"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
@ -1,113 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
|
||||
import VPNavScreenMenuGroupSection from './VPNavScreenMenuGroupSection.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
text: string
|
||||
items: any[]
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
|
||||
const groupId = computed(
|
||||
() => `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
|
||||
)
|
||||
|
||||
function toggle() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPNavScreenMenuGroup" :class="{ open: isOpen }">
|
||||
<button
|
||||
class="button"
|
||||
:aria-controls="groupId"
|
||||
:aria-expanded="isOpen"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="button-text" v-html="text"></span>
|
||||
<span class="vpi-plus button-icon" />
|
||||
</button>
|
||||
|
||||
<ul :id="groupId" class="items">
|
||||
<li v-for="item in items" :key="JSON.stringify(item)">
|
||||
<div v-if="'link' in item" class="item">
|
||||
<VPNavScreenMenuGroupLink :item />
|
||||
</div>
|
||||
|
||||
<div v-else-if="'component' in item" class="item">
|
||||
<component :is="item.component" v-bind="item.props" screen-menu />
|
||||
</div>
|
||||
|
||||
<div v-else class="group">
|
||||
<VPNavScreenMenuGroupSection :text="item.text" :items="item.items" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuGroup {
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.5s;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup .items {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .items {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open {
|
||||
padding-bottom: 0.625rem;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .button {
|
||||
padding-bottom: 0.375rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroup.open .button-icon {
|
||||
/*rtl:ignore*/
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0.25rem 0.6875rem 0;
|
||||
width: 100%;
|
||||
line-height: 1.7142857;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.group:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.group + .group,
|
||||
.group + .item {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,49 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
import { inject } from 'vue'
|
||||
|
||||
import { navInjectionKey, useNavItemLink } from '../composables/nav'
|
||||
import VPLink from './VPLink.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: DefaultTheme.NavItemWithLink
|
||||
}>()
|
||||
|
||||
const { href, isActiveLink, isCurrentLink } = useNavItemLink(() => props.item)
|
||||
|
||||
const { closeScreen } = inject(navInjectionKey)!
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPLink
|
||||
:class="{ VPNavScreenMenuGroupLink: true, active: isActiveLink }"
|
||||
:aria-current="isCurrentLink ? 'page' : undefined"
|
||||
:href
|
||||
:target="item.target"
|
||||
:rel="item.rel"
|
||||
:no-icon="item.noIcon"
|
||||
@click="closeScreen"
|
||||
>
|
||||
<span v-html="item.text"></span>
|
||||
</VPLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuGroupLink {
|
||||
display: block;
|
||||
margin-left: 0.75rem;
|
||||
line-height: 2.2857143;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroupLink:hover {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.VPNavScreenMenuGroupLink.active {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
</style>
|
||||
@ -1,35 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
|
||||
import VPNavScreenMenuGroupLink from './VPNavScreenMenuGroupLink.vue'
|
||||
|
||||
defineProps<{
|
||||
text?: string
|
||||
items: DefaultTheme.NavItemWithLink[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VPNavScreenMenuGroupSection">
|
||||
<p v-if="text" class="title">{{ text }}</p>
|
||||
<ul>
|
||||
<li v-for="item in items" :key="item.text">
|
||||
<VPNavScreenMenuGroupLink :item="item" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenMenuGroupSection {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 2.4615385;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: color 0.25s;
|
||||
}
|
||||
</style>
|
||||
@ -1,14 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useData } from '../composables/data'
|
||||
import VPSocialLinks from './VPSocialLinks.vue'
|
||||
|
||||
const { theme } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPSocialLinks
|
||||
v-if="theme.socialLinks"
|
||||
class="VPNavScreenSocialLinks"
|
||||
:links="theme.socialLinks"
|
||||
/>
|
||||
</template>
|
||||
@ -1,87 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { useLangs } from '../composables/langs'
|
||||
import VPLink from './VPLink.vue'
|
||||
|
||||
const { localeLinks, currentLang } = useLangs({
|
||||
linkToCorrespondingPage: true
|
||||
})
|
||||
const isOpen = ref(false)
|
||||
|
||||
function toggle() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="localeLinks.length && currentLang.label"
|
||||
class="VPNavScreenTranslations"
|
||||
:class="{ open: isOpen }"
|
||||
>
|
||||
<button class="title" @click="toggle">
|
||||
<span class="vpi-languages icon lang" />
|
||||
{{ currentLang.label }}
|
||||
<span class="vpi-chevron-down icon chevron" />
|
||||
</button>
|
||||
|
||||
<ul class="list">
|
||||
<li v-for="locale in localeLinks" :key="locale.link" class="item">
|
||||
<VPLink
|
||||
class="link"
|
||||
:href="locale.link"
|
||||
:external="false"
|
||||
:lang="locale.lang"
|
||||
:hreflang="locale.lang"
|
||||
rel="alternate"
|
||||
:dir="locale.dir"
|
||||
data-allow-mismatch="attribute"
|
||||
>
|
||||
{{ locale.text }}
|
||||
</VPLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavScreenTranslations {
|
||||
height: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.VPNavScreenTranslations.open {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.icon.lang {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.icon.chevron {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding: 0.25rem 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
line-height: 2.4615385;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
import { useData } from '../composables/data'
|
||||
import { useNavOverflow } from '../composables/nav-overflow'
|
||||
import VPSocialLinks from './VPSocialLinks.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
screen?: boolean
|
||||
}>()
|
||||
|
||||
const { theme } = useData()
|
||||
|
||||
const overflow = props.screen ? null : useNavOverflow()
|
||||
|
||||
const isCollapsed = computed(() => !!overflow && !overflow.state.socialLinks)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPSocialLinks
|
||||
v-if="theme.socialLinks"
|
||||
class="VPNavSocialLinks"
|
||||
:class="[
|
||||
screen ? 'VPNavScreenSocialLinks' : 'VPNavBarSocialLinks',
|
||||
{ collapsed: isCollapsed }
|
||||
]"
|
||||
:links="theme.socialLinks"
|
||||
:ref="(inst: any) => overflow?.setClusterEl('socialLinks', inst?.$el ?? null)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.VPNavBarSocialLinks {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.VPNavBarSocialLinks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,179 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, useId } from 'vue'
|
||||
|
||||
import { useData } from '../composables/data'
|
||||
import { useLangs } from '../composables/langs'
|
||||
import { useNavOverflow } from '../composables/nav-overflow'
|
||||
import VPFlyout from './VPFlyout.vue'
|
||||
import VPLink from './VPLink.vue'
|
||||
import VPMenuLink from './VPMenuLink.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
/** accordion inside the nav screen */
|
||||
screen?: boolean
|
||||
/** titled group inside the `⋯` menu */
|
||||
menu?: boolean
|
||||
}>()
|
||||
|
||||
const { theme } = useData()
|
||||
const { localeLinks, currentLang } = useLangs({
|
||||
linkToCorrespondingPage: true
|
||||
})
|
||||
|
||||
const show = computed(
|
||||
() => !!(localeLinks.value.length && currentLang.value.label)
|
||||
)
|
||||
|
||||
// only the inline bar flyout participates in the overflow engine
|
||||
const overflow = props.screen || props.menu ? null : useNavOverflow()
|
||||
|
||||
const isCollapsed = computed(
|
||||
() => !!overflow && !overflow.state.translations
|
||||
)
|
||||
|
||||
const isOpen = ref(false)
|
||||
const listId = useId()
|
||||
|
||||
function toggle() {
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const localeProps = (locale: (typeof localeLinks.value)[number]) => ({
|
||||
lang: locale.lang,
|
||||
hreflang: locale.lang,
|
||||
rel: 'alternate',
|
||||
dir: locale.dir,
|
||||
'data-allow-mismatch': 'attribute' as const
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- accordion inside the nav screen -->
|
||||
<div
|
||||
v-if="screen && show"
|
||||
class="VPNavTranslations VPNavScreenTranslations"
|
||||
:class="{ open: isOpen }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="title"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-controls="listId"
|
||||
@click="toggle"
|
||||
>
|
||||
<span class="vpi-languages icon lang" aria-hidden="true" />
|
||||
{{ currentLang.label }}
|
||||
<span class="vpi-chevron-down icon chevron" aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<ul v-show="isOpen" :id="listId" class="list">
|
||||
<li v-for="locale in localeLinks" :key="locale.link" class="item">
|
||||
<VPLink
|
||||
class="link"
|
||||
:href="locale.link"
|
||||
:external="false"
|
||||
v-bind="localeProps(locale)"
|
||||
>
|
||||
{{ locale.text }}
|
||||
</VPLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- titled group inside the `⋯` menu -->
|
||||
<div v-else-if="menu && show" class="VPNavTranslations group translations">
|
||||
<p class="title">{{ currentLang.label }}</p>
|
||||
|
||||
<ul>
|
||||
<template v-for="locale in localeLinks" :key="locale.link">
|
||||
<VPMenuLink :item="locale" :external="false" v-bind="localeProps(locale)" />
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- inline flyout in the navbar -->
|
||||
<VPFlyout
|
||||
v-else-if="!menu && show"
|
||||
class="VPNavTranslations VPNavBarTranslations"
|
||||
:class="{ collapsed: isCollapsed }"
|
||||
icon="vpi-languages"
|
||||
:label="theme.langMenuLabel || 'Change language'"
|
||||
:ref="(inst: any) => overflow?.setClusterEl('translations', inst?.$el ?? null)"
|
||||
>
|
||||
<p class="title">{{ currentLang.label }}</p>
|
||||
|
||||
<ul class="items">
|
||||
<template v-for="locale in localeLinks" :key="locale.link">
|
||||
<VPMenuLink :item="locale" :external="false" v-bind="localeProps(locale)" />
|
||||
</template>
|
||||
</ul>
|
||||
</VPFlyout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* flyout variant */
|
||||
.VPNavBarTranslations {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.VPNavBarTranslations {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.VPNavBarTranslations .title {
|
||||
padding: 0 1.5rem 0 0.75rem;
|
||||
line-height: 2.2857143;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
/* menu-group variant (inside the `⋯` menu) — matches the menu group
|
||||
titles */
|
||||
.group > .title {
|
||||
padding: 0 0.75rem;
|
||||
line-height: 2.2857143;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
/* accordion variant (inside the nav screen) */
|
||||
.VPNavScreenTranslations .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.VPNavScreenTranslations .icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.VPNavScreenTranslations .icon.lang {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.VPNavScreenTranslations .icon.chevron {
|
||||
margin-left: 0.25rem;
|
||||
transition: transform 0.25s;
|
||||
}
|
||||
|
||||
.VPNavScreenTranslations.open .icon.chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.VPNavScreenTranslations .list {
|
||||
padding: 0.25rem 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.VPNavScreenTranslations .link {
|
||||
line-height: 2.4615385;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,299 @@
|
||||
import { useMediaQuery } from '@vueuse/core'
|
||||
import { inBrowser } from 'vitepress'
|
||||
import {
|
||||
inject,
|
||||
onScopeDispose,
|
||||
provide,
|
||||
reactive,
|
||||
toValue,
|
||||
watch,
|
||||
type InjectionKey,
|
||||
type MaybeRefOrGetter
|
||||
} from 'vue'
|
||||
|
||||
/**
|
||||
* Priority+ overflow for the navbar (#1271, #2842).
|
||||
*
|
||||
* Collapse order under space pressure: social links → appearance switch →
|
||||
* translations → menu items right-to-left. Collapsed units move into the
|
||||
* `⋯` flyout (VPNavBarExtra) instead of being clipped, so nothing ever
|
||||
* becomes unreachable.
|
||||
*
|
||||
* Collapsed units stay mounted but hidden (visibility: hidden + absolute,
|
||||
* which also removes them from the a11y tree and tab order), so their
|
||||
* natural widths remain measurable and observed — re-expanding never works
|
||||
* from stale data.
|
||||
*/
|
||||
|
||||
export const navClusterUnits = [
|
||||
'translations',
|
||||
'appearance',
|
||||
'socialLinks'
|
||||
] as const
|
||||
|
||||
export type NavClusterUnit = (typeof navClusterUnits)[number]
|
||||
|
||||
export interface NavFitInput {
|
||||
/** widths of the top-level menu items, in nav order (px) */
|
||||
itemWidths: number[]
|
||||
/** cluster unit widths; null = the unit isn't configured on this site */
|
||||
translations: number | null
|
||||
appearance: number | null
|
||||
socialLinks: number | null
|
||||
/** px available to all collapsible units */
|
||||
available: number
|
||||
/** px the `⋯` button occupies once anything is collapsed */
|
||||
extraWidth: number
|
||||
}
|
||||
|
||||
export interface NavFitResult {
|
||||
/** number of menu items that stay in the bar (Infinity = all) */
|
||||
visibleItemCount: number
|
||||
translations: boolean
|
||||
appearance: boolean
|
||||
socialLinks: boolean
|
||||
}
|
||||
|
||||
const allVisible: NavFitResult = {
|
||||
visibleItemCount: Infinity,
|
||||
translations: true,
|
||||
appearance: true,
|
||||
socialLinks: true
|
||||
}
|
||||
|
||||
export function computeNavFit(input: NavFitInput): NavFitResult {
|
||||
const { itemWidths, available, extraWidth } = input
|
||||
|
||||
const itemsTotal = itemWidths.reduce((sum, w) => sum + w, 0)
|
||||
const clusterTotal =
|
||||
(input.translations ?? 0) +
|
||||
(input.appearance ?? 0) +
|
||||
(input.socialLinks ?? 0)
|
||||
|
||||
if (itemsTotal + clusterTotal <= available) return allVisible
|
||||
|
||||
// something must collapse, so the `⋯` button needs room too
|
||||
const budget = available - extraWidth
|
||||
|
||||
if (itemsTotal > budget) {
|
||||
// even the menu alone doesn't fit — the whole cluster collapses and the
|
||||
// menu keeps a contiguous prefix so the bar never shows a gap
|
||||
// (units that aren't configured stay `true`: there is nothing to collapse)
|
||||
let used = 0
|
||||
let visibleItemCount = 0
|
||||
for (const width of itemWidths) {
|
||||
if (used + width > budget) break
|
||||
used += width
|
||||
visibleItemCount++
|
||||
}
|
||||
return {
|
||||
visibleItemCount,
|
||||
translations: input.translations == null,
|
||||
appearance: input.appearance == null,
|
||||
socialLinks: input.socialLinks == null
|
||||
}
|
||||
}
|
||||
|
||||
// menu fits in full; collapse the cluster in reverse keep-priority
|
||||
// (translations is kept longest, social links go first) — once a unit
|
||||
// collapses, everything after it in keep order collapses too
|
||||
const result = { ...allVisible }
|
||||
let used = itemsTotal
|
||||
let dropRest = false
|
||||
|
||||
for (const unit of navClusterUnits) {
|
||||
const width = input[unit]
|
||||
if (width == null) continue
|
||||
if (dropRest || used + width > budget) {
|
||||
dropRest = true
|
||||
result[unit] = false
|
||||
} else {
|
||||
used += width
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/** headroom against sub-pixel rounding and the inter-unit dividers */
|
||||
const SLACK = 24
|
||||
|
||||
/** used until the real `⋯` button has been measured once */
|
||||
const EXTRA_WIDTH_ESTIMATE = 48
|
||||
|
||||
export interface NavOverflow {
|
||||
/** reactive collapse state, all-visible during SSR and below 48rem */
|
||||
state: NavFitResult
|
||||
/** true when anything is collapsed into the `⋯` menu */
|
||||
hasCollapsed: () => boolean
|
||||
setContainerEl(el: HTMLElement | null): void
|
||||
setMenuEl(el: HTMLElement | null): void
|
||||
setExtraEl(el: HTMLElement | null): void
|
||||
setItemEl(index: number, el: HTMLElement | null): void
|
||||
setClusterEl(unit: NavClusterUnit, el: HTMLElement | null): void
|
||||
}
|
||||
|
||||
const navOverflowKey: InjectionKey<NavOverflow> = Symbol('nav-overflow')
|
||||
|
||||
export function useNavOverflow(): NavOverflow | null {
|
||||
return inject(navOverflowKey, null)
|
||||
}
|
||||
|
||||
export function provideNavOverflow(options: {
|
||||
/** stringified nav config — collapse state resets when it changes */
|
||||
itemsKey: MaybeRefOrGetter<string>
|
||||
}): NavOverflow {
|
||||
const state = reactive<NavFitResult>({ ...allVisible })
|
||||
|
||||
const itemEls = new Map<number, HTMLElement>()
|
||||
const clusterEls = new Map<NavClusterUnit, HTMLElement>()
|
||||
let containerEl: HTMLElement | null = null
|
||||
let menuEl: HTMLElement | null = null
|
||||
let extraEl: HTMLElement | null = null
|
||||
let extraWidth = EXTRA_WIDTH_ESTIMATE
|
||||
|
||||
let observer: ResizeObserver | null = null
|
||||
const observed = new Set<HTMLElement>()
|
||||
let scheduled = false
|
||||
|
||||
function observe(el: HTMLElement | null) {
|
||||
// instanceof also guards against fragment roots handing over a comment
|
||||
// node via $el — better to skip a unit than to crash the bar
|
||||
if (!inBrowser || !(el instanceof Element) || observed.has(el)) return
|
||||
observed.add(el)
|
||||
;(observer ??= new ResizeObserver(schedule)).observe(el)
|
||||
}
|
||||
|
||||
function schedule() {
|
||||
if (!inBrowser || scheduled) return
|
||||
scheduled = true
|
||||
requestAnimationFrame(() => {
|
||||
scheduled = false
|
||||
recompute()
|
||||
})
|
||||
}
|
||||
|
||||
const controller: NavOverflow = {
|
||||
state,
|
||||
hasCollapsed: () =>
|
||||
state.visibleItemCount !== Infinity ||
|
||||
!state.translations ||
|
||||
!state.appearance ||
|
||||
!state.socialLinks,
|
||||
setContainerEl(el) {
|
||||
containerEl = el
|
||||
observe(el)
|
||||
schedule()
|
||||
},
|
||||
setMenuEl(el) {
|
||||
menuEl = el
|
||||
observe(el)
|
||||
schedule()
|
||||
},
|
||||
setExtraEl(el) {
|
||||
extraEl = el
|
||||
observe(el)
|
||||
schedule()
|
||||
},
|
||||
setItemEl(index, el) {
|
||||
el ? itemEls.set(index, el) : itemEls.delete(index)
|
||||
// container and menu boxes don't resize when item content changes
|
||||
// (the menu is flex-grown), so the items themselves are observed
|
||||
observe(el)
|
||||
schedule()
|
||||
},
|
||||
setClusterEl(unit, el) {
|
||||
el ? clusterEls.set(unit, el) : clusterEls.delete(unit)
|
||||
observe(el)
|
||||
schedule()
|
||||
}
|
||||
}
|
||||
|
||||
provide(navOverflowKey, controller)
|
||||
|
||||
if (!inBrowser) return controller
|
||||
|
||||
// below tablet size the hamburger + screen own navigation and the bar only
|
||||
// shows title/search/hamburger, so the engine idles in the all-visible state
|
||||
const isEngineActive = useMediaQuery('(min-width: 48rem)')
|
||||
|
||||
// natural width even while the unit is collapsed (clamped by max-width)
|
||||
function measureUnit(el: HTMLElement) {
|
||||
return Math.max(el.offsetWidth, el.scrollWidth)
|
||||
}
|
||||
|
||||
function recompute() {
|
||||
if (!isEngineActive.value) return applyResult(allVisible)
|
||||
if (!containerEl) return
|
||||
|
||||
if (extraEl && extraEl.offsetWidth > 0) extraWidth = extraEl.offsetWidth
|
||||
|
||||
// everything in the row that isn't a collapsible unit (search, slots,
|
||||
// the hamburger…) is measured live and treated as fixed occupancy
|
||||
let fixed = 0
|
||||
for (const child of Array.from(containerEl.children)) {
|
||||
if (!(child instanceof HTMLElement)) continue
|
||||
if (child === menuEl || child === extraEl) continue
|
||||
let isCluster = false
|
||||
for (const el of clusterEls.values()) {
|
||||
if (el === child) {
|
||||
isCluster = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (isCluster) continue
|
||||
fixed += child.offsetWidth
|
||||
}
|
||||
|
||||
const itemWidths: number[] = []
|
||||
for (let i = 0; i < itemEls.size; i++) {
|
||||
const el = itemEls.get(i)
|
||||
// a hole means not every item has registered yet — wait for the next
|
||||
// pass instead of collapsing on partial data
|
||||
if (!el) return
|
||||
itemWidths.push(measureUnit(el))
|
||||
}
|
||||
|
||||
const clusterWidth = (unit: NavClusterUnit) => {
|
||||
const el = clusterEls.get(unit)
|
||||
return el ? measureUnit(el) : null
|
||||
}
|
||||
|
||||
applyResult(
|
||||
computeNavFit({
|
||||
itemWidths,
|
||||
translations: clusterWidth('translations'),
|
||||
appearance: clusterWidth('appearance'),
|
||||
socialLinks: clusterWidth('socialLinks'),
|
||||
available: containerEl.clientWidth - fixed - SLACK,
|
||||
extraWidth
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
function applyResult(result: NavFitResult) {
|
||||
if (state.visibleItemCount !== result.visibleItemCount)
|
||||
state.visibleItemCount = result.visibleItemCount
|
||||
for (const unit of navClusterUnits) {
|
||||
if (state[unit] !== result[unit]) state[unit] = result[unit]
|
||||
}
|
||||
}
|
||||
|
||||
watch(isEngineActive, schedule)
|
||||
|
||||
watch(() => toValue(options.itemsKey), schedule)
|
||||
|
||||
if (document.fonts?.ready) {
|
||||
// a clamped collapsed unit keeps its box size when the font changes, so
|
||||
// the ResizeObserver alone can miss late font swaps
|
||||
document.fonts.ready.then(schedule).catch(() => {})
|
||||
}
|
||||
|
||||
onScopeDispose(() => {
|
||||
observer?.disconnect()
|
||||
observer = null
|
||||
observed.clear()
|
||||
})
|
||||
|
||||
return controller
|
||||
}
|
||||
Loading…
Reference in new issue