Logo hover header

Migrovane z docs-old-cvrn/plans/PLAN_LOGO_HOVER_HEADER.md.

1) Ciel

Doplnit do hlavicky brand prvok, ktory:

• zobrazi ikonku/logo (napr. SVG),
• po hover (a focus pre klavesnicu) plynulo odkryje text vedla loga,
• ostane vizualne minimalisticky a konzistentny s existujucim UI stylom.

2) Pozadovany UX vysledok

Desktop:

• v lavom rohu hlavicky je klikatelny brand prvok (link na /),
• default stav: viditelne logo, text skryty alebo takmer skryty,
• hover nad logom: text sa odkryje vedla loga a je vertikalne vystredeny.

Klavesnica/accessibility:

• rovnake spravanie aj pre focus-visible,
• brand link ma zmysluplny aria-label.

Mobil:

• hover neexistuje, preto text nema byt "nedostupny",
• odporucanie: na mobiloch zobrazit text stale (bez animacie), na desktopoch hover-reveal.

3) Rozhodnutia pred implementaciou

1. Label:
   • Variant A (odporucany): cvrn
   • Variant B: cvrn.sk
2. Typ loga:
   • jednoduchy monochromaticky SVG symbol (dobre citatelny v light/dark mode),
   • bez jemnych detailov, aby ostal cisty pri malej velkosti.
3. Animacia:
   • trvanie ~160-220 ms,
   • len opacity + max-width + translate, bez layout "skoku".

4) Navrh implementacnej architektury

Dotknute subory:

• novy subor: public/logo_cvrn_black.svg
• novy subor: public/logo_cvrn_white.svg
• novy komponent: src/components/brand-logo.tsx
• update: src/components/site-header.tsx
• volitelne: src/app/globals.css (iba ak bude treba custom utility triedy)

Komponentovy navrh:

• BrandLogo bude obsahovat:
  • SVG ikonu (light/dark varianta),
  • textovy <span> pre label,
  • wrapper Link na /.
• SiteHeader namiesto holeho textu cvrn.sk vyrenderuje BrandLogo.

5) Implementacny postup (kroky)

1. Pripravit SVG logo
   • vytvorit public/logo_cvrn_black.svg a public/logo_cvrn_white.svg,
   • overit citatelnost v light aj dark mode.
2. Vytvorit BrandLogo komponent
   • props:
     • label?: "cvrn" | "cvrn.sk" (default podla finalneho rozhodnutia),
     • href?: string (default /).
   • struktura:
     • ikonka s fixnou velkostou (aktualne 32px),
     • textovy span s animaciou odkryvania.
3. Napojit do headera
   • v src/components/site-header.tsx nahradit textovy link novym komponentom.
4. Responsive behavior
   • desktop (md+): hover/focus reveal textu,
   • mobil (<md): text stale viditelny alebo minimalne bez potreby hover.
5. Accessibility
   • aria-label na linku,
   • focus ring konzistentny s UI,
   • fallback: ak by sa SVG nenacitalo, text stale ostava citatelny.
6. Doladenie spacingu
   • skontrolovat, ze sa header "nelame" pri uzsich sirkach.

6) Akceptacne kriterialne testy

1. Desktop hover:
   • po najazde mysou na logo sa text plynulo odkryje.
2. Desktop keyboard:
   • po tab focus na brand sa text odkryje rovnako ako pri hover.
3. Mobil:
   • brand je citatelny aj bez hover interakcie.
4. Theme:
   • logo a text su citatelne v light aj dark mode.
5. Layout:
   • header nema horizontal overflow pri beznej sirke mobilu.

7) Rizika a mitigacia

• Riziko: nav skace pri hover (layout shift).
  • Mitigacia: rezervovat fixny priestor pre reveal text (max-width + overflow-hidden).
• Riziko: na mobile bude brand prilis dlhy.
  • Mitigacia: pre mobil preferovat kratky label cvrn.
• Riziko: slaby kontrast SVG v dark mode.
  • Mitigacia: monochromaticky symbol s jasne definovanou farbou cez CSS.

8) Odhad pracnosti

• UX + logo priprava: 0.5-1 h
• implementacia komponentu + header wiring: 0.5-1 h
• responsive + a11y doladenie + manual test: 0.5 h

Spolu: orientacne 1.5-2.5 h.