WorkshopTasker/components/navigation/navigation.vue

<script setup>
import { useDisplay } from "vuetify/lib/framework.mjs";
import { ref } from "vue";
import { navigateTo } from "#app";

const { mobile } = useDisplay();
const navOpen = ref(!mobile.value);
</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>
      <VListItem
        prepend-avatar="https://cdn.discordapp.com/avatars/317001025074757632/248f503c44bc95ac75f55f5835e6ff9f.png?size=512"
        title="Anonymous"
      />
    </VList> -->

    <VDivider />

    <VList 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 />
      <VListItem prepend-icon="mdi-home" title="Home" value="/" @click="navigateTo('/')" />
      <VListItem prepend-icon="mdi-table" title="Table Example" value="/tableExample" @click="navigateTo('/tableExample')" />
      <VListItem prepend-icon="mdi-form-textarea" title="Echo Form" value="/forms" @click="navigateTo('/forms')" />
    </VList>
  </VNavigationDrawer>
</template>