consumocuidado/components/NavMenu.vue

<template>
  <div class="nav-menu-container">
    <img
      class="burger"
      src="@/assets/img/latienda-burger-nav.svg"
      alt=""
      @click="isMenuOpen = !isMenuOpen"
    />
    <div :class="isMenuOpen ? `shadow` : ''">
      <transition name="slider" mode="out-in">
        <div v-if="isMenuOpen" class="nav-menu">
          <img
            class="close-icon"
            src="@/assets/img/latienda-close-nav.svg"
            alt=""
            @click="isMenuOpen = !isMenuOpen"
          />
          <nav class="nav">
            <ul class="section-list">
              <NuxtLink to="/">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
                  <img
                    class="section-img"
                    src="@/assets/img/latienda-ubicacion.svg"
                    alt=""
                  />
                  <span class="section-text">Inicio</span>
                </li>
              </NuxtLink>
              <NuxtLink to="/productoras">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
                  <img
                    class="section-img"
                    src="@/assets/img/latienda-tienda-nav.svg"
                    alt=""
                  />
                  <span class="section-text">Productoras</span>
                </li>
              </NuxtLink>
              <!-- TODO: cambiar link -->
              <NuxtLink to="/page/info">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
                  <img
                    class="section-img"
                    src="@/assets/img/latienda-bag.svg"
                    alt=""
                  />
                  <span class="section-text">Únete</span>
                </li>
              </NuxtLink>
              <NuxtLink to="https://www.kit-eco.social/es">
                <li class="section" @click="isMenuOpen = !isMenuOpen">
                  <img
                    class="section-img"
                    src="@/assets/img/latienda-bag.svg"
                    alt=""
                  />
                  <span class="section-text">kit-eco.social</span>
                </li>
              </NuxtLink>
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <a href="mailto:info@latienda.coop">
                  <img
                    class="section-img"
                    src="@/assets/img/envelope-simple.svg"
                    alt=""
                  />
                  <span class="section-text">Contacto</span>
                </a>
              </li>
            </ul>
          </nav>
          <ul class="login-list">
            <NuxtLink v-if="!isAuthenticated" to="/login">
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <img
                  class="section-img"
                  src="@/assets/img/latienda-lock.svg"
                  alt=""
                />
                <span class="section-text">Acceder</span>
              </li>
            </NuxtLink>
            <NuxtLink v-if="isManager" to="/editar/perfil">
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <img
                  class="section-img"
                  src="@/assets/img/latienda-user.svg"
                  alt=""
                />
                <span class="section-text">Perfil</span>
              </li>
            </NuxtLink>
            <NuxtLink v-if="isManager" to="/editar/cooperativa">
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <span class="section-text login">Cooperativa</span>
              </li>
            </NuxtLink>
            <NuxtLink v-if="isManager" to="/editar/productos">
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <span class="section-text login">Productos</span>
              </li>
            </NuxtLink>
            <NuxtLink v-if="isManager" to="/editar/productos/importar">
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <span class="section-text login">Importar</span>
              </li>
            </NuxtLink>
            <NuxtLink v-if="isAuthenticated" @click="handleLogout" to="/">
              <li class="section" @click="isMenuOpen = !isMenuOpen">
                <img
                  class="section-img"
                  src="@/assets/img/latienda-sign-out.svg"
                  alt=""
                />
                <span class="section-text">Cerrar sesión</span>
              </li>
            </NuxtLink>
          </ul>
          <ul class="link-list">
            <li class="link">
              <a href="https://coceta.coop/" target="_blank">
                <span class="link-text">Coceta</span>
              </a>
            </li>
            <NuxtLink to="/page/terminos">
              <li class="link" @click="isMenuOpen = !isMenuOpen">
                <span class="link-text">Términos y condiciones</span>
              </li>
            </NuxtLink>
            <NuxtLink to="/page/legal">
              <li class="link" @click="isMenuOpen = !isMenuOpen">
                <span class="link-text">Política de privacidad</span>
              </li>
            </NuxtLink>
            <NuxtLink to="/page/cookies">
              <li class="link" @click="isMenuOpen = !isMenuOpen">
                <span class="link-text">Cookies</span>
              </li>
            </NuxtLink>
          </ul>
          <div class="credits">
            <span>2025 Consumo Cuidado</span>
            <a href="http://enreda.coop/" target="_blank"
              >Sitio desarrollado por Enreda</a
            >
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'pinia'
import { useAuthStore } from '@/stores/auth'

export default {
  emits: ['handleLogout'],
  setup() {
    const auth = useAuthStore();
    return {
      auth,
    }
  },
  data() {
    return {
      isMenuOpen: false,
    }
  },
  computed: {
    isAuthenticated() {
      return this.auth.isAuthenticated
    },
    isManager() {
      return this.auth.isManager
    },
  },
  methods: {
    ...mapActions(useAuthStore, ['logout']),
    async handleLogout() {
      this.isMenuOpen = false
      this.$emit('handleLogout')
      //await this.logout()
    },
  },
}
</script>

<style lang="scss" scoped>
.slider-enter-active,
.slider-leave-active {
  transition: all 0.5s ease;
}
.slider-enter,
.slider-leave-to {
  transform: translateX(-100%);
}

.nav-menu-container {
  @include tablet {
    display: none;
  }
}

.nav-menu {
  font-family: $font-primary;
  padding: 30px 0 0 20px;
  background-color: $color-consumo-base;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 9999999999;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  overflow: scroll;
  @include mobile {
    width: 70%;
  }
  @include tablet {
    width: 30%;
  }
}

.shadow {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
}

.burger,
.close-icon {
  width: 1.8rem;
  cursor: pointer;
}

.close-icon {
  margin-bottom: 3rem;
}

.section {
  padding: 0.4em 0;
}

.section-list {
  padding-bottom: 1rem;
  border-bottom: 1px solid $color-primary;
}

.section-text {
  font-weight: $medium;
  font-size: $s;
}

.section-img {
  width: 1.2rem;
  margin-right: 0.8rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: $color-primary;
}

.link-list,
.credits {
  margin-top: 1rem;
  margin-left: 1rem;
  padding: 0.1em;
}
.link {
  padding: 0.3em 0;
  font-size: $xs;
}
.credits {
  margin-top: 1.5rem;
  span,
  a {
    display: block;
    color: $color-primary;
    font-size: $xs;
    padding: 0.3em 0;
  }
  margin-bottom: 4rem;
}
.login {
  padding-left: 2rem;
  font-weight: $regular;
}
</style>