aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/app/AppHeaderDialog.vue
diff options
context:
space:
mode:
author简律纯 <hsiangnianian@outlook.com>2023-04-19 17:50:02 +0800
committer简律纯 <hsiangnianian@outlook.com>2023-04-19 17:50:02 +0800
commit56a6240bf700ac307342ed494d8bfbabe5c822dc (patch)
tree0b1288a2ec1cbb538c11f4c122b6a97b9c55a05f /docs/components/app/AppHeaderDialog.vue
parent3adc965dd09490b7efa1cce9f09b0a3b30970277 (diff)
downloadHydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.tar.gz
HydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.zip
✨docs init
Diffstat (limited to 'docs/components/app/AppHeaderDialog.vue')
-rw-r--r--docs/components/app/AppHeaderDialog.vue117
1 files changed, 0 insertions, 117 deletions
diff --git a/docs/components/app/AppHeaderDialog.vue b/docs/components/app/AppHeaderDialog.vue
deleted file mode 100644
index e71b83c..0000000
--- a/docs/components/app/AppHeaderDialog.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<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>