WorkshopTasker/components/navigation/navigation.vue
Wroclaw f7519f32b3 nav: select automatically current page when visiting first time
for example after refresh, or when component gets loaded
2023-12-12 18:59:42 +01:00

25 lines
865 B
Vue

<script setup>
import { useDisplay } from "vuetify/lib/framework.mjs";
import { ref } from "vue";
import { navigateTo, useRoute } from "#app";
const route = useRoute();
const { mobile } = useDisplay();
const navOpen = ref(!mobile.value);
const navSelected = ref([route.path]);
</script>
<template>
<VAppBar v-if="mobile" order="5">
<VAppBarNavIcon @click.end="navOpen = !navOpen" />
<VToolbarTitle>Database Project</VToolbarTitle>
</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')" />
<VDivider />
</VList>
</VNavigationDrawer>
</template>