From 3adc965dd09490b7efa1cce9f09b0a3b30970277 Mon Sep 17 00:00:00 2001
From: 简律纯 <hsiangnianian@outlook.com>
Date: Wed, 19 Apr 2023 17:30:39 +0800
Subject: ✨优化文档
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/app/AppHeaderLogo.vue | 63 +++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 docs/components/app/AppHeaderLogo.vue

(limited to 'docs/components/app/AppHeaderLogo.vue')

diff --git a/docs/components/app/AppHeaderLogo.vue b/docs/components/app/AppHeaderLogo.vue
new file mode 100644
index 0000000..51b3e62
--- /dev/null
+++ b/docs/components/app/AppHeaderLogo.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const { config } = useDocus()
+const logo = computed(() => config.value.header?.logo || false)
+const title = computed(() => config.value.header?.title || config.value.title)
+</script>
+
+<template>
+  <NuxtLink class="navbar-logo" to="/" :aria-label="title">
+    <!-- Only Logo -->
+    <span class="logo" v-if="logo">
+      <component :is="logo" v-if="typeof logo === 'string'" />
+      <template v-else-if="logo.light && logo.dark">
+        <img :src="logo.light" alt="" class="light-img">
+        <img :src="logo.dark" alt="" class="dark-img">
+      </template>
+      <Logo v-else-if="logo" />
+    </span>
+
+    <!-- Only title -->
+    <span class="title" v-else>
+      {{ title }}
+    </span>
+  </NuxtLink>
+</template>
+
+<style lang="ts" scoped>
+css({
+  a: {
+    display: 'flex',
+    alignItems: 'center',
+    flex: 'none',
+
+    '.logo': {
+      height: '{docus.header.logo.height}',
+      width: 'auto',
+      'img, svg': {
+        height: 'inherit',
+      },
+      '.light-img': {
+        display: 'block',
+        '@dark': {
+          display: 'none'
+        }
+      },
+      '.dark-img': {
+        display: 'none',
+        '@dark': {
+          display: 'block'
+        }
+      },
+    },
+
+    '.title': {
+      fontSize: '{docus.header.title.fontSize}',
+      fontWeight: '{docus.header.title.fontWeight}',
+      color: '{docus.header.title.color.static}',
+      '&:hover': {
+        color: '{docus.header.title.color.hover}',
+      }
+    }
+  }
+})
+</style>
-- 
cgit v1.2.3-70-g09d2

