Wroclaw
54907d6eec
All checks were successful
Build dev / build (push) Successful in 1m14s
the useRoute() did not return ref, so the previous implementation did not work
41 lines
1.4 KiB
Vue
41 lines
1.4 KiB
Vue
<script setup>
|
|
import { useDisplay, useTheme } from "vuetify/lib/framework.mjs";
|
|
import { ref, watch } from "vue";
|
|
import { navigateTo, useRouter } from "#app";
|
|
|
|
const route = useRouter().currentRoute;
|
|
|
|
const { mobile } = useDisplay();
|
|
const navOpen = ref(!mobile.value);
|
|
const navSelected = ref([route.value.path]);
|
|
|
|
watch(route, (v) => {
|
|
navSelected.value = [v.path];
|
|
});
|
|
|
|
const theme = useTheme();
|
|
function switchTheme() {
|
|
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
|
|
}
|
|
</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-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 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>
|
|
</template>
|