Wroclaw/WorkshopTasker
2
1
Fork 1
Code Issues Pull requests Activity Actions

nav: select automatically current page when visiting first time

Browse source 
for example after refresh, or when component gets loaded
This commit is contained in:
Wroclaw 2023-12-12 16:17:21 +01:00
parent 10ff342991
commit f7519f32b3
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
components/navigation/navigation.vue
View file

@ -1,10 +1,13 @@
<script setup> <script setup>
import { useDisplay } from "vuetify/lib/framework.mjs"; import { useDisplay } from "vuetify/lib/framework.mjs";
import { ref } from "vue"; import { ref } from "vue";
import { navigateTo } from "#app"; import { navigateTo, useRoute } from "#app";
const route = useRoute();
const { mobile } = useDisplay(); const { mobile } = useDisplay();
const navOpen = ref(!mobile.value); const navOpen = ref(!mobile.value);
const navSelected = ref([route.path]);
</script> </script>
<template> <template>
@ -13,7 +16,7 @@ const navOpen = ref(!mobile.value);
<VToolbarTitle>Database Project</VToolbarTitle> <VToolbarTitle>Database Project</VToolbarTitle>
</VAppBar> </VAppBar>
<VNavigationDrawer v-model="navOpen" :temporary="mobile"> <VNavigationDrawer v-model="navOpen" :temporary="mobile">
<VList density="compact" nav> <VList v-model:selected="navSelected" density="compact" nav>
<VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" /> <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-account" title="Clients" value="/clients" @click="navigateTo('/clients')" />
<VDivider /> <VDivider />