68 lines
No EOL
1.6 KiB
Vue
68 lines
No EOL
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from '@nuxt/ui';
|
|
|
|
const route = useRoute();
|
|
|
|
const items = computed<NavigationMenuItem[]>(() => [{
|
|
label: 'Home',
|
|
to: '/',
|
|
icon: 'i-line-md-home-twotone',
|
|
active: route.path == '/'
|
|
}, {
|
|
label: 'Projects',
|
|
to: '/projects',
|
|
icon: 'i-line-md-document-code-twotone',
|
|
active: route.path.startsWith('/projects')
|
|
}, {
|
|
label: 'Blog',
|
|
icon: 'i-line-md-text-box-multiple-twotone',
|
|
to: '/blog',
|
|
active: route.path.startsWith('/blog')
|
|
}, {
|
|
label: 'About Me',
|
|
icon: 'i-line-md-question-circle-twotone',
|
|
to: '/about',
|
|
active: route.path.startsWith('/about')
|
|
}])
|
|
</script>
|
|
|
|
<template>
|
|
<UHeader
|
|
:toggle="{
|
|
color: 'primary',
|
|
variant: 'subtle',
|
|
class: 'rounded-full'
|
|
}"
|
|
>
|
|
<template #title>
|
|
ZervoDev
|
|
</template>
|
|
|
|
<UNavigationMenu :items="items" />
|
|
|
|
<template #right>
|
|
<UColorModeButton />
|
|
</template>
|
|
|
|
<template #body>
|
|
<UNavigationMenu
|
|
:items="items"
|
|
orientation="vertical"
|
|
class="-mx-2.5"
|
|
>
|
|
<template #item="{ item, active }">
|
|
<NuxtLink
|
|
:to="item.to"
|
|
class="flex items-center gap-3 px-2 py-2 text-base font-bold rounded-lg transition-colors"
|
|
:class="[
|
|
active ? 'text-primary-500' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800'
|
|
]"
|
|
>
|
|
<icon :name="item.icon" class="w-7 h-7" />
|
|
<span>{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</template>
|
|
</UNavigationMenu>
|
|
</template>
|
|
</UHeader>
|
|
</template> |