Make TabBar Vertical

VerticalTabBar.qml

+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.3
+
+TabBar{
+    id:control
+    contentItem: ListView{        
+        model: control.contentModel
+        currentIndex: control.currentIndex        
+
+        spacing: control.spacing
+        orientation: ListView.Vertical
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+
+        highlightMoveDuration: 250
+        highlightResizeDuration: 0
+        highlightFollowsCurrentItem: true
+
+        highlight: Item{
+            Rectangle{
+                anchors.left: parent.left;
+                anchors.top: parent.top;
+                anchors.bottom: parent.bottom;
+                width: 3
+                color: Material.accent
+            }
+        }
+    }
+    background: Rectangle {
+        color: Qt.darker(control.Material.backgroundColor,1.02)
+    }
+}

VerticalTabButton.qml

+import QtQuick 2.11
+import QtQuick.Controls 2.4
+
+TabButton {
+    topPadding: 6
+    bottomPadding: 6
+    width: parent.width
+}

main.qml

@@ -12,98 +12,112 @@ ApplicationWindow {
 
 
 
-    header:TabBar {
+    Item{
+        anchors.fill: parent
+        VerticalTabBar{
 
-        id: tabBar
-        currentIndex: swipeView.currentIndex
+            id: tabBar
+            currentIndex: swipeView.currentIndex
 
+            height: parent.height
+            width: 150
+            x:0
+            y:0
+            z: 2
 
-        TabButton {
-            text: qsTr("Devices")
-            enabled: UserManagment.currentUser.havePermission(Permission.DEVICE_TAB);
-        }
-        TabButton {
-            text: qsTr("Device\nPrototypes")
-            enabled: UserManagment.currentUser.havePermission(Permission.DEVICE_PROTOTYPE_TAB);
-        }
-        TabButton {
-            text: qsTr("Program\nPrototypes")
-            enabled: UserManagment.currentUser.havePermission(Permission.PROGRAMM_PROTOTYPE_TAY);
-        }
-        TabButton {
-            text: qsTr("Programs")
-            enabled: UserManagment.currentUser.havePermission(Permission.PROGRAMM_TAB);
-        }
-        TabButton {
-            text: qsTr("Control Pane")
-        }
-        TabButton {
-            text: qsTr("Map View")
-        }
-        TabButton {
-            text: qsTr("Login")
-            Component.onCompleted: tabBar.currentIndex = 6
-        }
-        TabButton {
-            text: qsTr("Settings")
-            enabled: UserManagment.currentUser.havePermission(Permission.SETTINGS_TAB);
-        }
-        TabButton {
-            text: qsTr("Modules")
-        }
-        TabButton {
-            text: qsTr("Module\nPrograms")
-        }
-        TabButton {
-            text: qsTr("Graph")
-        }
-        TabButton {
-            text: qsTr("Oscillogram")
-        }
-        TabButton {
-            text: qsTr("Colorplot")
+            VerticalTabButton {
+                text: qsTr("Devices")
+                enabled: UserManagment.currentUser.havePermission(Permission.DEVICE_TAB);
+            }
+            VerticalTabButton {
+                text: qsTr("Device\nPrototypes")
+                enabled: UserManagment.currentUser.havePermission(Permission.DEVICE_PROTOTYPE_TAB);
+            }
+            VerticalTabButton {
+                text: qsTr("Program\nPrototypes")
+                enabled: UserManagment.currentUser.havePermission(Permission.PROGRAMM_PROTOTYPE_TAY);
+            }
+            VerticalTabButton {
+                text: qsTr("Programs")
+                enabled: UserManagment.currentUser.havePermission(Permission.PROGRAMM_TAB);
+            }
+            VerticalTabButton {
+                text: qsTr("Control Pane")
+            }
+            VerticalTabButton {
+                text: qsTr("Map View")
+            }
+            VerticalTabButton {
+                text: qsTr("Login")
+                Component.onCompleted: tabBar.currentIndex = 6
+            }
+            VerticalTabButton {
+                text: qsTr("Settings")
+                enabled: UserManagment.currentUser.havePermission(Permission.SETTINGS_TAB);
+            }
+            VerticalTabButton {
+                text: qsTr("Modules")
+            }
+            VerticalTabButton {
+                text: qsTr("Module\nPrograms")
+            }
+            VerticalTabButton {
+                text: qsTr("Graph")
+            }
+            VerticalTabButton {
+                text: qsTr("Oscillogram")
+            }
+            VerticalTabButton {
+                text: qsTr("Colorplot")
+            }
         }
-    }
 
-    SwipeView {
-        interactive: false
-        clip:true
-        id: swipeView
-        anchors.fill: parent
-        currentIndex: tabBar.currentIndex        
-        DeviceView{}
+        SwipeView {
 
-        DevicePrototypeView{}
+            interactive: false
+            //clip:true
+            id: swipeView
 
-        ProgrammPrototypeView{}
+            height: parent.height
+            width: parent.width - tabBar.width
+            x:tabBar.width
+            y:0
+            currentIndex: tabBar.currentIndex
+            orientation: "Vertical"
+            DeviceView{}
 
-        ProgrammView{}
+            DevicePrototypeView{}
 
-        ControlView{
-            id:controlPane
-        }
+            ProgrammPrototypeView{}
 
-        Item{
-            clip: true
-            MapView{
-                anchors.fill: parent
+            ProgrammView{}
+
+            ControlView{
+                id:controlPane
             }
-        }
-        LoginView{}
 
-        SettingsView{}
+            Item{
+                clip: true
+                MapView{
+                    anchors.fill: parent
+                }
+            }
+            LoginView{}
 
-        ModuleView{}
+            SettingsView{}
 
-        ModuleProgramView{}
+            ModuleView{}
 
-        Graph{
-        }
+            ModuleProgramView{}
 
-        Oscillogram{
-        }
+            Graph{
+            }
+
+            Oscillogram{
+            }
 
-        Colorplot{}
+            Colorplot{}
+        }
     }
 
     MessageDialog{

qml.qrc

@@ -48,5 +48,7 @@
         <file>ModuleProgramView.qml</file>
         <file>ProgramBlockEntry.qml</file>
         <file>ProgramBlockConnection.qml</file>
+        <file>VerticalTabBar.qml</file>
+        <file>VerticalTabButton.qml</file>
     </qresource>
 </RCC>