Header

Vissza
A header komponens a weboldal fejlécéhez biztosít reszponzív navigációt.

Élő példa

A header fehér háttérrel és szürke árnyékkal jelenik meg:

Tartalom példa a header alatt

Funkciók

Desktop nézet

  • Logo a bal oldalon
  • Navigációs menü középen
  • Nyelvi választó és CTA gomb jobb oldalon
  • Sticky pozicionálás görgetésnél

Mobil nézet

  • Hamburger menü gomb
  • Slide-down animált menü
  • Teljes szélességű linkek
  • Nyelvi választó és CTA a menü alján

Struktúra

Fő navigáció

A következő menüpontokat tartalmazza:

  • Szolgáltatások
  • Rólunk
  • Fenntarthatóság
  • Karrier
  • Hírek

Nyelvi választó

Támogatott nyelvek:

  • Magyar (HU)
  • English (EN)
  • Deutsch (DE)

Stílusok

Színek

  • Háttér: Fehér (#FFFFFF)
  • Szöveg: Szürke (#374151)
  • Hover: BÜCHL kék (#002F5C)
  • Border: Világosszürke (#E5E7EB)

Méretek

  • Magasság: 80px (h-20)
  • Logo: 40px magas (h-10)
  • Z-index: 50 (sticky pozíció)
  • Container: max-width + padding

Reszponzív viselkedés

Mobile first megközelítés

A komponens alapértelmezésben mobil nézetet mutat, majd breakpoint-oknál vált át desktop nézetre. A breakpoint lg (1024px).

Animációk

A mobil menü Transition komponenst használ smooth animációhoz. A hover effektek transition-colors osztállyal működnek.

Használat

A header komponens a default layout része: 

<template>
  <div class="min-h-screen flex flex-col">
    <TheHeader />
    <main class="flex-1">
      <slot />
    </main>
    <TheFooter />
  </div>
</template>

Akadálymentesség

  • Szemantikus HTML elemek (header, nav)
  • Megfelelő kontrasztarányok
  • Billentyűzet navigáció támogatása
  • ARIA label-ek a gombokon
  • Skip navigation link (implementálandó)