WorkshopTasker/components/navigation/navigation.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>