135 lines
3.3 KiB
Vue
135 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
|
|
|
import {getAssetURL} from "@/utils/function.ts";
|
|
import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
|
|
import {computed, ref} 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 isExpended = ref<boolean>(false)
|
|
|
|
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: []
|
|
}
|
|
]
|
|
|
|
const menuExpanded = () => {
|
|
isExpended.value = !isExpended.value
|
|
}
|
|
|
|
</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 h-16 w-full items-center justify-between px-4 md:px-0 xl:max-w-screen-xl">
|
|
<!-- 下拉菜单按钮 -->
|
|
<div class="flex h-8 w-10 items-center justify-center rounded-md border-gray-600 md:hidden"
|
|
@click="menuExpanded"
|
|
>
|
|
<font-awesome-icon :icon="['fas', 'bars']" class="h-6"/>
|
|
</div>
|
|
<!-- Logo -->
|
|
<div class="absolute left-1/2 -translate-x-1/2 md:relative md:left-0 md:translate-x-0">
|
|
<!-- 文字模式 -->
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Entry -->
|
|
<div :class="{'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended}"
|
|
class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex
|
|
md:h-auto md:bg-transparent md:opacity-100"
|
|
>
|
|
<nav-bar-entry-item v-for="item in entry" :key="item.title"
|
|
:entry="item.entry" :icon="item.icon"
|
|
:title="item.title"/>
|
|
</div>
|
|
|
|
<!-- 快速跳转小组件 -->
|
|
<div class="flex items-center justify-between gap-4 text-xl">
|
|
<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> |