Funktionen

Die Globale Toolbar ist mehr als eine reine Button-Leiste. Sie reagiert auf deinen Kontext, animiert Wechsel und merkt sich deine bevorzugten Einstellungen.

Kontextsensitive Buttons

Sobald du auf eine andere Route wechselst, prüft die Toolbar, welche Buttons jetzt sinnvoll sind, und tauscht sie aus.

Aktion	Was passiert
Du öffnest Forum	Forum-Einstellungen und Kategorien-Button erscheinen
Du öffnest Feed	Feed-Einstellungen und Vorlagen-Button erscheinen
Du öffnest Shop	Produkte, Kategorien, Versand etc. werden eingeblendet
Du verlässt das Modul	Modul-Buttons werden ausgeblendet, globale Buttons bleiben

Die globalen Buttons (Theme-Toggle, Hilfe, Edit Mode, App Builder Tools, Web-Bridge) sind immer dabei und werden durch eine vertikale Trennlinie von den modul-spezifischen Buttons abgesetzt.

Animierte Übergänge

Beim Wechsel zwischen Routen werden Buttons nicht hart ausgetauscht, sondern animiert:

Neue Buttons erscheinen mit einem Fade-In + Scale-Effekt (300 ms, ease-out-back)
Die Toolbar-Breite passt sich animiert an die neue Anzahl Buttons an (300 ms)
Das Erscheinen der Toolbar selbst ist ein sanftes Fade-In

Das wirkt nicht nur edler — es hilft dir auch, neue Buttons zu erkennen, statt sie zu übersehen.

Horizontales Scrollen

Wenn du viele Module aktiv hast und auf einer Seite mit vielen Aktionen bist, kann es passieren, dass nicht alle Buttons gleichzeitig in die Toolbar passen.

In diesem Fall wird die Button-Liste horizontal scrollbar:

An den Kanten erscheinen weiche Verlaufs-Indikatoren mit Pfeil-Symbol
Du wischst horizontal über die Buttons, um durch sie zu navigieren
Die Toolbar selbst bleibt zentriert — nur der innere Bereich scrollt

Badges für Notifications

Buttons können einen kleinen Zähler-Badge anzeigen, z. B. für offene Meldungen im Admin-Bereich. Bei Werten über 99 wird 99+ angezeigt, damit der Badge nicht überläuft.

Wenn die Toolbar angedockt ist (siehe Andocken) und einer der versteckten Buttons einen Badge hat, zeigt der Indikator an der Kante einen kleinen Notification-Dot — so siehst du auf einen Blick, dass etwas Aufmerksamkeit braucht.

Vertikales Verschieben (Drag)

Du kannst die Toolbar vertikal an die Position deiner Wahl ziehen:

Drücke und halte die Toolbar an einer beliebigen Stelle
Während des Drags erscheint ein Drag-Indikator (Punkt-Icon)
Ziehe sie nach oben oder unten
Beim Loslassen wird die neue Position automatisch gespeichert

Die Toolbar respektiert dabei zwei Grenzen:

Mindestabstand vom unteren Rand: 16 px (über der Safe Area)
Maximale Höhe: Bildschirmhöhe minus 200 px

So kannst du sie nicht aus dem sichtbaren Bereich schieben.

Horizontales Wischen → Andocken

Wische die Toolbar zur linken oder rechten Bildschirmkante, um sie an die Seite anzudocken — sie verwandelt sich in einen kleinen Indikator und gibt den Bildschirm frei. Details dazu im Kapitel Position & Andocken.

Integrierte Suche

Links in der Toolbar findest du eine kompakte Lupe. Tippe darauf, um das Suchfeld zu expandieren und alle Module, Seiten und Einstellungen blitzschnell zu finden.

Mehr dazu in Suche.

Edit Mode Toggle Wichtig

Der Stift-Button schaltet den Edit Mode der App um:

Edit Mode an: Du siehst Bearbeitungs-Hinweise, kannst Widgets editieren, Seiten umstellen etc.
Edit Mode aus: Die App verhält sich wie für deine Endnutzer

Der Edit-Mode-Button ist nur sichtbar, wenn der Edit Mode für die App global verfügbar ist (in der Konfiguration aktiviert). Andernfalls wird er ausgeblendet, um Verwechslungen zu vermeiden.

Theme-Toggle

Der erste Button von links ist der Dark/Light Mode Toggle. Er hat die höchste Priorität und steht damit immer ganz außen. Sein Icon wechselt dynamisch:

Sonne: Du bist im Dark Mode → Tap wechselt in den Light Mode
Mond: Du bist im Light Mode → Tap wechselt in den Dark Mode

So testest du blitzschnell, wie deine App in beiden Modi aussieht.

App Builder Tools öffnen

Der Werkzeug-Button öffnet das App Builder Tools Dashboard — die zentrale Schaltstelle für Theme Suite, Seiten-Builder, Formular-Builder und Module.

Tippe ihn erneut an, um das Dashboard wieder zu schließen (Toggle-Verhalten).

Hilfe-Button

Der Fragezeichen-Button öffnet die kontextbezogene Hilfe für die aktuelle Seite. Du landest direkt im richtigen Doku-Kapitel — z. B. dieser Seite, wenn du beim Lesen der Toolbar-Doku wärst.

Web-Bridge (QR-Code-Scanner)

Wenn mindestens ein web-fähiges Modul aktiviert ist, erscheint zusätzlich ein QR-Code-Scanner-Button. Damit verbindest du den App Builder mit der Web-Bridge, um Inhalte vom Browser aus zu pflegen.

Ist kein web-fähiges Modul aktiv, wird der Button automatisch versteckt — ein Pairing ohne Ziel-Modul wäre eine Sackgasse.