initial

frontend/app/components/NavBar.vue

@@ -0,0 +1,42 @@
+<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>