aboutsummaryrefslogtreecommitdiffstats
path: root/web/components/Nav.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2025-08-14 18:07:12 +0100
committerLeonardo Bishop <me@leonardobishop.com>2025-08-14 18:07:12 +0100
commit4697556cac819c47d068819b9fc9c3b4ea84e279 (patch)
treeb832d8fc6b643a8b9d0eeca35c1268e1649da731 /web/components/Nav.vue
parentdd49c9205bb04844b686b9c3396c40eb49d25826 (diff)
Merge confplanner-web and replace fiber with native net/http
Diffstat (limited to 'web/components/Nav.vue')
-rw-r--r--web/components/Nav.vue74
1 files changed, 74 insertions, 0 deletions
diff --git a/web/components/Nav.vue b/web/components/Nav.vue
new file mode 100644
index 0000000..1e08e54
--- /dev/null
+++ b/web/components/Nav.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Calendar, SquareGanttChart, TrainTrack } from 'lucide-vue-next';
+
+const route = useRouter();
+
+const navList = ref([
+ { title: "Agenda", path: "/agenda", icon: Calendar, navigating: false },
+ { title: "Events", path: "/events", icon: SquareGanttChart, navigating: false },
+ { title: "Tracks", path: "/tracks", icon: TrainTrack, navigating: false },
+])
+
+route.beforeEach((to, from, next) => {
+ navList.value.forEach((item) => {
+ item.navigating = to.path === item.path;
+ });
+ next();
+});
+
+route.afterEach(() => {
+ navList.value.forEach((item) => {
+ item.navigating = false;
+ });
+});
+</script>
+
+<template>
+ <Panel class="nav">
+ <ul class="nav-list">
+ <li v-for="item in navList" :key="item.title" :class="{ active: $route.path === item.path }">
+ <NuxtLink :to="item.path">
+ <span class="text-icon"><component :is="item.icon" /> <span>{{ item.title }}</span></span> <Spinner v-if="item.navigating" color="var(--color-text-muted)" :size="16"/></NuxtLink>
+ </li>
+ </ul>
+ </Panel>
+</template>
+
+<style scoped>
+.text-icon > svg {
+ width: var(--text-normal);
+ height: var(--text-normal);
+}
+
+.nav-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.nav-list > li {
+ width: 100%;
+}
+
+.nav-list > li > a {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--color-accent);
+ padding: 0.4rem 1rem;
+ left: -1rem;
+ width: calc(100%);
+ position: relative;
+}
+
+.nav-list > li.active > a {
+ color: var(--color-primary);
+ font-weight: 600;
+ background-color: var(--color-background-muted);
+}
+
+.nav-list > li > a:hover {
+ background-color: var(--color-background-muted);
+}
+
+</style> \ No newline at end of file