Compare commits

..

2 commits

Author SHA1 Message Date
bcace5cbd7 components/navigation/navigation: watch for route changes
All checks were successful
Build dev / build (push) Successful in 1m3s
and select value in nav properly
2023-12-21 03:31:33 +01:00
cf29c26abc components/navigation/navigation: move "login" to bottom
and rename it to "My account"
2023-12-21 03:29:42 +01:00

View file

@ -1,6 +1,6 @@
<script setup>
import { useDisplay, useTheme } from "vuetify/lib/framework.mjs";
import { ref } from "vue";
import { ref, watch } from "vue";
import { navigateTo, useRoute } from "#app";
const route = useRoute();
@ -9,6 +9,10 @@ const { mobile } = useDisplay();
const navOpen = ref(!mobile.value);
const navSelected = ref([route.path]);
watch(route, (v) => {
navSelected.value = [route.path];
});
const theme = useTheme();
function switchTheme() {
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
@ -22,15 +26,15 @@ function switchTheme() {
</VAppBar>
<VNavigationDrawer v-model="navOpen" :temporary="mobile">
<VList v-model:selected="navSelected" density="compact" nav>
<VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
<VListItem prepend-icon="mdi-account" title="Clients" value="/clients" @click="navigateTo('/clients')" />
<VListItem prepend-icon="mdi-receipt-text" title="Orders" value="/orders" @click="navigateTo('/orders')" />
<VDivider />
</VList>
<template #append>
<VList density="compact" nav>
<VList v-model:selected="navSelected" density="compact" nav>
<VDivider />
<VListItem prepend-icon="mdi-theme-light-dark" title="Switch theme" class="mx-auto" @click="switchTheme()" />
<VListItem prepend-icon="mdi-login" title="My account" value="/login" @click="navigateTo('/login')" />
</VList>
</template>
</VNavigationDrawer>