autoflow-web-console/src/components/common/LayoutComponent.vue

<script setup>
import {useRoute, useRouter} from "vue-router";
import {storage} from "@/utils/storage.js";
import DrawerComponent from "@/components/common/DrawerComponent.vue";
import {watchEffect} from "vue";

const route = useRoute();
const router = useRouter();

const menu = ref([]);

const menuItems = [
  {
    title: "Select Project",
  },
  {
    title: "Change Password",
    click: () => {
      showPasswordModal.value = true;
    },
  },
  {
    title: "Logout",
    icon: "mdi-logout",
    click: () => {
      logOut();
    },
  },
];

const userMenuItems = [
  {
    title: "Select Project",
  },
  {
    title: "Change Password",
  },
  {
    title: "Logout",
    icon: "mdi-logout",
    click: () => {
      logOut();
    },
  },
];

const drawer = ref(null);
const pageTitle = computed(() => {
  return route.meta.title;
});

const pagePath = computed(() => {
  return route.path;
});

const logOut = () => {
  storage.clearAuth();
  router.push("/signin");
};

const goHome = () => {
  router.push("/main");
};

const showPasswordModal = ref(false);
const selectedUserData = ref({});

watchEffect(() => {
  // const auth = storage.getAuth().auth;
  // if (auth === "ADMIN") {
    menu.value = menuItems;
  // } else {
  //   menu.value = userMenuItems;
  // }
});

</script>

<template>
  <v-app>
      <v-navigation-drawer v-model="drawer" border="0" hide-overlay permanent>
        <DrawerComponent />
      </v-navigation-drawer>

    <v-app-bar class="bg-shades-transparent" flat>
      <div class="px-8 text-h6 text-secondary font-weight-medium">
        Autoflow Web Console
      </div>
      <v-spacer></v-spacer>
      <v-menu location="bottom end">
        <template v-slot:activator="{ props }">
          <v-tooltip location="bottom" text="dashboard">
            <template #activator="{ props }">
              <v-btn
                icon
                color="secondary"
                class="mr-3"
                v-bind="props"
              >
                <v-icon>mdi-settings</v-icon>
              </v-btn>
            </template>
          </v-tooltip>
          <v-tooltip location="bottom" text="dashboard">
            <template #activator="{ props }">
              <v-btn
                icon
                color="secondary"
                class="mr-3"
                @click="goHome"
                v-bind="props"
              >
                <v-icon>mdi-home</v-icon>
              </v-btn>
            </template>
          </v-tooltip>
          <div style="min-width: 180px" class="d-flex flex-column align-end">
            <div class="font-weight-black">ADMIN_001</div>
            <div class="text-subtitle-2">No Project Selected</div>
          </div>
          <v-btn icon color="secondary" v-bind="props" class="mr-3">
            <v-icon>mdi-arrow-down-drop-circle-outline</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, index) in menu"
            :key="index"
            :value="index"
            @click="item.click"
            :prepend-icon="item.icon"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <v-main>
      <v-container
        fluid
        class="pa-16 background d-flex justify-center"
        style="width: 100%"
      >
        <slot></slot>
      </v-container>
    </v-main>

  </v-app>
</template>

<style scoped lang="sass">

</style>