108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import VPNavbar from '@theme/Nav/VPNavBar.vue'
|
|
import VPNavScreen from '@theme/Nav/VPNavScreen.vue'
|
|
import { computed, provide, watchEffect } from 'vue'
|
|
import { useData, useNav } from '../../composables/index.js'
|
|
import { inBrowser } from '../../utils/index.js'
|
|
|
|
const { page, frontmatter } = useData()
|
|
|
|
const { isScreenOpen, closeScreen, toggleScreen } = useNav()
|
|
|
|
const fixedInclude = ['blog', 'friends', 'blog-archives', 'blog-tags', 'blog-categories']
|
|
|
|
const fixed = computed(() => {
|
|
return fixedInclude.includes(page.value.type as string)
|
|
})
|
|
|
|
const hasNavbar = computed(() => {
|
|
return frontmatter.value.navbar !== false
|
|
})
|
|
|
|
provide('close-screen', closeScreen)
|
|
|
|
watchEffect(() => {
|
|
if (inBrowser) {
|
|
document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<header v-if="hasNavbar" class="vp-nav" :class="{ fixed }">
|
|
<VPNavbar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
|
|
<template #nav-bar-title-before>
|
|
<slot name="nav-bar-title-before" />
|
|
</template>
|
|
<template #nav-bar-title-after>
|
|
<slot name="nav-bar-title-after" />
|
|
</template>
|
|
<template #nav-bar-content-before>
|
|
<slot name="nav-bar-content-before" />
|
|
</template>
|
|
<template #nav-bar-content-after>
|
|
<slot name="nav-bar-content-after" />
|
|
</template>
|
|
<template #nav-bar-menu-before>
|
|
<slot name="nav-bar-menu-before" />
|
|
</template>
|
|
<template #nav-bar-menu-after>
|
|
<slot name="nav-bar-menu-after" />
|
|
</template>
|
|
</VPNavbar>
|
|
|
|
<VPNavScreen :open="isScreenOpen">
|
|
<template #nav-screen-content-before>
|
|
<slot name="nav-screen-content-before" />
|
|
</template>
|
|
<template #nav-screen-content-after>
|
|
<slot name="nav-screen-content-after" />
|
|
</template>
|
|
<template #nav-screen-menu-before>
|
|
<slot name="nav-screen-menu-before" />
|
|
</template>
|
|
<template #nav-screen-menu-after>
|
|
<slot name="nav-screen-menu-after" />
|
|
</template>
|
|
</VPNavScreen>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.vp-nav {
|
|
position: relative;
|
|
top: var(--vp-layout-top-height, 0);
|
|
|
|
/* rtl:ignore */
|
|
left: 0;
|
|
z-index: var(--vp-z-index-nav);
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vp-nav.fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
.vp-nav.fixed :deep(.vp-navbar) {
|
|
background-color: var(--vp-nav-bg-color);
|
|
border-bottom-color: var(--vp-c-gutter);
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
.vp-nav {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
.vp-nav :deep(.vp-menu-badge) {
|
|
padding: 3px 4px;
|
|
margin-left: 4px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
letter-spacing: 0.2px;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|