forked from vuejs/vitepress
-
Notifications
You must be signed in to change notification settings - Fork 1
/
VPNav.vue
58 lines (50 loc) · 1.67 KB
/
VPNav.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script setup lang="ts">
import { provide } from 'vue'
import { useNav } from '../composables/nav'
import { useSidebar } from '../composables/sidebar'
import VPNavBar from './VPNavBar.vue'
import VPNavScreen from './VPNavScreen.vue'
const { isScreenOpen, closeScreen, toggleScreen } = useNav()
const { hasSidebar } = useSidebar()
provide('close-screen', closeScreen)
</script>
<template>
<header class="VPNav" :class="{ 'no-sidebar' : !hasSidebar }">
<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>
</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>
</VPNavScreen>
</header>
</template>
<style scoped>
.VPNav {
position: relative;
top: 0;
left: 0;
z-index: var(--vp-z-index-nav);
width: 100%;
}
@media (min-width: 960px) {
.VPNav {
position: fixed;
}
.VPNav.no-sidebar {
backdrop-filter: saturate(50%) blur(8px);
-webkit-backdrop-filter: saturate(50%) blur(8px);
}
@supports not (backdrop-filter: saturate(50%) blur(8px)) {
.VPNav.no-sidebar {
background: rgba(255, 255, 255, 0.95);
}
.dark .VPNav.no-sidebar {
background: rgba(36, 36, 36, 0.95);
}
}
}
</style>