33 lines
1.2 KiB
Vue
33 lines
1.2 KiB
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-home" title="Home" value="/" @click="navigateTo('/')" />
|
||
|
|
<VListItem prepend-icon="mdi-login" title="Login" value="/login" @click="navigateTo('/login')" />
|
||
|
|
<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>
|