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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<script setup lang="ts">
const { navigation } = useContent()
const { config } = useDocus()
const filtered = computed(() => config.value.aside?.exclude || [])
const links = computed(() => {
return (navigation.value || []).filter((item: any) => {
if (filtered.value.includes(item._path)) { return false }
return true
})
})
const { visible, open, close } = useMenu()
watch(visible, v => (v ? open() : close()))
</script>
<template>
<button aria-label="Menu" @click="open">
<Icon name="heroicons-outline:menu" aria-hidden="”true”" />
</button>
<!-- eslint-disable-next-line vue/no-multiple-template-root -->
<teleport to="body">
<nav v-if="visible" class="dialog" @click="close">
<div @click.stop>
<div class="wrapper">
<button aria-label="Menu" @click="close">
<Icon name="heroicons-outline:x" aria-hidden="”true”" />
</button>
<div class="icons">
<AppSocialIcons />
</div>
</div>
<DocsAsideTree :links="links" />
</div>
</nav>
</teleport>
</template>
<style scoped lang="ts">
css({
button: {
position: 'relative',
zIndex: '10',
display: 'flex',
padding: '{space.4} {space.4} {space.4} 0',
'@lg': {
display: 'none'
},
color: '{color.gray.500}',
'@dark': {
color: '{color.gray.400}',
},
'&:hover': {
color: '{color.gray.700}',
'@dark': {
color: '{color.gray.200}',
}
},
},
'.dialog': {
position: 'fixed',
inset: '0 0 0 0',
zIndex: '50',
display: 'flex',
alignItems: 'flex-start',
overflowY: 'auto',
backgroundColor: 'rgba(255, 255, 255, 0.5)',
backdropFilter: '{elements.backdrop.filter}',
'@dark': {
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
'@lg': {
display: 'none'
},
'.icons': {
overflow: 'auto'
},
// Dialog content
'& > div': {
maxWidth: '{size.xs}',
width: '100%',
minHeight: '100%',
boxShadow: '{shadow.md}',
px: '{space.4}',
backgroundColor: '{color.white}',
'@dark': {
backgroundColor: '{color.black}',
},
'@sm': {
px: '{space.6}',
},
// Dialog header
'& > div': {
height: '{docus.header.height}',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
borderBottom: '1px solid transparent',
gap: '{space.2}',
'.icons': {
display: 'flex',
alignItems: 'center',
}
}
}
},
':deep(.icon)': {
width: '{space.4}',
height: '{space.4}'
}
})
</style>
|