# App Layout

Das App Layout dient als Basis\-Layout für Mate\-Anwendungen. 

## Overview

### Intro

Das  <strong>App Layout </strong> dient als Basis\-Layout für Mate\-Anwendungen. Es stellt feste Bereiche für Global Header, Application Bar, Navigation Panel und die eigentliche Content Area der Anwendungen zur Verfügung. Es ist nicht dafür gedacht, innerhalb anderer Elemente platziert zu werden.

<!-- block warning --><mark> <!-- block title -->Das App Layout ersetzt den ehemaligen SYNNeo AWR (siehe Dokumentation in  [Confluence]() ).</mark><!-- end block -->

<!-- block info --><mark>Technische Grundlage<!-- block title -->Das App Layout besteht aus &lt;vaadin-app-layout&gt; und wird um das Mate\-Addon &lt;mate-app-layout-addon&gt; ergänzt. Das Addon fügt die Mate\-spezifischen Bestandteile hinzu: AKDB Logo, den Bereich für die Application Bar, die Icons zum Auf\- und Zuklappen des Navigation Panels sowie die Leiste zum Verstellen seiner Breite.<br><br>Das Addon setzt voraus, dass es direkt innerhalb eines &lt;vaadin-app-layout&gt; platziert ist. Außerhalb dieses Elements bleibt es wirkungslos. Ohne das Addon fehlen alle genannten Bestandteile.</mark><!-- end block -->

### Verwendung

Das App Layout wird als äußerster Rahmen jeder Mate\-Anwendung eingesetzt und umschließt alle weiteren Inhalte. Es wird pro Anwendung genau einmal verwendet und nicht innerhalb anderer Elemente platziert. Für die Aufteilung von Inhalten innerhalb des Inhaltsbereichs sind andere Layouts vorgesehen (siehe  [Split Layout]()  und  [Master Detail Layout]() ).

### Bereiche App Layout

Das App Layout besteht aus folgenden Bereichen: 

