sfp_front_vue_diarista_backoffice/src/components/layout/LeftMenuLayout.vue

<template>
  <q-drawer
    v-bind="$attrs"
    :model-value="true"
    show-if-above
    no-swipe-close
    no-swipe-open
    :width="250"
    :mini-width="64"
    :breakpoint="500"
    :mini="miniState"
    :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("ui.navigation.expand_menu")
                : $t("ui.navigation.collapse_menu")
            }}</q-tooltip
          >
        </q-btn>
      </div>

      <q-list class="column no-wrap">
        <template v-for="item in navigationItems">
          <template v-if="item.permission">
            <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-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"
                  header-class="menu-item--spaced"
                  :class="{
                    'menu-selected':
                      childrenAreActive(item.children) &&
                      !isExpasionItemExpanded,
                  }"
                  class="menu-item--spaced"
                >
                  <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-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-item--spaced"
                >
                  <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-tooltip
                    v-if="miniState"
                    anchor="center right"
                    self="center left"
                    :offset="[10, 10]"
                    >{{ $t(item.title) }}</q-tooltip
                  >
                  <q-menu 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"
                      >
                        <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>
        </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>
          <div class="flex">
            <q-item-section avatar>
              <template #default>
                <q-icon
                  name="mdi-account"
                  color="primary"
                  style="font-size: 20px"
                />
              </template>
            </q-item-section>
            <q-item-section>{{ user_store.user.name }}</q-item-section>
          </div>
          <q-tooltip
            v-if="miniState"
            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("user.profile.singular")
                  }}</q-item-section>
                </div>
              </q-item>
            </q-list>
          </q-menu>
        </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("auth.logout") }}</q-item-section>
          </div>
        </q-item>
        <q-item v-ripple>
          <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, watch, watchEffect } from "vue";
import { useAuth } from "src/composables/useAuth";
import { useRouter, useRoute } from "vue-router";
import { userStore } from "src/stores/user";
import { navigationStore } from "src/stores/navigation";
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";
import { useQuasar } from "quasar";

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

const version = "0.0.1";

const miniStateCookies = Cookies.get("miniState")

const miniState = ref(miniStateCookies === "true" ? 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);

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

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

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

watch(miniState, () => {
  Cookies.set("miniState", miniState.value);
});
</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>