sfp_vue_franchisor_ginastica_cerebro/src/components/geral/LeftMenuLayout.vue

<template>
  <q-drawer
    v-bind="$attrs"
    v-model="leftDrawerOpen"
    show-if-above
    no-swipe-close
    no-swipe-open
    :width="250"
    :mini-width="64"
    :breakpoint="500"
    :mini="!$q.screen.lt.md ? miniState : true"
    :behavior="'desktop'"
    class="detached-container"
  >
    <div class="column full-height q-pa-sm no-wrap">
      <div
        v-if="!$q.screen.lt.md"
        class="toggle-button-wrapper absolute"
        style="top: 50%; right: -32px; z-index: 1"
      >
        <q-btn
          flat
          round
          size="sm"
          padding="8px 8px"
          @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 ? $t('navigation.expand_menu') : $t('navigation.collapse_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>{{ user_store.user.name }}</q-item-section>
          </div>
          <q-tooltip
            v-if="miniState && !$q.screen.lt.md"
            anchor="center right"
            self="center left"
            :offset="[10, 10]"
            >{{ user_store.user.name }}</q-tooltip
          >
          <q-menu anchor="center right" self="top start">
            <q-list class="column no-wrap overflow-hidden">
              <q-item
                v-ripple
                v-close-popup
                clickable
                :to="{ name: 'ProfilePage' }"
                exact
                exact-active-class="menu-selected"
              >
                <div class="flex">
                  <q-item-section avatar>
                    <q-icon
                      name="account_circle"
                      color="primary"
                      style="font-size: 18px"
                    />
                  </q-item-section>
                  <q-item-section>{{ $t("navigation.perfil") }}</q-item-section>
                </div>
              </q-item>
              <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>{{ $t("navigation.logout") }}</q-item-section>
                </div>
              </q-item>
            </q-list>
          </q-menu>
        </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 && !$q.screen.lt.md"
              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 && !$q.screen.lt.md"
                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-pl-lg"
                  >
                    <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 && !$q.screen.lt.md"
                      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"
              >
                <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 && !$q.screen.lt.md"
                  anchor="center right"
                  self="center left"
                  :offset="[10, 10]"
                  >{{ $t(menu.title) }}</q-tooltip
                >
                <q-menu anchor="center right" self="top start">
                  <q-list>
                    <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"
                    >
                      <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="q-mt-auto">
        <q-item v-ripple clickable @click="openUrl('https://softpar.inf.br')">
          <div class="flex full-width justify-center">
            <q-img
              :src="
                miniState || $q.screen.lt.md
                  ? LogoSoftparMini
                  : $q.dark.isActive
                    ? LogoSoftparLight
                    : LogoSoftparDark
              "
              style="width: 100%; height: 30px; max-width: 114px"
            />
          </div>
        </q-item>
      </q-list>
      <div class="full-width text-center text-subtitle3">

        <span class="text-caption text-weight-light">{{ version }}</span>
      </div>
    </div>
  </q-drawer>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { useAuth } from "src/composables/useAuth";
import { permissionStore } from "src/stores/permission";
import { useRouter, useRoute } from "vue-router";
import { userStore } from "src/stores/user";
import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";
import { Cookies } from "quasar";

const { logout } = useAuth();
const router = useRouter();
const route = useRoute();
const user_store = userStore();

const version = "0.0.1";

const leftDrawerOpen = ref(true);
const miniState = ref(Cookies.get("miniState") === "true" ?? false);

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" });
};

const openUrl = (url) => {
  window.open(url, "_blank");
};

watch(miniState, () => {
  Cookies.set("miniState", miniState.value);
});

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>