51 lines
No EOL
1.1 KiB
Vue
51 lines
No EOL
1.1 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>
|
|
</UHeader>
|
|
</template> |