# Complex App

---

# Verwendung

Eine Complex App erschließt viele Bereiche über mehrere Navigationsebenen aus
globalem Header, Sidebar und Breadcrumb. Das ist die im mStudio typische Form.
Verwende sie, wenn eine flache Navigation nicht mehr ausreicht. Die gestaffelten
Ebenen halten auch eine große Anwendung übersichtlich und zeigen dem Nutzer
jederzeit, wo er sich befindet. Für ein kleines Werkzeug mit wenigen,
gleichrangigen Bereichen genügt eine
[Simple App](https://flow.mittwald.de/templates/app-shells/simple-app).

---

# Aufbau

- **Header** – Eine [HeaderNavigation](https://flow.mittwald.de/components/navigation/header-navigation)
  trägt die globale Navigationsebene und bereichsübergreifende Funktionen.
- **Sidebar** – Eine [Navigation](https://flow.mittwald.de/components/navigation/navigation) führt durch
  die Unterseiten des aktuellen Bereichs.
- **Content Header** – [Breadcrumb](https://flow.mittwald.de/components/navigation/breadcrumb) und
  PageTitle (ein [Heading](https://flow.mittwald.de/components/content/heading) der Ebene 1) orientieren
  den Nutzer in der Tiefe.
- **Content** – Der Inhalt einer Seite wird in der Regel in
  [LayoutCards](https://flow.mittwald.de/components/structure/layout-card) dargestellt. Typische
  Seitentypen sind beispielsweise [Detailseiten](https://flow.mittwald.de/templates/seiten/detailseite),
  [Dashboards](https://flow.mittwald.de/templates/seiten/dashboard) und
  [Übersichtsseiten](https://flow.mittwald.de/templates/seiten/uebersichtsseite).
- **Footer** – Hier lassen sich [Links](https://flow.mittwald.de/components/navigation/link) platzieren,
  etwa Verweise auf Datenschutz oder Impressum.

Auf schmalen Screens ist für Header-Navigation und Sidebar kein Platz. Beide
geben ihre Links an ein [OffCanvas](https://flow.mittwald.de/components/overlays/modal) ab, das ein
Burger-Menü in der Kopfleiste öffnet.

---

# Varianten und Abwandlung

## Detailansicht

Die Detailansicht kombiniert zwei Seitentypen: Über die
[Übersichtsseite](https://flow.mittwald.de/templates/seiten/uebersichtsseite) – eine
[List](https://flow.mittwald.de/components/list/list) – navigiert man in die Tiefe zu einem einzelnen
Objekt. [Breadcrumb](https://flow.mittwald.de/components/navigation/breadcrumb) und PageTitle helfen bei
der Orientierung; eine [TabNavigation](https://flow.mittwald.de/components/navigation/tab-navigation)
gliedert das Objekt in Unterbereiche.

## Doku-Layout

Eine einfachere Abwandlung ohne globale Objekt-Tiefe: Die
[Navigation](https://flow.mittwald.de/components/navigation/navigation) listet die Bereiche flach, der
Content steht mittig, und rechts führt ein eigenes Inhaltsverzeichnis („Auf
dieser Seite") durch die Abschnitte der Seite. Dieser Styleguide selbst folgt
dem Muster.