130 lines
2.6 KiB
Vue
130 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
import { useRoute } from 'vuepress/client'
|
|
import { useBlogExtract } from '../composables/index.js'
|
|
import AutoLink from './AutoLink.vue'
|
|
import IconArchive from './icons/IconArchive.vue'
|
|
import IconTag from './icons/IconTag.vue'
|
|
import IconChevronRight from './icons/IconChevronRight.vue'
|
|
|
|
const props = defineProps<{
|
|
isLocal?: boolean
|
|
}>()
|
|
|
|
const route = useRoute()
|
|
|
|
const { hasBlogExtract, tags, archives } = useBlogExtract()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="hasBlogExtract" class="blog-nav" :class="{ local: props.isLocal }">
|
|
<AutoLink
|
|
class="nav-link"
|
|
:class="{ active: route.path === tags.link }"
|
|
:href="tags.link"
|
|
>
|
|
<IconTag class="icon icon-logo" />
|
|
<span class="text">{{ tags.text }}</span>
|
|
<span class="total">{{ tags.total }}</span>
|
|
<IconChevronRight class="icon" />
|
|
</AutoLink>
|
|
<AutoLink
|
|
class="nav-link"
|
|
:class="{ active: route.path === archives.link }"
|
|
:href="archives.link"
|
|
>
|
|
<IconArchive class="icon icon-logo" />
|
|
<span class="text">{{ archives.text }}</span>
|
|
<span class="total">{{ archives.total }}</span>
|
|
<IconChevronRight class="icon" />
|
|
</AutoLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.blog-nav {
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.blog-nav.local {
|
|
display: none;
|
|
padding-top: 2rem;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.blog-nav.local {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.blog-nav.local {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 10px 14px 10px 20px;
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--vp-c-text-1);
|
|
background-color: var(--vp-c-bg);
|
|
border-radius: 8px;
|
|
box-shadow: var(--vp-shadow-1);
|
|
transition: var(--t-color);
|
|
transition-property: background-color, color, box-shadow, transform;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.nav-link:hover {
|
|
box-shadow: var(--vp-shadow-2);
|
|
transform: scale(1.002);
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link.active {
|
|
color: var(--vp-c-brand-1);
|
|
}
|
|
|
|
.blog-nav.local .nav-link {
|
|
flex: 1;
|
|
max-width: 200px;
|
|
margin-right: 20px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.blog-nav.local .nav-link:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.nav-link .text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.nav-link .total {
|
|
padding-right: 8px;
|
|
color: var(--vp-c-text-3);
|
|
transition: color var(--t-color);
|
|
}
|
|
|
|
.nav-link .icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
font-size: 1.2em;
|
|
color: var(--vp-c-text-3);
|
|
transition: color var(--t-color);
|
|
}
|
|
|
|
.nav-link .icon-logo {
|
|
margin-right: 10px;
|
|
color: var(--vp-c-brand-1);
|
|
}
|
|
</style>
|