sfp_vue_franchisee_ginastica_cerebro/src/components/layout/LeftMenuLayout.vue

<template>
  <q-drawer
    v-bind="$attrs"
    :model-value="true"
    show-if-above
    no-swipe-close
    no-swipe-open
    :width="214"
    :mini-width="60"
    :breakpoint="500"
    :mini="miniState"
    :behavior="'desktop'"
    class="detached-container"
  >
    <div class="column full-height no-wrap q-drawer-container">
      <div class="overflow-hidden" style="border-radius: 8px 8px 0px 0px">
        <div
          class="flex flex-center full-width q-pa-sm bg-terciary"
          style="height: 60px"
        >
          <q-img
            v-if="!miniState"
            :src="Logo"
            style="width: 138px; height: 39px"
          />
          <q-img v-else :src="MiniLogo" style="width: 59px; height: 50px" />
        </div>
      </div>

      <div class="column full-height no-wrap">
        <div
          v-if="!$q.screen.lt.md"
          class="toggle-button-wrapper absolute"
          style="top: 10px; right: -38px; z-index: 1"
        >
          <div @click="miniState = !miniState">
            <q-icon
              size="sm"
              :name="
                miniState
                  ? 'mdi-page-layout-sidebar-right'
                  : 'mdi-page-layout-sidebar-left'
              "
              color="secondary"
            />
            <q-tooltip
              anchor="center right"
              self="center left"
              :offset="[10, 10]"
              >{{
                miniState
                  ? $t("ui.navigation.expand_menu")
                  : $t("ui.navigation.collapse_menu")
              }}</q-tooltip
            >
          </div>
        </div>
        <q-list class="column no-wrap">
          <template v-for="(item, index) in navigation_store.navigationItems">
            <template v-if="item.permission">
              <q-item
                v-if="item.type === 'single'"
                :key="item.name"
                v-ripple
                clickable
                :exact="item.name == 'HomePage'"
                exact-active-class="menu-selected"
                active-class="menu-selected"
                :to="{ name: item.name }"
              >
                <q-item-section avatar>
                  <q-icon
                    :name="item.icon"
                    style="font-size: 20px"
                    color="secondary"
                  />
                </q-item-section>
                <q-item-section>{{ $t(item.title) }}</q-item-section>
                <q-tooltip
                  v-if="miniState"
                  anchor="center right"
                  self="center left"
                  :offset="[10, 10]"
                  >{{ $t(item.title) }}</q-tooltip
                >
              </q-item>
              <!-- Expansive Menu with children -->
              <div v-else :key="item.title">
                <template v-if="!miniState">
                  <q-tooltip
                    v-if="miniState"
                    anchor="center right"
                    self="center left"
                    :offset="[10, 10]"
                    >{{ $t(item.title) }}</q-tooltip
                  >
                  <q-expansion-item
                    v-model="isExpasionItemExpanded[index]"
                    :class="{
                      'menu-selected':
                        childrenAreActive(item.childrens) &&
                        !isExpasionItemExpanded[index],
                    }"
                  >
                    <template #header>
                      <q-item-section avatar>
                        <q-icon :name="item.icon" style="font-size: 20px" />
                      </q-item-section>
                      <q-item-section>{{ $t(item.title) }}</q-item-section>
                    </template>
                    <div v-for="child in item.childrens" :key="child.name">
                      <q-item
                        v-ripple
                        clickable
                        :to="{ name: child.name }"
                        exact
                        exact-active-class="menu-selected"
                        class="q-pl-lg"
                      >
                        <q-item-section avatar>
                          <q-icon :name="child.icon" style="font-size: 20px" />
                        </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-selected': childrenAreActive(item.childrens),
                    }"
                  >
                    <q-item-section avatar>
                      <q-icon :name="item.icon" style="font-size: 20px" />
                    </q-item-section>
                    <q-item-section>{{ $t(item.title) }}</q-item-section>
                    <q-tooltip
                      v-if="miniState"
                      anchor="center right"
                      self="center left"
                      :offset="[10, 10]"
                      >{{ $t(item.title) }}</q-tooltip
                    >
                    <q-menu
                      class="menu-drawer"
                      anchor="center right"
                      self="top start"
                    >
                      <q-list>
                        <q-item
                          v-for="child in item.childrens"
                          :key="child.name"
                          v-ripple
                          v-close-popup
                          clickable
                          :to="{ name: child.name }"
                          exact
                          exact-active-class="menu-selected"
                          class="menu-drawer"
                        >
                          <q-item-section avatar>
                            <q-icon
                              :name="child.icon"
                              style="font-size: 20px"
                            />
                          </q-item-section>
                          <q-item-section>{{ $t(child.title) }}</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-item>
                </template>
              </div>
            </template>
          </template>
        </q-list>
        <q-list class="column q-mb-md no-wrap" style="border-radius: 6px">
        </q-list>
        <q-list class="q-mt-auto">
          <q-item v-ripple clickable @click="logoutFn">
            <div class="flex q-mx-auto">
              <q-item-section avatar>
                <div class="flex q-mx-auto q-gutter-x-xs">
                  <q-icon
                    name="logout"
                    color="negative"
                    style="font-size: 20px"
                  />

                  <div>SAIR</div>
                </div>
              </q-item-section>
            </div>
            <q-tooltip
              v-if="miniState"
              anchor="center right"
              self="center left"
              :offset="[10, 10]"
              >{{ $t("auth.logout") }}</q-tooltip
            >
          </q-item>
          <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"
                :style="
                  miniState || $q.screen.lt.md
                    ? 'max-width: 48px'
                    : 'max-width: 100px'
                "
              />
            </div>
          </q-item>
        </q-list>
        <div
          class="full-width text-center q-pb-xs cursor-pointer text-dark"
          @click="gotoVersionPage()"
        >
          <span v-if="!(miniState || $q.screen.lt.md)" class="text-caption">{{
            $t("common.terms.version") + " " + version
          }}</span>
          <span v-else class="text-caption">{{ version }}</span>
        </div>
      </div>
    </div>
  </q-drawer>
