sfp_vue_franchisee_ginastica_cerebro/src/components/global/LeftMenuLayout.vue

<template>
  <q-drawer
    v-model="leftDrawerOpen"
    show-if-above
    :mini="miniState"
    mini-to-overlay
    :width="250"
    :breakpoint="500"
    bordered
    class="bg-drawer"
    @mouseover="miniState = false"
    @mouseout="miniState = true"
  >
    <q-scroll-area style="height: calc(100vh - 100px)">
      <q-list class="column no-wrap" style="height: calc(100vh - 100px)">
        <template v-for="menu in menus" :key="menu.name">
          <!-- * Single menu -->
          <q-item
            v-if="menu.type == 'single' && menu.permission"
            v-ripple
            clickable
            :to="{ name: menu.name }"
            :disable="menu.disable"
            class="text-subtitle1"
            exact-active-class="menu-selected"
            exact
            active-class="menu-selected"
          >
            <q-item-section avatar>
              <q-icon :name="menu.icon" />
            </q-item-section>

            <q-item-section> {{ menu.title }} </q-item-section>
          </q-item>
          <q-expansion-item
            v-if="menu.type == 'expansive' && menu.permission"
            expand-separator
            header-class="text-subtitle1"
            :icon="menu.icon"
            :label="menu.title"
            :content-inset-level="0.4"
            :disable="menu.disable"
          >
            <template v-for="children in menu.childrens" :key="children.name">
              <q-item
                v-if="children.permission"
                v-ripple
                clickable
                :to="{ name: children.name }"
                :disable="children.disable"
                class="text-subtitle1"
                exact-active-class="menu-selected"
              >
                <q-item-section avatar>
                  <q-icon :name="children.icon" />
                </q-item-section>

                <q-item-section> {{ children.title }} </q-item-section>
              </q-item>
            </template>
          </q-expansion-item>
        </template>
        <q-item
          v-ripple
          clickable
          class="q-mt-auto text-subtitle1"
          @click="auth.logout()"
        >
          <div class="flex">
            <q-item-section avatar>
              <q-icon name="mdi-logout-variant" color="negative" />
            </q-item-section>
            <q-item-section> {{ $t("logout") }} </q-item-section>
          </div>
        </q-item>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useAuth } from "src/composables/useAuth";
import { permissionStore } from "src/stores/permission";
import { useI18n } from "vue-i18n/dist/vue-i18n";

const auth = useAuth();
const { t } = useI18n();
const leftDrawerOpen = ref(true);
const miniState = ref(true);

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

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 {
        if (menu.componente === "vuePageDashboard") {
          menu.permission = true;
        } else {
          menu.permission = getAccess(menu.permissionScope, "menu");
        }
        return menu.permission ? menu : null;
      }
    })
    .filter((menu) => menu !== null);
};

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

<style lang="scss" scoped>
.menu-selected {
  color: #385873 !important;
  background: rgba(56, 88, 115, 0.15) !important;

  .body--light & {
    color: #385873 !important;
  }

  .body--dark & {
    color: #5d93bf !important;
  }
  //sobreescrever comportamento padrao da classe .fit do quasar
  .fit {
    padding: 0px !important;
  }
}
</style>