Navigation

Dropdown-Navigation mit Mobile-Support für die Campus-Anwendung.

CSS-Datei	/public/css/nav.css
JavaScript	/public/js/app.js
Layout	/src/View/layout.php
Mobile Breakpoint	768px

Struktur

Die Navigation ist in drei Hauptbereiche gegliedert:

Bereich	Zielgruppe	Inhalte
Anwendungen	Endanwender	KI-Chat, Content Studio, Semantic Explorer, Nextcloud
Entwicklung	Entwickler	Tasks, Protokoll, Contracts, System Explorer
Ressourcen	Alle	Dokumentation

CSS-Architektur

Die Navigation verwendet CSS-Variablen gemäß CSS Contract v1.0:

:root {
    --nav-bg: #2c3e50;
    --nav-text: #fff;
    --nav-hover-bg: rgba(255, 255, 255, 0.1);
    --nav-dropdown-bg: #fff;
    --nav-dropdown-text: #333;
    --nav-dropdown-hover-bg: #f8f9fa;
    --nav-dropdown-border: #eee;
    --nav-focus-color: #3498db;
}

Accessibility

Implementierte WCAG 2.1 AA Features:

Feature	Umsetzung	WCAG
Focus-States	2px solid outline auf allen interaktiven Elementen	2.4.7
Kontrast	Weiß auf #2c3e50 = 11.7:1	1.4.3
ARIA	aria-label, aria-expanded auf Toggle	4.1.2
Keyboard	Tab-Navigation, Enter/Space für Dropdowns	2.1.1

Mobile Navigation

Bei Viewport ≤ 768px:

Hamburger-Menü-Button erscheint
Navigation-Items werden vertikal gestapelt
Dropdowns öffnen per Click statt Hover
Volle Breite für Touch-Targets

JavaScript

// Mobile Toggle
navToggle.addEventListener("click", function () {
    const isOpen = navItems.classList.toggle("open");
    navToggle.setAttribute("aria-expanded", isOpen);
});

// Dropdown Toggle (Mobile)
if (window.innerWidth <= 768) {
    dropdown.classList.toggle("active");
}

Dateien

Datei	Zweck
/public/css/nav.css	Alle Navigation-Styles (dediziert)
/public/js/app.js	Mobile Toggle + Dropdown-Logik
/src/View/layout.php	HTML-Struktur der Navigation

HTML-Struktur

<nav class="main-nav">
    <a href="/" class="nav-brand">Campus</a>
    
    <button class="nav-toggle" aria-label="Navigation">
        <span class="nav-toggle-icon"></span>
    </button>
    
    <div class="nav-items">
        <div class="nav-dropdown">
            <button class="nav-dropdown-btn">Anwendungen</button>
            <div class="nav-dropdown-content">
                <a href="/chat">KI-Chat</a>
                ...
            </div>
        </div>
    </div>
</nav>

Änderungshistorie

Datum	Änderung
2025-12-20	Initial: Dropdown-Navigation mit Mobile-Support erstellt
2025-12-20	nav.css als dedizierte Datei ausgelagert
2025-12-20	/explorer Route entfernt (redundant)

]]>