tp/main_dc/yalarba/yalarba-nuxt/app/components/layout/YalHeader.vue

<template>
  <header class="header">
    <div class="container header__inner">
      <NuxtLink to="/" class="header__logo">
        <img src="/logo.svg" alt="Ял Арба" class="header__logo-img" />
      </NuxtLink>

      <nav class="header__nav">
        <NuxtLink to="/search" class="header__link">
          Поиск
        </NuxtLink>
        <NuxtLink to="/about" class="header__link">
          О нас
        </NuxtLink>
        <NuxtLink to="/contacts" class="header__link">
          Контакты
        </NuxtLink>
      </nav>

      <div class="header__actions">
        <template v-if="isAuthenticated">
          <NuxtLink to="/favorites" class="header__icon-btn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" stroke="currentColor" stroke-width="2" fill="none"/>
            </svg>
          </NuxtLink>
          <NuxtLink to="/notifications" class="header__icon-btn header__notif">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9zM13.73 21a1.999 1.999 0 01-3.46 0" stroke="currentColor" stroke-width="2" fill="none"/>
            </svg>
            <span v-if="notifCount" class="badge">{{ notifCount }}</span>
          </NuxtLink>
          <NuxtLink to="/profile" class="header__profile">
            <img v-if="user?.avatar" :src="user.avatar" alt="" class="avatar avatar--sm" />
            <span v-else class="avatar avatar--sm header__avatar-placeholder">{{ userInitials }}</span>
          </NuxtLink>
        </template>
        <template v-else>
          <NuxtLink to="/auth/login" class="btn btn--ghost btn--sm">
            Войти
          </NuxtLink>
          <NuxtLink to="/auth/register" class="btn btn--primary btn--sm">
            Регистрация
          </NuxtLink>
        </template>
      </div>

      <button class="header__burger" @click="menuOpen = !menuOpen" aria-label="Меню">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>
</template>

<script setup lang="ts">
const { isAuthenticated, user } = useAuth()

const menuOpen = ref(false)

const notifCount = ref(0)

const userInitials = computed(() => {
  if (!user.value?.name) return '?'
  return user.value.name.charAt(0).toUpperCase()
})
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-stroke);
  z-index: 100;
}

.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 40px;
}

.header__logo-img {
  height: 40px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header__link {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-black);
  transition: color var(--transition-fast);
}

.header__link:hover {
  color: var(--color-primary);
}

.header__link.router-link-active {
  color: var(--color-primary);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.header__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-gray);
  transition: color var(--transition-fast);
}

.header__icon-btn:hover {
  color: var(--color-primary);
}

.header__notif .badge {
  position: absolute;
  top: 4px;
  right: 4px;
}

.header__profile {
  cursor: pointer;
}

.header__avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  background: var(--color-light-green);
}

.header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}

.header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-black);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

@media (max-width: 744px) {
  .header__nav {
    display: none;
  }

  .header__actions .btn {
    display: none;
  }

  .header__actions .header__icon-btn,
  .header__actions .header__profile {
    display: none;
  }

  .header__burger {
    display: flex;
  }
}
</style>