42 lines
931 B
Vue
42 lines
931 B
Vue
<template>
|
|
<UNavigationMenu :items="items" class="w-full justify-start bg-neutral-50">
|
|
<template #list-trailing>
|
|
<div class="flex flex-1 justify-end mx-2">
|
|
<UBadge
|
|
icon="i-mdi-clock-outline"
|
|
size="md"
|
|
color="secondary"
|
|
variant="solid"
|
|
class="font-mono"
|
|
>
|
|
{{ currentTime }}
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
</UNavigationMenu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { NavigationMenuItem } from "@nuxt/ui";
|
|
import { appState } from "#imports";
|
|
|
|
const state = appState();
|
|
|
|
const currentTime = computed(() => {
|
|
return state.value.time.toLocaleTimeString();
|
|
});
|
|
|
|
const items = ref<NavigationMenuItem[]>([
|
|
{
|
|
icon: "i-mdi-home",
|
|
to: "/",
|
|
active: false,
|
|
},
|
|
{
|
|
label: "Data Structures",
|
|
icon: "i-material-symbols-account-tree-outline-rounded",
|
|
to: "/data",
|
|
active: false,
|
|
},
|
|
]);
|
|
</script>
|