diff options
Diffstat (limited to 'components/Nav.vue')
| -rw-r--r-- | components/Nav.vue | 16 |
1 files changed, 11 insertions, 5 deletions
diff --git a/components/Nav.vue b/components/Nav.vue index 06a0295..280af02 100644 --- a/components/Nav.vue +++ b/components/Nav.vue @@ -1,10 +1,12 @@ <script setup lang="ts"> +import { Calendar, Icon, SquareGanttChart, TrainTrack } from 'lucide-vue-next'; + const route = useRouter(); const navList = ref([ - { title: "Agenda", path: "/agenda", navigating: false }, - { title: "Events", path: "/events", navigating: false }, - { title: "Tracks", path: "/tracks", navigating: false }, + { 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) => { @@ -26,14 +28,18 @@ route.afterEach(() => { <ul class="nav-list"> <li v-for="item in navList" :key="item.title" :class="{ active: $route.path === item.path }"> <NuxtLink :to="item.path"> - <span>{{ item.title }}</span> <Spinner v-if="item.navigating" color="var(--color-text-muted)" :size="16"/></NuxtLink> - + <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; |