</template>
<script setup>
import { ref, watch, watchEffect, onMounted } from "vue";
import { useAuth } from "src/composables/useAuth";
import { useRouter, useRoute } from "vue-router";
import { navigationStore } from "src/stores/navigation";
import { useQuasar, Cookies } from "quasar";
import { version } from "src/../package.json";

import Logo from "src/assets/images/logo.svg";
import MiniLogo from "src/assets/images/mini-logo.svg";
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";

const { logout } = useAuth();
const router = useRouter();
const route = useRoute();
const navigation_store = navigationStore();
const $q = useQuasar();

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

const childrenAreActive = (children) => {
  if (!Array.isArray(children) || children.length === 0) {
    return false;
  }
  return children.some((child) => route?.name === child?.name);
};

const isExpasionItemExpanded = ref([]);

watchEffect(() => {
  if ($q.screen.lt.md) {
    miniState.value = true;
    isExpasionItemExpanded.value.forEach((expansion, index) => {
      isExpasionItemExpanded.value[index] = false;
    });
  }
});

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

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

const gotoVersionPage = () => {
  router.push({ name: "SystemVersionsPage" });
};

watch(miniState, () => {
  Cookies.set("miniState", miniState.value, { path: "/", sameSite: "Lax" });
});

onMounted(() => {
  navigation_store.navigationItems.forEach((item, index) => {
    if (childrenAreActive(item.childrens)) {
      isExpasionItemExpanded.value[index] = true;
    }
  });
});
</script>

<style lang="scss" scoped>
@import "/src/css/quasar.variables.scss";

.menu-selected {
  background-color: $terciary;
  color: $primary;
}

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

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

.q-drawer-container {
  background-image: url("images/background-opacity.png");
  background-position: 15%;
}
</style>