Header.vue

<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['navigate'])
</script>

<template>
  <header class="header-container">
    <!-- Bal oldalt a logó és a cím -->
    <div class="logo-container">
      <svg class="fire-logo" viewBox="0 0 24 24">
        <path
          fill="white"
          d="M12.0 2.0C9 6 14 8 10 13c-1 2-2 4 0 7 2 3 6 3 8 0 2-3 2-6 0-9-1-1-1-3 0-4 1-1 0-3-1-4-1-1-2-2-5-1z"
        />
      </svg>
      <h1>Ignis - Számítógép alkatrészek</h1>
    </div>

    <!-- Jobb oldalt a gombok -->
    <nav>
      <button @click="emit('navigate', 'main')">Termékek</button>
      <button @click="emit('navigate', 'login')">Bejelentkezés</button>
      <!-- Kosár gomb -->
      <button class="cart-btn" @click="emit('navigate', 'cart')">
        <svg class="cart-icon" viewBox="0 0 24 24">
          <path
            fill="white"
            d="M7 4H2v2h3l3.6 7.59-1.35 2.41C6.52 16.37 7.48 18 9 18h11v-2H9.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.85 6H6.31l-.95-2H2V2h4a1 1 0 0 1 .92.61L7.68 4H7z"
          />
        </svg>
      </button>
    </nav>
  </header>
</template>

<style scoped>
.header-container {
  /* Teljes szélesség a böngészőben */
  width: 100%;
  background-color: #b30000; /* Piros fejléc */
  color: white;
  padding: 20px;
  box-sizing: border-box;

  /* Kulcs: a flexbox elrendezés, 
     bal oldalt a logó, jobb oldalt a navigáció */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logó + felirat (bal oldalt) */
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fire-logo {
  width: 40px;
  height: 40px;
}

/* Gombok (jobb oldalt) */
nav {
  display: flex;
  gap: 10px;
}
button {
  background-color: #800000;
  color: white;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
button:hover {
  background-color: #cc0000;
}

/* Kosár ikon */
.cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-icon {
  width: 20px;
  height: 20px;
}
</style>