aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/app/AppHeader.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/AppHeader.vue
parent3adc965dd09490b7efa1cce9f09b0a3b30970277 (diff)
downloadHydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.tar.gz
HydroRoll-56a6240bf700ac307342ed494d8bfbabe5c822dc.zip
✨docs init
Diffstat (limited to 'docs/components/app/AppHeader.vue')
-rw-r--r--docs/components/app/AppHeader.vue112
1 files changed, 0 insertions, 112 deletions
diff --git a/docs/components/app/AppHeader.vue b/docs/components/app/AppHeader.vue
deleted file mode 100644
index c5a3fd8..0000000
--- a/docs/components/app/AppHeader.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script setup lang="ts">
-const { config } = useDocus()
-const { navigation } = useContent()
-const { hasDocSearch } = useDocSearch()
-
-const hasDialog = computed(() => navigation.value?.length > 1 || navigation.value?.[0]?.children?.length)
-
-defineProps({
- ...variants
-})
-</script>
-
-<template>
- <header :class="{ 'has-dialog': hasDialog, 'has-doc-search': hasDocSearch }">
- <Container :fluid="config?.header?.fluid ">
- <div class="section left">
- <AppHeaderDialog v-if="hasDialog" />
- <AppHeaderLogo />
- </div>
-
- <div class="section center">
- <AppHeaderLogo v-if="hasDialog" />
- <AppHeaderNavigation />
- </div>
-
- <div class="section right">
- <AppSearch v-if="hasDocSearch" />
- <ThemeSelect />
- <div class="social-icons">
- <AppSocialIcons />
- </div>
- </div>
- </Container>
- </header>
-</template>
-
-<style scoped lang="ts">
-css({
- ':deep(.icon)': {
- width: '{space.4}',
- height: '{space.4}'
- },
-
- '.navbar-logo': {
- '.left &': {
- '.has-dialog &': {
- display: 'none',
- '@lg': {
- display: 'block'
- }
- },
- },
- '.center &': {
- display: 'block',
- '@lg': {
- display: 'none'
- }
- }
- },
-
- header: {
- backdropFilter: '{elements.backdrop.filter}',
- position: 'sticky',
- top: 0,
- zIndex: 10,
- width: '100%',
- borderBottom: '1px solid {elements.border.primary.static}',
- backgroundColor: '{elements.backdrop.background}',
- height: '{docus.header.height}',
-
- '.container': {
- display: 'grid',
- height: '100%',
- gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
- gap: '{space.2}'
- },
-
- '.section': {
- display: 'flex',
- alignItems: 'center',
- flex: 'none',
- '&.left': {
- gridColumn: 'span 4 / span 4',
- '@lg': {
- marginLeft: 0
- },
- },
- '&.center': {
- gridColumn: 'span 4 / span 4',
- justifyContent: 'center',
- flex: '1',
- zIndex: '1'
- },
- '&.right': {
- display: 'flex',
- gridColumn: 'span 4 / span 4',
- justifyContent: 'flex-end',
- alignItems: 'center',
- flex: 'none',
- marginRight: 'calc(0px - {space.4})',
- '.social-icons': {
- display: 'none',
- '@md': {
- display: 'flex',
- alignItems: 'center',
- }
- }
- }
- }
- }
-})
-</style>