feat(#50): Implementere felles header og gjenbrukbar menyknapp

[annisaam]

Beskrivelse

Denne PR-en implementerer en felles og gjenbrukbar header-komponent for Handlelappen, basert på Figma-designet og prosjektets eksisterende tema.

Hensikten er å sikre et helhetlig design på tvers av sidene og legge grunnlaget for felles navigasjon. Headeren har to varianter: én med navigasjonslenker for hjemmesiden og én med søkefelt for søkeresultatsiden og øvrige sider.

Det er også opprettet en egen menyknappkomponent som foreløpig fungerer som en placeholder, og som senere skal kobles til navigasjonsmenyen.

Relaterte issues

Closes #50

Relatert til #51 – Koble sammen sider og implementere felles navigasjon.

Endringer gjort

• Opprettet Header.tsx med støtte for hjemmevariant og søkevariant.
• Opprettet en gjenbrukbar MenuButton.tsx med tilhørende CSS.
• Videreutviklet eksisterende Header.css basert på Figma-designet.
• Gjenbrukt den eksisterende animerte logoen.
• Lagt til «Min lapp»-knapp med antallsvisning.
• Implementert responsiv styling for desktop, nettbrett og mobil.
• Sørget for at headeren strekker seg over hele skjermbredden.
• Brukt eksisterende CSS-variabler for lys og mørk modus.
• Lagt til rosa fokusmarkering på logoen for bedre tastaturtilgjengelighet.
• Fjernet den foreløpig ubrukte ⌘K-indikatoren fra søkefeltet.
• Beholdt App.tsx uendret.

Hva slags type fiks inneholder denne PR

• Bug fix
• Ny funksjonalitet
• Refactor
• Dokumentasjon
• Testing

Sjekkliste

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

Skjermbilder

Skjermbilder av headerens to varianter i lys og mørk modus, samt responsiv visning på desktop og mobil.

Begge headervarientene

Mobilvisning

Tastaturfokus

Videre arbeid

Headeren er foreløpig implementert som gjenbrukbare komponenter og er ikke integrert i de faktiske sidene.

Navigasjonslenker, søkefelt, «Min lapp», menyknapp, osv. kobles til funksjonalitet i issue #51.

Fullstendig tastaturnavigasjon testes etter integrasjonen.

[taraa]

Supert!