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
|
<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>
|