Use common StackView

TeroStyle/BarButton.qml

@@ -6,6 +6,8 @@ import QtQuick.Templates as T
 T.ToolButton {
     id: control
 
+    property string target
+
     checkable: true
     icon.color: Colors.foreground
     icon.height: 36
@@ -18,16 +20,16 @@ T.ToolButton {
         readonly property color color: control.checked ? Colors.primaryShade : control.hovered ? Colors.primary : Colors.foreground
 
         IconLabel {
-            icon.color: parent.color
-            icon.source: control.icon.source
-            icon.height: control.icon.height
-            icon.width: control.icon.width
             color: parent.color
+            icon.color: parent.color
+            icon.height: control.icon.height
+            icon.source: control.icon.source
+            icon.width: control.icon.width
             x: parent.width * .5 - width * .5
         }
         Label {
-            font: Typography.small
             color: parent.color
+            font: Typography.small
             text: control.text
             x: parent.width * .5 - width * .5
         }
@@ -49,4 +51,12 @@ T.ToolButton {
 
         onPressed: mouse => mouse.accepted = false
     }
+
+    onClicked: {
+        if(!target) {
+            console.warn(`BarButton with text ${this.text} has no target.`)
+            return
+        }
+        contentStack.replace(target)
+    }
 }

TeroStyle/H1.qml

@@ -0,0 +1,5 @@
+import QtQuick
+
+Text {
+    font: Typography.h1
+}

TeroStyle/H2.qml

@@ -0,0 +1,5 @@
+import QtQuick
+
+Text {
+    font: Typography.h2
+}

TeroStyle/qmldir

@@ -2,14 +2,13 @@ module TeroStyle
 singleton Colors Colors.qml
 singleton Dimensions Dimensions.qml
 singleton Typography Typography.qml
+BarButton BarButton.qml
 Button Button.qml
 ComboBox ComboBox.qml
 Field Field.qml
-TextField TextField.qml
-BarButton BarButton.qml
+H1 H1.qml
+H2 H2.qml
 Label Label.qml
 QuickFilter QuickFilter.qml
 SearchBar SearchBar.qml
-
-
-
+TextField TextField.qml