sfp_vue_franchisor_ginastica_cerebro/src/components/layout/LeftMenuLayoutMobile.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-drawer
    v-bind="$attrs"
    v-model="leftDrawerOpen"
    behavior="mobile"
    class="detached-container"
    :breakpoint="500"
    :width="214"
  >
    <div class="column full-height no-wrap">
      <div
        class="overflow-hidden"
        style="border-radius: 8px 8px 0px 0px"
      >
        <div
          class="flex flex-center full-width q-pa-sm"
          style="height: 50px"
        >
          <q-img style="max-width: 92px" :src="Logo" />
        </div>
      </div>

      <div class="column no-wrap menu-content">
        <q-scroll-area class="menu-scroll-area">
          <q-list class="column no-wrap">
            <template
              v-for="item in navigation_store.navigationItems"
              :key="item.name ?? item.icon"
            >
              <template v-if="item.permission">
                <q-item
                  v-if="item.type === 'single'"
                  v-ripple
                  active-class="menu-selected"
                  clickable
                  exact-active-class="menu-selected"
                  :exact="item.name == 'HomePage'"
                  :to="{ name: item.name }"
                >
                  <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-item>

                <q-expansion-item
                  v-else
                  v-model="isExpasionItemExpanded"
                  :class="{
                    'menu-selected':
                      childrenAreActive(item.childrens) &&
                      !isExpasionItemExpanded,
                  }"
                >
                  <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
                      class="q-pl-lg"
                      clickable
                      exact
                      exact-active-class="menu-selected"
                      :to="{ name: child.name }"
                    >
                      <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>
                  </div>
                </q-expansion-item>
              </template>
            </template>
          </q-list>
        </q-scroll-area>

        <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="LogoSoftparDark"
                style="width: 100%; height: 30px; max-width: 114px"
              />
            </div>
          </q-item>
        </q-list>

        <div
          class="full-width text-center text-subtitle3 cursor-pointer"
          @click="gotoVersionPage"
        >
          <span class="text-caption text-weight-light">
            {{ $t("common.terms.version") + " " + version }}
          </span>
        </div>
      </div>
    </div>
  </q-drawer>
</template>

<script setup>
import { navigationStore } from "src/stores/navigation";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { version } from "src/../package.json";

import Logo from "src/assets/logo.png";
import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";

const leftDrawerOpen = defineModel({
  type: Boolean,
});

const navigation_store = navigationStore();

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

const isExpasionItemExpanded = ref([]);

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

  return children.some((child) => route?.name === child?.name);
};

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

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

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-content {
  flex: 1 1 auto;
  min-height: 0;
}

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

.menu-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
}

.text-subtitle3 {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
}
</style>