# SharePoint MegaMenu Extension

**Version:** 1.0.2  
**Framework:** SharePoint Framework (SPFx) 1.4.1  
**Node.js:** v8.17.0  

Eine moderne, barrierefreie Mega-Menü-Lösung für SharePoint 2019 oder SharePoint SE als ApplicationCustomizer Extension.

## 🌟 Features

- **3-stufige Navigationshierarchie** basierend auf SharePoint Managed Metadata (Taxonomy)
- **Responsive Design** mit automatischer Anpassung an verschiedene Bildschirmgrößen
- **Barrierefreiheit** mit vollständiger Tastaturnavigation und Screenreader-Unterstützung
- **Einstellungs-Panel** für Administratoren zur Konfiguration
- **Externe CSS-Unterstützung** für individuelle Anpassungen
- **Office UI Fabric Integration** für konsistente SharePoint-Optik

## 📋 Voraussetzungen

- SharePoint 2019 oder SharePoint SE (Subscription Edition)
- Node.js v8.17.0 (empfohlen)
- SharePoint Framework Development Tools (SPFx 1.4.1)

## 🚀 Installation & Entwicklung

### 1. Repository klonen und Abhängigkeiten installieren

```bash
git clone <repository-url>
cd MegaMenu
npm install
```

### 2. Entwicklungsserver starten

```bash
gulp serve
```

### 3. Produktionspaket erstellen

```bash
gulp clean
gulp bundle --ship
gulp package-solution --ship
```

## 📁 Projektstruktur

```
src/
├── extensions/
│   └── megaMenu/
│       ├── MegaMenuApplicationCustomizer.ts    # Haupteinstiegspunkt
│       ├── MegaMenuRenderer.ts                 # Menü-Rendering-Logik
│       ├── MegaMenuSettings.ts                 # Einstellungs-Panel
│       └── MegaMenu.css                        # Styling
├── services/
│   ├── TaxonomyNavigationService.ts           # Taxonomy-Datenabfrage
│   ├── UserCustomActionService/               # UserCustomAction-Verwaltung
│   └── ...
└── deployment/
    ├── add-megamenu.ps1                       # Installations-Script
    └── remove-megamenu.ps1                    # Deinstallations-Script
```

## ⚙️ Konfiguration

### Einstellungs-Panel (Admin-Bereich)

Das MegaMenu verfügt über ein Einstellungs-Panel, das über das Zahnrad-Icon (⚙️) im Menü zugänglich ist:

1. **Name des Navigations-Termsets**: Der Name des Managed Metadata Termsets, das als Datenquelle dient
2. **Pfad zu zusätzlicher CSS-Datei**: Optional - URL zu einer benutzerdefinierten CSS-Datei

### PowerShell-Deployment

```powershell
# Installation
.\src\deployment\add-megamenu.ps1

# Deinstallation  
.\src\deployment\remove-megamenu.ps1
```

## 🎨 Anpassungen

### CSS-Customization

Das MegaMenu kann über externe CSS-Dateien angepasst werden. Wichtige CSS-Klassen:

```css
/* Haupt-Container */
#Mega-Menu { }

/* Top-Level Menüpunkte */
#Mega-Menu > ul > li > a { }

/* Mega-Menü Dropdown */
.mega-menu { }

/* Kategorien im Dropdown */
.mega-menu-category { }

/* Links in Kategorien */
.mega-menu-category ul li a { }

/* Einstellungs-Panel */
.mm-settings-panel { }
```

### Accessibility Features

- **Skip-Links** für Screenreader
- **ARIA-Rollen** und Labels
- **Fokus-Management** mit sichtbaren Fokus-Indikatoren
- **Tastaturnavigation** mit Tab/Shift+Tab/Escape
- **High Contrast Modus** Unterstützung

## 🔧 Build-Befehle

| Befehl | Beschreibung |
|--------|-------------|
| `gulp serve` | Entwicklungsserver mit Live-Reload |
| `gulp build` | Entwicklungs-Build (Debug-Modus) |
| `gulp bundle --ship` | Produktions-Build (Optimiert) |
| `gulp package-solution --ship` | SharePoint Package (.sppkg) erstellen |
| `gulp clean` | Build-Artifacts löschen |
| `gulp test` | Unit-Tests ausführen |

## 📦 Deployment

1. **Paket erstellen:**
   ```bash
   gulp clean && gulp bundle --ship && gulp package-solution --ship
   ```

2. **SharePoint App Catalog:**
   - `.sppkg` Datei aus `sharepoint/solution/` hochladen
   - App genehmigen und für alle Sites verfügbar machen

3. **Site-spezifische Aktivierung:**
   - PowerShell-Scripts verwenden

## 🐛 Troubleshooting

### Häufige Probleme

**Problem:** Menü wird nicht angezeigt  
**Lösung:** Termset-Name in den Einstellungen prüfen

**Problem:** CSS-Styling funktioniert nicht  
**Lösung:** Externe CSS-URL und CORS-Einstellungen überprüfen

**Problem:** Build-Fehler  
**Lösung:** Node.js Version prüfen (v8.17.0 empfohlen)

### Debug-Modus

```bash
# Detaillierte Build-Ausgabe
gulp bundle --verbose

# TypeScript-Fehler anzeigen  
gulp build
```

## 🔄 Versionshistorie

### v1.0.2 (Aktuell)
- Einstellungs-Panel implementiert
- Fokus-Management verbessert
- CSS-Optimierungen für SharePoint-Konsistenz
- Barrierefreiheit-Verbesserungen

### v1.0.1
- Responsive Design hinzugefügt
- Performance-Optimierungen

### v1.0.0
- Initiale Release
- 3-stufige Navigation
- Grundlegende Accessibility

## 👥 Mitwirkende

- Entwicklung: Matthias Glubrecht
- Framework: SharePoint Framework (Microsoft)
- UI: Office UI Fabric (Microsoft)

## 📄 Lizenz

tbd

## 🆘 Support

Bei Fragen oder Problemen:
1. Issues im Repository erstellen
2. Dokumentation und Troubleshooting-Bereich prüfen