58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { useRouteLocale } from 'vuepress/client'
|
|
import { useSidebar } from '../../composables/sidebar.js'
|
|
import { useData } from '../../composables/data.js'
|
|
import VPLink from '../VPLink.vue'
|
|
import VPImage from '../VPImage.vue'
|
|
|
|
const { theme, site } = useData()
|
|
const { hasSidebar } = useSidebar()
|
|
const routeLocale = useRouteLocale()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="vp-navbar-title" :class="{ 'has-sidebar': hasSidebar }">
|
|
<VPLink class="title" :href="theme.home ?? routeLocale">
|
|
<slot name="nav-bar-title-before" />
|
|
|
|
<VPImage
|
|
v-if="theme.logo"
|
|
class="logo"
|
|
:image="{ light: theme.logo, dark: theme.logoDark || theme.logo }"
|
|
/>
|
|
<span>{{ site.title }}</span>
|
|
|
|
<slot name="nav-bar-title-after" />
|
|
</VPLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: var(--vp-nav-height);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--vp-c-text-1);
|
|
border-bottom: 1px solid transparent;
|
|
transition: opacity var(--t-color), color var(--t-color), border-bottom var(--t-color);
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
.title {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vp-navbar-title.has-sidebar .title {
|
|
border-bottom-color: var(--vp-c-divider);
|
|
}
|
|
}
|
|
|
|
:deep(.logo) {
|
|
height: 24px;
|
|
margin-right: 8px;
|
|
}
|
|
</style>
|