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

Compare commits

base: Wroclaw:ac49090615855547680d0b7ecb10c78b5dc258c4
Branches Tags
Wroclaw:main
Wroclaw:college/4/bazy_danych
...
compare: Wroclaw:bcace5cbd71820cd6df901666f4af0134fe1fcbb
Branches Tags
Wroclaw:main
Wroclaw:college/4/bazy_danych

2 commits
ac49090615 ... bcace5cbd7

Author SHA1 Message Date
Wroclaw
bcace5cbd7 components/navigation/navigation: watch for route changes
All checks were successful
Build dev / build (push) Successful in 1m3s
Details 
and select value in nav properly
 2023-12-21 03:31:33 +01:00
Wroclaw
cf29c26abc components/navigation/navigation: move "login" to bottom 
and rename it to "My account"
 2023-12-21 03:29:42 +01:00
1 changed files with 7 additions and 3 deletions
Show stats Expand all files Collapse all files

10
components/navigation/navigation.vue
View file

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