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

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { menuUtils } from "@/utils/menuUtils";
import { storage } from "@/utils/storage";

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

const isShowAuth = ref(false);

const isLinkActive = (link) => {
  return route.path.includes(link);
};

const goMain = () => {
  router.push("/home");
};

onMounted(() => {
  isShowAuth.value = true;
    //storage.getAuth().auth === "ADMIN";

});
</script>

<template>
  <v-card flat class="mx-auto">
    <v-card
      :ripple="false"
      flat
      class="bg-shades-transparent font-weight-bold d-flex w-100 justify-center text-h5 pa-4 pb-16"
      @click="goMain"
    >
      <div>
        <v-img :src="logo" width="auto" height="32" />
      </div>
    </v-card>
    <v-list nav class="pa-5">
      <template
        v-for="({ title, value, icon, path, depth }, i) in menuUtils.menuItem"
        :key="`group_id_${i}`"
      >
        <template v-if="depth && depth.length > 0">
          <v-list-group :key="`group_id_${i}`">
            <template #activator="{ props }">
              <v-list-item
                rounded
                v-bind="props"
                :title="title"
                :prepend-icon="icon"
                class="pa-2 rounded-lg"
              >
              </v-list-item>
            </template>
            <v-list-item
              v-for="({ title: t, path: p }, j) in depth"
              :key="`id_${j}`"
              rounded
              :title="t"
              :value="t"
              :to="p"
              :active-color="isLinkActive(p) ? 'primary' : null"
              :active="isLinkActive(p)"
              class="pa-2 rounded-lg"
            ></v-list-item>
          </v-list-group>
        </template>
        <template v-else>
          <v-list-item
            rounded
            :title="title"
            :value="value"
            :to="path"
            :prepend-icon="icon"
            :active="isLinkActive(path)"
            style="padding-inline-start: 10px"
            :active-color="isLinkActive(path) ? 'primary' : null"
            density="compact"
            class="pa-2 rounded-lg"
          ></v-list-item>
        </template>
      </template>
      <template v-if="isShowAuth">
        <template
          v-for="(
            { title, value, icon, path, depth }, i
          ) in menuUtils.adminMenuItem"
          :key="`group_id_6`"
        >
          <template v-if="depth && depth.length > 0">
            <v-list-group :key="`group_id_${i}`">
              <template #activator="{ props }">
                <v-list-item
                  rounded
                  v-bind="props"
                  :title="title"
                  :prepend-icon="icon"
                  class="pa-2 rounded-lg"
                >
                </v-list-item>
              </template>
              <v-list-item
                v-for="({ title: t, path: p }, j) in depth"
                :key="`id_${j}`"
                rounded
                :title="t"
                :value="t"
                :to="p"
                :active-color="isLinkActive(p) ? 'primary' : null"
                :active="isLinkActive(p)"
                class="pa-2 rounded-lg"
              ></v-list-item>
            </v-list-group>
          </template>
          <template v-else>
            <v-list-item
              rounded
              :title="title"
              :value="value"
              :to="path"
              :prepend-icon="icon"
              :active="isLinkActive(path)"
              style="padding-inline-start: 10px"
              :active-color="isLinkActive(path) ? 'primary' : null"
              density="compact"
              class="pa-2 rounded-lg"
            ></v-list-item>
          </template>
        </template>
      </template>
    </v-list>
  </v-card>
</template>

<style scoped lang="sass">

</style>