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"
    :width="250"
    :breakpoint="500"
    behavior="mobile"
    class="detached-container"
  >
    <div class="column full-height q-pa-sm no-wrap">
      <q-list class="column no-wrap">
        <template v-for="item in navigationItems">
          <template v-if="item.permission">
            <!-- Single Menu -->
            <q-item
              v-if="item.type === 'single'"
              :key="item.name"
              v-ripple
              clickable
              exact-active-class="menu-selected"
              exact
              active-class="menu-selected"
              :to="{ name: item.name }"
              class="q-my-xs"
            >
              <q-item-section avatar>
                <q-icon :name="item.icon" style="font-size: 18px" />
              </q-item-section>
              <q-item-section>{{ $t(item.title) }}</q-item-section>
            </q-item>
            <!-- Expansive Menu with children -->
            <q-expansion-item
              v-else
              :key="item.name"
              v-model="isExpasionItemExpanded"
              header-class="menu-item--spaced"
              :class="{
                'menu-selected':
                  childrenAreActive(item.children) && !isExpasionItemExpanded,
              }"
            >
              <template #header>
                <q-item-section avatar>
                  <q-icon :name="item.icon" style="font-size: 18px" />
                </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="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-item>
              </div>
            </q-expansion-item>
          </template>
        </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="$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">1.0.0</span>
      </div>
    </div>
  </q-drawer>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { navigationStore } from "src/stores/navigation";
import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
const route = useRoute();

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

const { navigationItems } = navigationStore();

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

const isExpasionItemExpanded = ref(false);

const openUrl = (url) => {
  window.open(url, "_blank");
};
</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;
}

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