2023251
/
trihub-ernaehrung-backseatDevs
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(navbar): fixierte, tastaturbarrierefreie Navigationsleiste #4

Merged
3018401 merged 4 commits from feature/navigationsleiste into dev 2026-09-28 13:14:10 +02:00
Conversation 1 Commits 4 Files Changed 8
2023251 commented 2026-09-28 10:07:23 +02:00
Owner

Beschreibung

Navigationsleiste als wiederverwendbare Komponente (HTML-Fragment, CSS, JS).

Umsetzung

  • Fixiert am oberen Bildschirmrand (position: fixed)
  • Tastatursteuerung: Skip-Link zur Hauptseite, sichtbarer Fokus-Ring, Escape schließt das mobile Menü, Fokus-Management
  • Responsive mit Aufklappmenü auf schmalen Bildschirmen
  • Menüpunkte: Pakete, Ernährung, Beraterprofil, FAQ, Rezensionen, Kontakt

Dateien

  • src/components/navigationsbar/navigation.html
  • src/components/navigationsbar/navigation.js
  • src/components/navigationsbar/images/logo.png
  • src/styles/navigation.css

Hinweis zur Integration

Die Navbar wird per fetch() in einen Platzhalter (<div id="navbar-placeholder"></div>) geladen und braucht daher den Dev-Server (npm run dev). Die Einbindung in die Seiten erfolgt separat.

## Beschreibung Navigationsleiste als wiederverwendbare Komponente (HTML-Fragment, CSS, JS). ## Umsetzung - Fixiert am oberen Bildschirmrand (`position: fixed`) - Tastatursteuerung: Skip-Link zur Hauptseite, sichtbarer Fokus-Ring, Escape schließt das mobile Menü, Fokus-Management - Responsive mit Aufklappmenü auf schmalen Bildschirmen - Menüpunkte: Pakete, Ernährung, Beraterprofil, FAQ, Rezensionen, Kontakt ## Dateien - `src/components/navigationsbar/navigation.html` - `src/components/navigationsbar/navigation.js` - `src/components/navigationsbar/images/logo.png` - `src/styles/navigation.css` ## Hinweis zur Integration Die Navbar wird per `fetch()` in einen Platzhalter (`<div id="navbar-placeholder"></div>`) geladen und braucht daher den Dev-Server (`npm run dev`). Die Einbindung in die Seiten erfolgt separat.
2023251 added 3 commits 2026-09-28 10:07:23 +02:00
3018401 commented 2026-09-28 11:07:59 +02:00
Collaborator

Die Komponente sieht grundsätzlich passend aus. Beim Build-Test wird das HTML-Fragment übernommen, das Logo bleibt jedoch auf einem nicht mitgelieferten /src/-Pfad. Bitte den Logo-Pfad für den Produktionsbuild anpassen.
Der Link „Pakete“ in Zeile 31 von navigation.html sollte auf /angebotsuebersicht.html zeigen. Diese Seite wird später noch gepusht. Die übrigen Navigationsziele sollten wir ebenfalls mit den tatsächlichen Seiten abstimmen.
Bitte im Einbindungsbeispiel außerdem erwähnen, dass das Script bereits automatisch initialisiert wird und die CSS separat eingebunden werden muss.

Die Komponente sieht grundsätzlich passend aus. Beim Build-Test wird das HTML-Fragment übernommen, das Logo bleibt jedoch auf einem nicht mitgelieferten /src/-Pfad. Bitte den Logo-Pfad für den Produktionsbuild anpassen. Der Link „Pakete“ in Zeile 31 von navigation.html sollte auf /angebotsuebersicht.html zeigen. Diese Seite wird später noch gepusht. Die übrigen Navigationsziele sollten wir ebenfalls mit den tatsächlichen Seiten abstimmen. Bitte im Einbindungsbeispiel außerdem erwähnen, dass das Script bereits automatisch initialisiert wird und die CSS separat eingebunden werden muss.
2023251 added 1 commit 2026-09-28 13:07:56 +02:00
3018401 merged commit 4cae17a55d into dev 2026-09-28 13:14:10 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: 2023251/trihub-ernaehrung-backseatDevs#4
There is no content yet.
Delete Branch "feature/navigationsleiste"

Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?