51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<script setup>
|
|
import { RouterLink, RouterView } from 'vue-router'
|
|
import { BNavItem } from 'bootstrap-vue-next'
|
|
</script>
|
|
|
|
<template>
|
|
<main class="d-flex flex-nowrap">
|
|
<div
|
|
id="nav"
|
|
class="d-flex flex-column flex-shrink-0 p-3"
|
|
>
|
|
<a
|
|
href="/"
|
|
class="mb-4 text-decoration-none text-center"
|
|
>
|
|
<span class="fs-4">
|
|
<i class="fa-solid fa-coins"></i>
|
|
<span id="app-name">Budget</span>
|
|
</span>
|
|
</a>
|
|
<ul class="nav nav-pills flex-column mb-auto">
|
|
<RouterLink
|
|
v-for="url in ['/', '/transactions', '/categories', '/bank_accounts', '/saving_accounts', '/files', '/users']"
|
|
v-slot="{ href, route, isActive }"
|
|
:key="url"
|
|
:to="url"
|
|
custom
|
|
>
|
|
<BNavItem
|
|
:href="href"
|
|
:active="isActive"
|
|
>
|
|
<i
|
|
class="me-2"
|
|
:class="route.meta.icon"
|
|
></i>
|
|
<span class="nav-item-label">{{ route.meta.label }}</span>
|
|
</BNavItem>
|
|
</RouterLink>
|
|
</ul>
|
|
<a
|
|
href="/logout"
|
|
class="px-3 p-lg-0 text-decoration-none"
|
|
>
|
|
<i class="fa-solid fa-arrow-right-from-bracket"></i>
|
|
<span class="ps-2 d-none d-lg-inline">Déconnexion</span>
|
|
</a>
|
|
</div>
|
|
<RouterView id="body" />
|
|
</main>
|
|
</template>
|