consumocuidado/components/NavBar.vue

<template>
  <header class="header">
    <div class="container wrapper">
      <div class="navmenu-container">
        <NavMenu @handle-logout="handleLogout" />
      </div>
      <nav>
        <NuxtLink to="/">
          <img
            class="logo"
            src="@/assets/img/logo-consumo-cuidado.png"
            alt="latienda.coop"
          />
        </NuxtLink>
        <div class="nav-buttons">
          <!-- <NuxtLink to="/page/info">
            <img
              class="nav-buttons-info nav-icon"
              src="@/assets/img/latienda-info.svg"
              alt="latienda.coop"
            />
          </NuxtLink> -->
          <NuxtLink to="/" class="nuxt-link">
            <p class="nav-text">Inicio</p>
          </NuxtLink>
          <NuxtLink to="/catalogo" class="nuxt-link">
            <p class="nav-text">Catálogo</p>
          </NuxtLink>
          <NuxtLink to="/productoras" class="nuxt-link">
            <p class="nav-text">Productoras</p>
          </NuxtLink>
          <NuxtLink to="/" class="nuxt-link">
            <p class="nav-text">Únete</p>
          </NuxtLink>
          <NuxtLink to="https://www.kit-eco.social/es" class="nuxt-link">
            <p class="nav-text">kit-eco.social</p>
          </NuxtLink>
          <div class="nav-buttons-line"></div>
          <NuxtLink v-if="isAuthenticated & !isAdmin" to="/editar/perfil">
            <div class="nav-buttons-acceso">
              <img
                class="nav-icon"
                src="@/assets/img/circle-user-round.svg"
                alt="latienda.coop"
              />
              <div class="nav-text">{{ name }}</div>
            </div>
          </NuxtLink>
          <NuxtLink v-else-if="isAuthenticated & isAdmin" to="/admin">
            <div class="nav-buttons-acceso">
              <img
                class="nav-icon"
                src="@/assets/img/circle-user-round.svg"
                alt="latienda.coop"
              />
              <div class="nav-text">{{ name }}</div>
            </div>
          </NuxtLink>
          <NuxtLink v-else to="/login">
            <div class="nav-buttons-acceso">
              <img
                class="nav-icon"
                src="@/assets/img/circle-user-round.svg"
                alt="latienda.coop"
              />
            </div>
          </NuxtLink>
        </div>
      </nav>
    </div>
  </header>
</template>

<script>
import { mapActions } from 'pinia'
import { useAuthStore } from '@/stores/auth'
export default {
  setup() {
    const auth = useAuthStore();
    return {
      auth,
    }
  },
  computed: {
    isAdmin() {
      return this.auth.isAdmin
    },
    isAuthenticated() {
      return this.auth.isAuthenticated
    },
    name() {
      return this.auth.getName
    },
  },
  methods: {
    ...mapActions(useAuthStore, ['logout']),
    async handleLogout() {
      try {
        await this.logout()
        this.$router.push('/login')
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.header {
  background-color: white;
  padding: 10px;

  @include mobile {
    position: fixed;
    z-index: 999999;
    top: 0;
    width: 100%;
  }
}

.container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.wrapper {
  width: 100%;
  height: 50px;
}

nav {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-and-login {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.logo {
  width: 10rem;
  margin: 0 0.5rem;
  @include mobile {
    width: 9rem;
  }
}

.nav-icon {
  height: 1.25rem;
}

.nav-buttons {
  width: auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0 0.6rem;
  margin-left: 1.25rem;

  @include mobile {
    display: none;
  }

  &-line {
    cursor: pointer;
  }
  &-line:after {
    color: $color-consumo-base;
    content: '\22EE';
    margin: 0.5rem;
    @include mobile {
      display: none;
    }
  }
  &-acceso {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    margin-left: 1rem;
  }
  .nav-buttons-info {
    @include mobile {
      display: none;
    }
  }
}

.nuxt-link {
  text-decoration: none;
  :hover {
    color: $color-consumo-base;
  }
  @include desktop {
    padding: 12px;
    margin: 0 1rem;
  }
  @include tablet {
    padding: 8px;
  }
}

.nav-text {
  font-size: $xs;
  color: $color-primary;
  text-transform: uppercase;
  margin: 0 0.1rem;
  font-weight: $medium;

  @include mobile {
    display: none;
  }
}
</style>