Mobile navigation button
Old mobile navigation structure
In the old structure, all apps had one or two buttons that were hidden on desktop browsers but visible on mobile. These provided back navigation or folder-level navigation options. A structure like the following appeared as the last set of children of div.application-body in most apps:
<!-- Next link should be populated with the link back to the parent. Used for small screen and accessibilty -->
<a
class="
pat-forward
button-navigation-back
icon-left-open"
id="back-to-parent"
href="#button-folder-up"
data-pat-forward="selector: #button-folder-up">Back</a>
<button
class="
pat-switch
button-navigation-back
icon-left-open"
id="back-to-sidebar"
data-pat-switch="#application-body focus-* focus-sidebar">Vorige</button>
The above code is now obsolete and has been removed from all application bodies.
New mobile navigation structure
In the current prototype, there is a completely static set of four elements, wrapped in a <quaive-mobile-navigation> tag and placed inside the global header div, where it is also rendered. The structure is as follows:
<quaive-mobile-navigation>
<a
href="/apps/"
id="back-to-overview"
class="
pat-inject
pat-switch
button-navigation-back"
data-pat-inject="
history: record;
source: #portal-content;
target: #portal-content;"
data-pat-switch="
selector: #app-space;
remove: state-*;
add: state-off"><!-- <pat-i18n handle="label_apps" source="quaive" lang="en" >-->Apps<!-- </pat-i18n> --></a>
<button
id="back-to-sidebar"
type="button"
class="pat-switch button-navigation-back"
data-pat-switch="
selector: .application-body.state-on;
remove: focus-document;
add: focus-sidebar"><!-- <pat-i18n handle="label_back" source="quaive" lang="en" >-->Back<!-- </pat-i18n> --></button>
<button
type="button"
id="level-up-apps"
class="pat-forward button-navigation-back"
data-pat-forward="
selector: .application-body.state-on .pat-toolbar .ueber-back-button;"><!-- <pat-i18n handle="label_back" source="quaive" lang="en" >-->Back<!-- </pat-i18n> --></button>
<button
type="button"
id="level-up-portal"
class="pat-forward button-navigation-back"
data-pat-forward="
selector: #portal .pat-toolbar .ueber-back-button;"><!-- <pat-i18n handle="label_back" source="quaive" lang="en" >-->Back<!-- </pat-i18n> --></button>
</quaive-mobile-navigation>
