schon/storefront/components/base/header/index.vue

<template>
  <header class="header">
    <nuxt-link-locale to="/">
      <nuxt-img
          format="webp"
          width="150px"
          densities="x1"
          src="/images/schon-big.png"
          alt="logo"
          class="header__logo"
      />
    </nuxt-link-locale>
    <base-header-catalog />
    <base-header-search />
    <div class="header__actions">
      <nuxt-link-locale to="/profile/wishlist" class="header__actions-item">
        <el-badge :value="productsInWishlistQuantity" type="primary">
          <icon name="mdi:cards-heart-outline" size="28" />
        </el-badge>
        <p>{{ t('header.actions.wishlist') }}</p>
      </nuxt-link-locale>
      <nuxt-link-locale to="/profile/cart" class="header__actions-item">
        <el-badge :value="productsInCartQuantity" type="primary">
          <icon name="ph:shopping-cart-light" size="28" />
        </el-badge>
        <p>{{ t('header.actions.cart') }}</p>
      </nuxt-link-locale>
      <client-only>
        <nuxt-link-locale
            to="/profile/settings"
            class="header__actions-item"
            v-if="isAuthenticated"
        >
          <icon name="material-symbols-light:person-outline-rounded" size="32" />
          <p>{{ t('header.actions.profile') }}</p>
        </nuxt-link-locale>
        <div
            class="header__actions-item"
            @click="appStore.setActiveState('login')"
            v-else
        >
          <icon name="material-symbols-light:person-outline-rounded" size="32" />
          <p>{{ t('header.actions.login') }}</p>
        </div>
        <template #fallback>
          <div
              class="header__actions-item"
              @click="appStore.setActiveState('login')"
          >
            <icon name="material-symbols-light:person-outline-rounded" size="32" />
            <p>{{ t('header.actions.login') }}</p>
          </div>
        </template>
      </client-only>
    </div>
    <ui-language-switcher />
  </header>
</template>

<script setup lang="ts">
const { t } = useI18n();
const appStore = useAppStore();
const userStore = useUserStore();
const wishlistStore = useWishlistStore();
const cartStore = useCartStore();

const isAuthenticated = computed(() => userStore.isAuthenticated);

const productsInCartQuantity = computed(() => {
  let count = 0;
  cartStore.currentOrder?.orderProducts?.edges.forEach((el) => {
    count = count + el.node.quantity;
  });

  return count;
});
const productsInWishlistQuantity = computed(() => {
  return wishlistStore.wishlist ? wishlistStore.wishlist.products.edges.length : 0;
});
</script>

<style lang="scss" scoped>
.header {
  box-shadow: 0 1px 2px #0000001a;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: $white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 10px 25px;

  &__actions {
    display: flex;
    align-items: center;
    gap: 15px;

    &-item {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 7px 10px;
      border-radius: $default_border_radius;
      transition: 0.2s;

      @include hover {
        background-color: #f7f7f7;
        color: $accent;
      }

      & div {
        position: relative;
      }

      & i {
        transition: 0.2s;
        font-size: 24px;
      }

      & p {
        transition: 0.2s;
        font-size: 12px;
      }
    }
  }
}
</style>