* [Global Header]()
* [Application Bar]()
* [Navigation Panel]()
* Content Area (Inhaltsbereich, in dem Anwendungsinhalte angezeigt werden können)

 ![](/images/versions/25-0/figma/g7AbdeSMvDVOwYoP4gFJXz/16_5376.png)<!--[Figma](https://www.figma.com/design/g7AbdeSMvDVOwYoP4gFJXz/?node-id=16:5376)--> 

 <strong>App Layout</strong> 

## Guidelines

### Aufbau

Das App Layout stellt die vier oben genannten Bereiche als feste Positionen bereit. Die Bereiche sind nicht frei anordenbar: Der Global Header liegt oben über die gesamte Breite, die Application Bar darunter am linken Rand, das Navigation Panel rechts neben der Application Bar und der Inhaltsbereich füllt die verbleibende Fläche.

Keiner dieser Bereiche ist ein fertiges, für sich lieferbares Element. Das App Layout ist die Kompositionswurzel: Es gibt vor, wo etwas liegt, und die Anwendung füllt die Bereiche mit Inhalten.

### Zusammenspiel der Bereiche

Die folgende Übersicht ordnet für jeden Bereich zu, was aus dem Vaadin App Layout kommt, was das Mate Addon ergänzt und was die Anwendung selbst umsetzen muss.

|<strong>Bereich</strong>|<strong>Vaadin App Layout</strong>|<strong>Mate App Layout Addon</strong>|<strong>Eigenleistung der Anwendung</strong>|
|-|-|-|-|
|<strong>Global Header</strong> <br>(Bereich "navbar")|Stellt den Bereich bereit und positioniert ihn oben über die gesamte Breite.|Fügt das AKDB Logo und das Icon zum Auf\- und Zuklappen des Navigation Panels ein. Das Logo ist austauschbar.|Anwendungs\-, Modul\- und Mandantenangabe sowie alle Icon\-Tasten inklusive Application Switcher.|
|<strong>Application Bar</strong> |Nicht enthalten.|Stellt den Bereich bereit, positioniert ihn unter dem Global Header am linken Rand und legt seine Breite fest.|Der Inhalt des Bereichs: Tabs in der Theme\-Variante "application-bar" mit vertikaler Ausrichtung, inklusive Icons und Modulzuordnung.|
|<strong>Navigation Panel</strong> <br>(Bereich "drawer")|Stellt den Bereich bereit, verwaltet den Auf\-/Zuklapp\-Zustand und schaltet auf kleinen Bildschirmen in die überlagernde Darstellung um.|Ergänzt die Icons zum Auf\- und Zuklappen und die Leiste zum Verstellen der Breite.|Der Inhalt des Bereichs: Modulname, Suchfeld und Menübaum. Siehe  [Navigation Panel]()  \- das Navigation Panel ist ein Muster, keine Komponente.|
|<strong>Content Area</strong> |Stellt den Bereich bereit und verschiebt bzw. staucht ihn passend zum Navigation Panel.|Keine Ergänzung.|Alle Anwendungsinhalte.|

 <strong>Eigenständige Nutzung und Abhängigkeiten</strong> 

|<strong>Bereich</strong>|<strong>Optional</strong>|<strong>Eigenständig nutzbar</strong>|
|-|-|-|
|<strong>Global Header</strong> |Ja. Ohne Inhalt im Bereich "navbar" entfällt der Global Header.|Nein. Nur als Bereich des App Layouts verwendbar.|
|<strong>Application Bar</strong> |Ja. Sie wird nur bei Anwendungen mit mehreren Modulen eingesetzt.|Nein. Nur als Bereich des App Layouts verwendbar.|
|<strong>Navigation Panel</strong> |Ja. Ohne Inhalt im Bereich "drawer" entfällt das Navigation Panel.|Nein. Als Muster nur im App Layout sinnvoll. Sein Menüteil, die  [Side Nav]() , ist dagegen eine eigenständige Komponente.|
|<strong>Content Area</strong> |Nein.|Nein.|

<!-- block info --><mark>Info für Dev<!-- block title -->Das App Layout erkennt selbst, ob im Bereich "application-bar" Inhalt vorhanden ist, und stellt die Bedienung des Navigation Panels darauf um. Es ist also nicht nötig, dies zusätzlich zu konfigurieren.<br><br>Die Beschriftungen der Icons zum Auf\- und Zuklappen für Screenreader werden nicht automatisch gesetzt. Sie müssen über die Internationalisierung des Mate App Layout Addons befüllt werden.<br><br>Vaadin bietet für das App Layout darüber hinaus einen zweiten, für Touch\-Geräte optimierten Navigationsbereich am unteren Bildschirmrand sowie die Möglichkeit, den Bereich "navbar" neben statt über dem Bereich "drawer" anzuordnen. Beides wird vom Mate App Layout Addon nicht verwendet; im Design System sind dafür keine Muster definiert.</mark><!-- end block -->

### Verhalten

 <strong>Auf\- und Zuklappen des Navigation Panels</strong> 

Wo das Navigation Panel auf\- und zugeklappt wird, hängt davon ab, ob eine  [Application Bar]()  vorhanden ist:

* <strong>Mit Application Bar:</strong>  Im geöffneten Navigation Panel befindet sich unten ein Icon zum Zuklappen. Ist das Panel zugeklappt, erscheint das Icon zum Aufklappen unten am rechten Rand der Application Bar. Das Icon im Global Header wird nicht angezeigt.
* <strong>Ohne Application Bar:</strong>  Das Navigation Panel wird über das Icon im  [Global Header]()  ein\- und ausgeblendet. Es wechselt dabei zwischen dem Hamburger\- und dem Schließen\-Symbol. Die Icons im Panel selbst werden nicht angezeigt.

 <strong>Breite des Navigation Panels</strong> 

Zwischen Navigation Panel und Inhaltsbereich liegt eine Leiste, mit der die Breite des Panels durch Ziehen mit der Maus verstellt werden kann. Die Leiste wird nur angezeigt, solange das Navigation Panel geöffnet ist. Während des Ziehens wird sie farblich hervorgehoben.

Die eingestellte Breite wird nicht dauerhaft gespeichert. Sie gilt nur für die aktuelle Ansicht.

### States

 <strong>Navigation Panel geöffnet</strong> 

Das Navigation Panel liegt links neben dem Inhaltsbereich und verschiebt diesen nach rechts. Die Leiste zum Verstellen der Breite ist sichtbar.

 <strong>Navigation Panel zugeklappt</strong> 

Der Inhaltsbereich nimmt die gesamte Breite ein. Ist eine Application Bar vorhanden, bleibt diese sichtbar.

 <strong>Überlagernde Darstellung</strong> 

Auf kleinen Bildschirmen legt sich das Navigation Panel über den Inhaltsbereich und wird mit einem Schatten sowie einer Abdunklung des Hintergrunds dargestellt.

### Responsives Verhalten

Auf kleineren Bildschirmen (z.B. Tablet\-Größe) wechselt das Navigation Panel in eine überlagernde Darstellung: Es wird nur temporär eingeblendet und legt sich über den Inhaltsbereich, statt ihn zu verschieben. Die Leiste zum Verstellen der Breite bleibt dabei verfügbar, solange das Panel geöffnet ist.

Die Umschaltung nimmt das App Layout anhand der verfügbaren Breite selbst vor; sie muss von der Anwendung nicht ausgelöst werden. Ein konkreter Umschaltpunkt ist im Design System nicht festgelegt.

Das responsive Verhalten des Global Headers ist beim  [Global Header]()  beschrieben.

### Barrierefreiheit

 <strong>Tastaturbedienung</strong> 

Die Bereiche des App Layouts werden in ihrer Reihenfolge über die Tabulatortaste ("Tab") und Hochstell\- und Tabulatortaste ("Shift" \+ "Tab") erreicht. Die Icons zum Auf\- und Zuklappen des Navigation Panels sind fokussierbar und können mit Eingabetaste ("Enter") oder Leerzeichentaste ("Space") ausgelöst werden.

Die Leiste zum Verstellen der Breite des Navigation Panels ist nur mit der Maus bedienbar. Eine Bedienung über die Tastatur ist im Design System dafür aktuell nicht vorgesehen.

Über eine Fokusfalle in der überlagernden Darstellung und über das Zuklappen des Navigation Panels mit der Escape\-Taste liegen im Design System keine gesicherten Informationen vor.

## Gründe für das Design

### Argumente

Warum sind Global Header, Application Bar und Navigation Panel keine eigenständigen Komponenten, sondern Bereiche des App Layouts?

|<strong>Argumente für die Lösung</strong>|
|-|
|<br>* Die Bereiche sind voneinander abhängig. Ob eine Application Bar vorhanden ist, bestimmt die Position des Bedienelements für das Navigation Panel und die Breite des Panels. Diese Abhängigkeiten lassen sich nur an einer Stelle konsistent auflösen.<br>* Die Anwendungen unterscheiden sich stark in dem, was in diesen Bereichen steht \- Anzahl der Icon\-Tasten, Modulstruktur, Menübaum. Vorgegeben wird deshalb die Position, nicht der Inhalt.<br>* Eine Anwendung hat genau ein App Layout. Eigenständige Komponenten für Bereiche, die nur einmal und nur an einer festen Position vorkommen, hätten keinen zusätzlichen Nutzen.|





<!--examples:/components/app-layout-->