port-nimara-client-portal/pages/dashboard.vue

78 lines
1.8 KiB
Vue

<template>
<v-app full-height>
<v-navigation-drawer>
<v-img src="/logo.jpg" height="75" class="my-6" />
<v-list color="primary" lines="two">
<v-list-item
to="/dashboard/site"
title="Site Analytics"
prepend-icon="mdi-view-dashboard"
/>
<v-list-item
to="/dashboard/data"
title="Data Analytics"
prepend-icon="mdi-finance"
/>
</v-list>
<template #append>
<v-list lines="two">
<v-list-item
@click="logOut"
title="Log out"
prepend-icon="mdi-logout"
base-color="error"
/>
</v-list>
</template>
</v-navigation-drawer>
<v-app-bar v-if="mdAndDown" elevation="2">
<template #prepend>
<v-img src="/logo.jpg" width="75" class="ml-3" />
</template>
<template #append>
<v-btn
@click="logOut"
class="mr-3"
variant="tonal"
color="error"
icon="mdi-logout"
/>
</template>
</v-app-bar>
<v-main>
<router-view />
<v-bottom-navigation :active="mdAndDown" color="primary" elevation="2">
<v-btn to="/dashboard/site">
<v-icon icon="mdi-view-dashboard" />
<span>Site Analytics</span>
</v-btn>
<v-btn to="/dashboard/data">
<v-icon icon="mdi-finance" />
<span>Data Analytics</span>
</v-btn>
</v-bottom-navigation>
</v-main>
</v-app>
</template>
<script setup>
definePageMeta({
middleware: ["authentication"],
layout: false,
});
const { mdAndDown } = useDisplay();
const { logout } = useDirectusAuth();
const logOut = async () => {
await logout();
return navigateTo("/login");
};
</script>