118 lines
2.5 KiB
Vue
118 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
|
|
import {getAssetURL} from "@/utils/function.ts";
|
|
import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
|
|
import {computed} from "vue";
|
|
|
|
type Widget = {
|
|
icon: string[]
|
|
url: string
|
|
title: string
|
|
}
|
|
|
|
const littleWidget: Widget[] = [
|
|
{
|
|
icon: ['fas', 'gauge'],
|
|
url: "/netdata/",
|
|
title: "Pi Dashboard",
|
|
},
|
|
{
|
|
icon: ['fas', 'cloud'],
|
|
url: "/files/",
|
|
title: "Tiny File Manager",
|
|
},
|
|
{
|
|
icon: ['fas', 'code-branch'],
|
|
url: "/git/",
|
|
title: "Git Repository"
|
|
}
|
|
]
|
|
const logoUrl = getAssetURL("logo-c.png")
|
|
const logoType: string = "logo";
|
|
const showLogo = computed(() => logoType === 'text')
|
|
|
|
const entry = [
|
|
{
|
|
title: '主页',
|
|
icon: ['fas', 'home'],
|
|
entry: [],
|
|
},
|
|
{
|
|
title: '文章',
|
|
icon: ['fas', 'pen'],
|
|
entry: [
|
|
{
|
|
title: '博客',
|
|
url: false,
|
|
to: 'blog'
|
|
},
|
|
{
|
|
title: '日记',
|
|
url: false,
|
|
to: 'log'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: '作品',
|
|
icon: ['fas', 'brush'],
|
|
entry: [
|
|
{
|
|
title: '软件',
|
|
url: false,
|
|
to: 'soft'
|
|
},
|
|
{
|
|
title: '仓库',
|
|
url: true,
|
|
to: 'https://cantyonion.site/git'
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: '杂谈',
|
|
icon: ['fas', 'chess-rook'],
|
|
entry: []
|
|
}
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<nav
|
|
class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md"
|
|
>
|
|
<div class="container mx-auto flex w-full max-w-screen-xl items-center justify-center sm:justify-between">
|
|
<!-- Logo -->
|
|
<div v-if="showLogo" class="h-full text-4xl min-w-16 logo py-3.5">
|
|
<span>CantyOni_on's Index</span>
|
|
</div>
|
|
<div v-else class="py-2">
|
|
<img :src="logoUrl" alt="" class="h-12 w-12"/>
|
|
</div>
|
|
|
|
<!-- Entry -->
|
|
<div class="flex">
|
|
<nav-bar-entry-item v-for="item in entry" :key="item.title"
|
|
:entry="item.entry" :icon="item.icon"
|
|
:title="item.title"/>
|
|
</div>
|
|
|
|
<!-- 快速跳转小组件 -->
|
|
<div class="hidden items-center justify-between gap-4 text-xl sm:flex">
|
|
<a v-for="item in littleWidget"
|
|
:key="item.url" :href=item.url :title=item.title
|
|
class="transition-all hover:scale-125">
|
|
<font-awesome-icon :icon="item.icon"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- 用于隔开元素的 -->
|
|
<div class="mb-4 h-16 w-full"></div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.logo {
|
|
font-family: BaconyScript, serif;
|
|
}
|
|
</style> |