sfp_front_vue_serprati_digital/src/components/layout/LeftMenuLayoutAdministrador.vue

<template>
  <q-drawer
    v-bind="$attrs"
    :model-value="true"
    show-if-above
    no-swipe-close
    no-swipe-open
    :width="235"
    :mini-width="64"
    :breakpoint="500"
    :mini="navigation_store.miniState"
    :behavior="'desktop'"
    class="left-menu-drawer"
  >
    <div class="column full-height no-wrap left-menu-inner">
      <div class="left-menu-items-wrapper column full-height no-wrap">
        <div class="left-menu-bg-overlay" />
        <div class="left-menu-bg-tint" />

        <q-list class="left-menu-list column no-wrap">
          <template v-for="(item, index) in navigation_store.navigationItems" :key="index">
            <template v-if="item.permission">
              <q-item
                v-if="item.type === 'single'"
                v-ripple
                clickable
                :exact="item.name === 'HomePage'"
                exact-active-class="menu-selected"
                active-class="menu-selected"
                :to="{ name: item.name }"
                class="left-menu-item"
              >
                <q-item-section avatar>
                  <q-icon :name="item.icon" class="left-menu-icon" />
                </q-item-section>
                <q-item-section v-if="!navigation_store.miniState">{{ $t(item.title) }}</q-item-section>
                <q-tooltip
                  v-if="navigation_store.miniState"
                  anchor="center right"
                  self="center left"
                  :offset="[10, 10]"
                >{{ $t(item.title) }}</q-tooltip>
              </q-item>
              <div v-else>
                <template v-if="!navigation_store.miniState">
                  <q-expansion-item
                    v-model="isExpasionItemExpanded[index]"
                    :class="{ 'menu-selected': childrenAreActive(item.childrens) && !isExpasionItemExpanded[index] }"
                    class="left-menu-item"
                  >
                    <template #header>
                      <q-item-section avatar>
                        <q-icon :name="item.icon" class="left-menu-icon" />
                      </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 left-menu-item"
                      >
                        <q-item-section avatar>
                          <q-icon :name="child.icon" class="left-menu-icon" />
                        </q-item-section>
                        <q-item-section>{{ $t(child.title) }}</q-item-section>
                      </q-item>
                    </div>
                  </q-expansion-item>
                </template>
                <template v-else>
                  <q-item
                    v-ripple
                    clickable
                    :class="{ 'menu-selected': childrenAreActive(item.childrens) }"
                    class="left-menu-item"
                  >
                    <q-item-section avatar>
                      <q-icon :name="item.icon" class="left-menu-icon" />
                    </q-item-section>
                    <q-tooltip 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" class="left-menu-icon" />
                          </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="q-mt-auto left-menu-footer">
          <q-item v-ripple class="left-menu-item left-menu-logout text-center" clickable @click="logoutFn">
            <q-item-section avatar >
              <q-icon name="logout" class="left-menu-icon left-menu-logout__icon"/>
            </q-item-section>
            <q-item-section v-if="!navigation_store.miniState" class="text-violet-normal">{{ $t('auth.logout') }}</q-item-section>
            <q-tooltip v-if="navigation_store.miniState" anchor="center right" self="center left" :offset="[10, 10]">
              {{ $t('auth.logout') }}
            </q-tooltip>
          </q-item>

          <q-item v-ripple class="left-menu-item" clickable @click="openUrl('https://softpar.inf.br')">
            <div class="flex full-width justify-center">
              <q-img
                :src="navigation_store.miniState || $q.screen.lt.md ? LogoSoftparMini : $q.dark.isActive ? LogoSoftparLight : LogoSoftparDark"
                style="height: 30px"
                :style="navigation_store.miniState || $q.screen.lt.md ? 'max-width: 48px; width: 48px' : 'max-width: 100px; width: 100%'"
              />
            </div>
          </q-item>
        </q-list>

        <div
          class="full-width text-center q-pb-xs cursor-pointer left-menu-version"
          @click="gotoVersionPage()"
        >
          <span v-if="!(navigation_store.miniState || $q.screen.lt.md)" class="text-caption text-weight-light">
            {{ $t('common.terms.version') + ' ' + version }}
          </span>
          <span v-else class="text-caption text-weight-light">{{ version }}</span>
        </div>
      </div>
    </div>
  </q-drawer>
</template>
<script setup>
import { ref, watchEffect, onMounted } from "vue";
import { useAuth } from "src/composables/useAuth";
import { useRouter, useRoute } from "vue-router";
import { navigationStore } from "src/stores/navigation";
import { useQuasar } from "quasar";
import { version } from "src/../package.json";

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 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) {
    navigation_store.miniState = true;
    isExpasionItemExpanded.value.forEach((_, 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" });
};

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

<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss" as vars;

:deep(.q-drawer) {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.left-menu-drawer {
  background: transparent;
}

.left-menu-inner {
  height: 100%;
  background: transparent;
}

.left-menu-items-wrapper {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 8px;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: vars.$violet-light;
    z-index: 0;
  }

  .left-menu-bg-overlay {
    position: absolute;
    inset: 0;
    background-image: url("src/assets/pessoas_fundo.jpg");
    background-size: cover;
    background-position: center top;
    opacity: 0.15;
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
  }

  .left-menu-bg-tint {
    display: none;
  }
}

.left-menu-list {
  position: relative;
  z-index: 3;
  padding-top: 8px;
}

.left-menu-item {
  position: relative;
  z-index: 3;
  color: vars.$violet-normal !important;
  border-radius: 6px;
  margin: 2px 8px;

  &:hover {
    background-color: rgba(vars.$violet-normal, 0.08);
  }
}

.left-menu-icon {
  font-size: 20px;
  color: vars.$violet-normal;
}

.menu-selected {
  background-color: rgba(vars.$violet-normal, 0.12) !important;
  color: vars.$violet-normal !important;
}

:deep(.q-expansion-item__header) {
  color: vars.$violet-normal;
}

.left-menu-footer {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(vars.$violet-normal, 0.15);
  padding-top: 4px;
}

.left-menu-logout__icon {
  color: map.get(vars.$colors, "violet-normal") !important;
}

.left-menu-version {
  position: relative;
  z-index: 3;
  color: rgba(vars.$violet-normal, 0.6);
  font-size: 0.75rem;
  padding-bottom: 6px;
}

</style>