140 lines
2.9 KiB
Vue
140 lines
2.9 KiB
Vue
<template>
|
|
<v-app full-height>
|
|
<v-navigation-drawer
|
|
v-model="drawer"
|
|
:location="mdAndDown ? 'bottom' : undefined"
|
|
>
|
|
<v-img v-if="!mdAndDown" src="/logo.jpg" height="75" class="my-6" />
|
|
|
|
<v-list color="primary" lines="two">
|
|
<v-list-item
|
|
v-for="(item, index) in menu"
|
|
:key="index"
|
|
:to="item.to"
|
|
:title="item.title"
|
|
:prepend-icon="item.icon"
|
|
/>
|
|
</v-list>
|
|
|
|
<template #append>
|
|
<v-list lines="two">
|
|
<v-list-item
|
|
v-if="user"
|
|
:title="`${user.first_name} ${user.last_name}`"
|
|
:subtitle="user.email"
|
|
prepend-icon="mdi-account"
|
|
/>
|
|
<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-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer" />
|
|
</template>
|
|
|
|
<v-img src="/logo.jpg" height="50" />
|
|
|
|
<template #append>
|
|
<v-btn
|
|
@click="logOut"
|
|
class="mr-3"
|
|
variant="text"
|
|
color="error"
|
|
icon="mdi-logout"
|
|
/>
|
|
</template>
|
|
</v-app-bar>
|
|
|
|
<v-main>
|
|
<router-view />
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
middleware: ["authentication"],
|
|
layout: false,
|
|
});
|
|
|
|
const { mdAndDown } = useDisplay();
|
|
const { logout } = useDirectusAuth();
|
|
const user = useDirectusUser();
|
|
const tags = usePortalTags();
|
|
|
|
const drawer = ref(false);
|
|
|
|
const interestMenu = [
|
|
{
|
|
to: "/dashboard/interest-eoi-queue",
|
|
icon: "mdi-tray-full",
|
|
title: "EOI Queue",
|
|
},
|
|
{
|
|
to: "/dashboard/interest-analytics",
|
|
icon: "mdi-view-dashboard",
|
|
title: "Analytics",
|
|
},
|
|
{
|
|
to: "/dashboard/interest-berth-list",
|
|
icon: "mdi-table",
|
|
title: "Berth List",
|
|
},
|
|
{
|
|
to: "/dashboard/interest-berth-status",
|
|
icon: "mdi-sail-boat",
|
|
title: "Berth Status",
|
|
},
|
|
{
|
|
to: "/dashboard/interest-list",
|
|
icon: "mdi-view-list",
|
|
title: "Interest List",
|
|
},
|
|
{
|
|
to: "/dashboard/interest-status",
|
|
icon: "mdi-account-check",
|
|
title: "Interest Status",
|
|
},
|
|
{
|
|
to: "/dashboard/interest-emails",
|
|
icon: "mdi-email",
|
|
title: "Emails",
|
|
},
|
|
{
|
|
to: "/dashboard/client-support",
|
|
icon: "mdi-chat",
|
|
title: "Client Support",
|
|
},
|
|
|
|
];
|
|
|
|
const defaultMenu = [
|
|
{
|
|
to: "/dashboard/site",
|
|
icon: "mdi-view-dashboard",
|
|
title: "Site Analytics",
|
|
},
|
|
{
|
|
to: "/dashboard/data",
|
|
icon: "mdi-finance",
|
|
title: "Data Analytics",
|
|
},
|
|
];
|
|
|
|
const menu = computed(() =>
|
|
toValue(tags).interest ? interestMenu : defaultMenu
|
|
);
|
|
|
|
const logOut = async () => {
|
|
await logout();
|
|
return navigateTo("/login");
|
|
};
|
|
</script>
|