feat(#51): Koble sammen sider og implementere felles navigasjon

[annisaam]

Beskrivelse

Denne PR-en implementerer felles navigasjon og kobler sammen startsiden, produktkatalogen og søkeresultatsiden i Handlelappen.

Hensikten er å erstatte den midlertidige testvisningen i App.tsx med en helhetlig applikasjonsstruktur basert på React Router. Brukeren kan nå navigere mellom eksisterende sider, søke etter produkter, bla gjennom kategorier og bruke en felles navigasjonsmeny.

Løsningen bygger videre på eksisterende Figma-design og felles komponenter, med fokus på responsivitet, universell utforming og gjenbrukbar kode.

Relaterte issues

Closes #51

Relatert til #50 (felles header), #39 (startside) og #37 (produktsøk og søkeresultatside).

Endringer gjort

• Installert React Router og implementert routing mellom startsiden (/) og produktkatalogen (/search).
• Integrert felles header med riktig variant for startsiden og øvrige sider.
• Koblet søkefeltene på startsiden og i headeren til søkeresultatsiden.
• Implementert nullstilling av tidligere filtre, sortering og paginering ved nye søk.
• Gjort «Katalog» til en fungerende navigasjonslenke som viser alle produkter uten gamle filtre.
• Koblet kategorikortene på startsiden til faktiske kategorier og produktantall fra GraphQL.
• Sortert kategorikortene alfabetisk etter norsk alfabet.
• Implementert navigasjon fra kategorikort til filtrerte søkeresultater.
• Forbedret pagineringen slik at brukeren automatisk scroller til produktseksjonen ved sidebytte.
• Opprettet en gjenbrukbar NavigationMenu-komponent med støtte for mobil og desktop.
• Implementert åpning og lukking av navigasjonsmenyen, inkludert Escape, tastaturnavigasjon og fokusstyring gjennom HTML <dialog>.
• Tilpasset header og startside til små skjermbredder, inkludert 320 px, uten horisontal scrolling.
• Oppdatert favicon til Handlelappen-logoen og satt norsk dokumentasjonsspråk i index.html.
• Fjernet den midlertidige testvisningen og tilhørende CSS fra App.tsx og App.css.

Hva slags type fiks inneholder denne PR

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

Sjekkliste

• Testet lokalt
• Dokumentert endringer
• Sjekket for feilmeldinger

npm run build og npm run lint er kjørt uten feil.

Navigasjonen er testet manuelt på desktop og mobil, inkludert skjermbredde på 320 px. Søk, kategorifiltrering, paginering og navigasjonsmenyen er kontrollert.

Navigasjonsmenyen er også testet med tastatur, inkludert Tab, Shift+Tab, Escape og tilbakeføring av fokus etter lukking.

Skjermbilder

Skjermbilder av startside, produktkatalog, kategorinavigasjon og navigasjonsmeny på desktop og mobil er lagt ved.

Hjemsiden med header med funksjonalitet

Meny

Kategoriene i alfabetisk rekkefølge

Endret navn på kortene for å ha dem så likt databasen som mulig.

Søke-side

Kategori "Ost" blir automatisk valgt når man trykker på kategorikortet "Ost" på hjemsiden.

Mobilvisning

Endret på fane-ikon og -tittel

Videre arbeid

Produktdetaljsiden og handlelistesidene kobles til den felles navigasjonen når de aktuelle implementasjonene er tilgjengelige i dev.

«Min lapp» og de øvrige handlelistepunktene i navigasjonsmenyen er foreløpig placeholders.

Søketilstanden bruker fortsatt en kombinasjon av URL-parametere og localStorage. Videre synkronisering, blant annet for delbare filterlenker og nettleserens tilbakeknapp, kan forbedres i videre integrasjonsarbeid.

Må legge til en komponent i headeren som kan brukes for å bytte lys/mørk modus. Skal ha lys modus som standard.