Русович Виолетта Игоревна
81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
|
|
import { useLangs } from 'vitepress/dist/client/theme-default/composables/langs'
|
|
import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
|
|
import { normalizeLink } from 'vitepress/dist/client/theme-default/support/utils'
|
|
import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
|
|
|
|
const { site, theme } = useData()
|
|
const { hasSidebar } = useSidebar()
|
|
const { currentLang } = useLangs()
|
|
|
|
const link = computed(() =>
|
|
typeof theme.value.logoLink === 'string'
|
|
? theme.value.logoLink
|
|
: theme.value.logoLink?.link
|
|
)
|
|
|
|
const rel = computed(() =>
|
|
typeof theme.value.logoLink === 'string'
|
|
? undefined
|
|
: theme.value.logoLink?.rel
|
|
)
|
|
|
|
const target = computed(() =>
|
|
typeof theme.value.logoLink === 'string'
|
|
? undefined
|
|
: theme.value.logoLink?.target
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="VPNavBarTitle CustomNavBarTitle" :class="{ 'has-sidebar': hasSidebar }">
|
|
<a
|
|
class="title"
|
|
:href="link ?? normalizeLink(currentLang.link)"
|
|
:rel="rel"
|
|
:target="target"
|
|
>
|
|
<slot name="nav-bar-title-before" />
|
|
<template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
|
|
<template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
|
|
<slot name="nav-bar-title-after" />
|
|
<VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
|
|
</a>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid transparent;
|
|
width: 100%;
|
|
height: var(--vp-nav-height);
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
line-height: 28px;
|
|
color: var(--color-text-inactive);
|
|
transition: opacity 0.25s;
|
|
gap: 20px;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
.title {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/*
|
|
.VPNavBarTitle.has-sidebar .title {
|
|
border-bottom-color: var(--vp-c-divider);
|
|
}
|
|
*/
|
|
}
|
|
|
|
:deep(.logo) {
|
|
height: var(--vp-nav-logo-height);
|
|
}
|
|
</style>
|