sfp_vue_franchisee_ginastica_cerebro/src/components/geral/LeftMenuLayout.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-drawer
    v-bind="$attrs"
    v-model="leftDrawerOpen"
    show-if-above
    :width="250"
    :mini-width="100"
    :breakpoint="500"
    :mini="miniState"
    class="detached-container"
  >
    <div class="q-pa-sm">
      <div
        class="toggle-button-wrapper absolute"
        style="top: 50%; right: -32px; z-index: 1"
      >
        <q-btn flat round size="sm" @click="miniState = !miniState">
          <q-icon
            :name="miniState ? 'mdi-chevron-right' : 'mdi-chevron-left'"
          />
          <q-tooltip
            anchor="center right"
            self="center left"
            :offset="[10, 10]"
            >{{ miniState ? "Expandir menu" : "Colapsar menu" }}</q-tooltip
          >
        </q-btn>
      </div>

      <q-list class="column q-mb-md no-wrap" style="border-radius: 6px">
        <q-item v-ripple clickable>
          <div class="flex">
            <q-item-section avatar>
              <template #default>
                <img
                  :src="someAvatar()"
                  alt="avatar"
                  style="width: 20px; height: 20px; border-radius: 50%"
                />
              </template>
            </q-item-section>
            <q-item-section>Usuario</q-item-section>
          </div>
          <q-tooltip
            v-if="miniState"
            anchor="center right"
            self="center left"
            :offset="[10, 10]"
            >Usuario</q-tooltip
          >
        </q-item>
      </q-list>

      <q-list class="column no-wrap">
        <template v-for="menu in menus" :key="menu.name">
          <!-- Single Menu -->
          <q-item
            v-if="menu.type === 'single'"
            v-ripple
            clickable
            exact-active-class="menu-selected"
            exact
            active-class="menu-selected"
            :to="{ name: menu.name }"
            class="q-my-xs"
          >
            <q-item-section avatar>
              <q-icon :name="menu.icon" style="font-size: 18px" />
            </q-item-section>
            <q-item-section>{{ $t(menu.title) }}</q-item-section>
            <q-tooltip
              v-if="miniState"
              anchor="center right"
              self="center left"
              :offset="[10, 10]"
              >{{ $t(menu.title) }}</q-tooltip
            >
          </q-item>
          <!-- Expansive Menu with children -->
          <div v-else>
            <template v-if="!miniState">
              <q-tooltip
                v-if="miniState"
                anchor="center right"
                self="center left"
                :offset="[10, 10]"
                >{{ $t(menu.title) }}</q-tooltip
              >
              <q-expansion-item
                v-model="isExpasionItemExpanded"
                header-class=" menu-item--spaced"
                :class="{
                  'menu-selected':
                    childrenAreActive(menu.children) && !isExpasionItemExpanded,
                }"
                class="menu-item--spaced"
              >
                <template #header>
                  <q-item-section avatar>
                    <q-icon :name="menu.icon" style="font-size: 18px" />
                  </q-item-section>
                  <q-item-section>{{ $t(menu.title) }}</q-item-section>
                </template>
                <div v-for="child in menu.childrens" :key="child.name">
                  <q-item
                    v-ripple
                    clickable
                    :to="{ name: child.name }"
                    exact
                    exact-active-class="menu-selected"
                    class="menu-item--spaced"
                  >
                    <q-item-section avatar>
                      <q-icon :name="child.icon" style="font-size: 18px" />
                    </q-item-section>
                    <q-item-section>{{ $t(child.title) }}</q-item-section>
                    <q-tooltip
                      v-if="miniState"
                      anchor="center right"
                      self="center left"
                      :offset="[10, 10]"
                      >{{ $t(child.title) }}</q-tooltip
                    >
                  </q-item>
                </div>
              </q-expansion-item>
            </template>
            <template v-else>
              <q-item
                v-ripple
                clickable
                exact
                exact-active-class="menu-selected"
                class="menu-item--spaced"
                @click="openMenu(menu)"
              >
                <q-item-section avatar>
                  <q-icon :name="menu.icon" style="font-size: 18px" />
                </q-item-section>
                <q-item-section>{{ $t(menu.title) }}</q-item-section>
                <q-tooltip
                  v-if="miniState"
                  anchor="center right"
                  self="center left"
                  :offset="[10, 10]"
                  >{{ $t(menu.title) }}</q-tooltip
                >
                <q-menu anchor="top right" self="top left">
                  <q-list style="min-width: 100px">
                    <q-item
                      v-for="child in menu.childrens"
                      :key="child.name"
                      v-ripple
                      v-close-popup
                      clickable
                      :to="{ name: child.name }"
                      exact
                      exact-active-class="menu-selected"
                      class="menu-item--spaced"
                    >
                      <q-item-section avatar>
                        <q-icon :name="child.icon" style="font-size: 18px" />
                      </q-item-section>
                      <q-item-section>{{ $t(child.title) }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-item>
            </template>
          </div>
        </template>
      </q-list>

      <q-list class="column q-mt-md no-wrap overflow-hidden">
        <q-item v-ripple clickable @click="logoutFn">
          <div class="flex">
            <q-item-section avatar>
              <q-icon name="logout" color="negative" style="font-size: 18px" />
            </q-item-section>
            <q-item-section>Sair</q-item-section>
          </div>
          <q-tooltip
            v-if="miniState"
            anchor="center right"
            self="center left"
            :offset="[10, 10]"
            >Sair</q-tooltip
          >
        </q-item>
      </q-list>
    </div>
  </q-drawer>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useAuth } from "src/composables/useAuth";
