128 lines
2.6 KiB
Vue
128 lines
2.6 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
|
|
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
|
|
@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 v-for="(item, index) in menu" :key="index" :to="item.to">
|
|
<v-icon :icon="item.icon" />
|
|
<span v-text="item.title" />
|
|
</v-btn>
|
|
</v-bottom-navigation>
|
|
</v-main>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
middleware: ["authentication"],
|
|
layout: false,
|
|
});
|
|
|
|
const { mdAndDown } = useDisplay();
|
|
const { logout } = useDirectusAuth();
|
|
|
|
const tags = usePortalTags();
|
|
|
|
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",
|
|
},
|
|
];
|
|
|
|
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>
|