diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2025-08-14 18:07:12 +0100 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2025-08-14 18:07:12 +0100 |
| commit | 4697556cac819c47d068819b9fc9c3b4ea84e279 (patch) | |
| tree | b832d8fc6b643a8b9d0eeca35c1268e1649da731 /web/components/Nav.vue | |
| parent | dd49c9205bb04844b686b9c3396c40eb49d25826 (diff) | |
Merge confplanner-web and replace fiber with native net/http
Diffstat (limited to 'web/components/Nav.vue')
| -rw-r--r-- | web/components/Nav.vue | 74 |
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 |