import { permissionStore } from "src/stores/permission";
import { useRouter, useRoute } from "vue-router";

const { logout } = useAuth();
const leftDrawerOpen = ref(true);
const miniState = ref(true);
const router = useRouter();
const route = useRoute();

const childrenAreActive = (children) => {
  if (!children) return false;
  return children.some((child) => {
    return route.path.includes(child.path);
  });
};

const someAvatar = () => {
  return "https://cdn.quasar.dev/img/avatar4.jpg";
};

const isExpasionItemExpanded = ref(false);

const menus = ref([
  {
    type: "single",
    title: "navigation.dashboard",
    name: "HomePage",
    icon: "mdi-home-variant-outline",
    disable: false,
    permission: false,
    permissionScope: "dashboard",
  },
  {
    type: "expansive",
    title: "navigation.registration",
    icon: "mdi-cog-outline",
    disable: false,
    permission: false,
    permissionScope: "config",
    childrens: [
      {
        type: "single",
        title: "navigation.users",
        name: "UsersPage",
        icon: "mdi-account-multiple-outline",
        disable: false,
        permission: false,
        permissionScope: "config.user",
      },
    ],
  },
]);

const getMenuAccess = () => {
  const { getAccess } = permissionStore();
  menus.value = menus.value
    .map((menu) => {
      if (menu.type === "expansive") {
        if (getAccess(menu.permissionScope, "menu")) {
          menu.permission = true;
        }
        menu.childrens = menu.childrens.filter((children) => {
          children.permission = getAccess(children.permissionScope, "menu");
          return children.permission;
        });
        return menu.childrens.length > 0 ? menu : null;
      } else {
        menu.permission = getAccess(menu.permissionScope, "menu");
        return menu;
      }
    })
    .filter((menu) => menu !== null);
};

const logoutFn = async () => {
  await logout();
  router.push({ name: "LoginPage" });
};

onMounted(() => {
  getMenuAccess();
});
</script>

<style lang="scss" scoped>
@import "/src/css/quasar.variables.scss";
.text-subtitle3 {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
}

.menu-selected {
  background-color: rgba($primary, 0.1);
  color: $primary;
}

.toggle-button-wrapper {
  transition: transform 0.3s ease;
}

.toggle-button-wrapper:hover {
  transform: scale(1.1);
}

.menu-item--spaced {
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>