marketingPortal/pages/dashboard.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>