enh: implement a drawer menu

ui/main.qml

@@ -82,14 +82,13 @@ Rectangle {
         id: stackLayout
         anchors.left: parent.left
         anchors.right: parent.right
-        anchors.bottom: navFooter.top
         anchors.bottomMargin: 10
         anchors.top: qdsicon1.bottom
+        anchors.bottom: root.bottom
         anchors.rightMargin: 20
         anchors.leftMargin: 20
         anchors.topMargin: 10
 
-
         HomePage {
             id: homePage
             Layout.fillWidth: true
@@ -120,128 +119,8 @@ Rectangle {
             id: headerPage
             Layout.fillWidth: true
         }
-
     }
 
-    Item {
-        id: navFooter
-        y: 703
-        height: 97
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        anchors.rightMargin: 0
-        anchors.leftMargin: 0
-        anchors.bottomMargin: 0
-        Layout.fillHeight: true
-        Layout.fillWidth: true
-
-        Rectangle {
-            id: rectangle
-            color: "#cecece"
-            anchors.fill: parent
-
-            RowLayout {
-                id: row
-                anchors.fill: parent
-                anchors.bottomMargin: 31
-                anchors.rightMargin: 10
-                anchors.leftMargin: 10
-                spacing: 5
-
-                TabButton {
-                    id: home
-                    text: qsTr("Home")
-                    Layout.fillWidth: true
-                    checked: true
-                    checkable: true
-                    autoExclusive: true
-
-                    Connections {
-                        target: home
-                        function onClicked(){
-                            stackLayout.currentIndex = 0
-                        }
-                    }
-                }
-
-                TabButton {
-                    id: examples
-                    text: qsTr("Examples")
-                    Layout.fillWidth: true
-                    checkable: true
-                    autoExclusive: true
-
-                    Connections {
-                        target: examples
-                        function onClicked(){
-                            stackLayout.currentIndex = 1
-                        }
-                    }
-                }
-
-                TabButton {
-                    id: logs
-                    text: qsTr("Logs")
-                    Layout.fillWidth: true
-                    checkable: true
-                    autoExclusive: true
-                    Connections {
-                        target: logs
-                        function onClicked(){
-                            stackLayout.currentIndex = 2
-                        }
-                    }
-                }
-
-                TabButton {
-                    id: network
-                    text: qsTr("Network")
-                    Layout.fillWidth: true
-                    checkable: true
-                    autoExclusive: true
-                    visible: true;
-
-                    Connections {
-                        target: network
-                        function onClicked(){
-                            stackLayout.currentIndex = 3
-                        }
-                    }
-                }
-
-                TabButton {
-                    id: settings
-                    text: qsTr("Settings")
-                    Layout.fillWidth: true
-                    checkable: true
-                    autoExclusive: true
-
-                    Connections {
-                        target: settings
-                        function onClicked(){
-                            stackLayout.currentIndex = 4
-                        }
-                    }
-                }
-
-                TabButton {
-                    id: about
-                    text: qsTr("About")
-                    Layout.fillWidth: true
-                    checkable: true
-                    autoExclusive: true
-
-                    Connections {
-                        target: about
-                        function onClicked(){
-                            stackLayout.currentIndex = 5
-                        }
-                    }
-                }
-            }
-        }
-    }
     states: [
         State {
             name: "vertical"
@@ -271,8 +150,129 @@ Rectangle {
     ]
 
 
+     Drawer {
+        id: drawer
+        width: 150
+        height: root.height
 
+        ColumnLayout {
+            id: column
+            anchors.fill: parent
+            anchors.bottomMargin: 31
+            anchors.rightMargin: 10
+            anchors.leftMargin: 10
+            spacing: 5
+
+            Image {
+                id: qdsicon2
+                source: "content/images/appicon.png"
+                sourceSize.width: drawer.width / 2
+                anchors.horizontalCenter: parent.horizontalCenter
+            }
 
+            TabButton {
+                id: home
+                text: qsTr("Home")
+                Layout.fillWidth: true
+                checked: true
+                checkable: true
+                autoExclusive: true
+
+                Connections {
+                    target: home
+                    function onClicked(){
+                        stackLayout.currentIndex = 0
+                    }
+                }
+            }
 
+            TabButton {
+                id: examples
+                text: qsTr("Examples")
+                Layout.fillWidth: true
+                checkable: true
+                autoExclusive: true
+
+                Connections {
+                    target: examples
+                    function onClicked(){
+                        stackLayout.currentIndex = 1
+                    }
+                }
+            }
+
+            TabButton {
+                id: logs
+                text: qsTr("Logs")
+                Layout.fillWidth: true
+                checkable: true
+                autoExclusive: true
+                Connections {
+                    target: logs
+                    function onClicked(){
+                        stackLayout.currentIndex = 2
+                    }
+                }
+            }
+
+            TabButton {
+                id: network
+                text: qsTr("Network")
+                Layout.fillWidth: true
+                checkable: true
+                autoExclusive: true
+                visible: true;
+
+                Connections {
+                    target: network
+                    function onClicked(){
+                        stackLayout.currentIndex = 3
+                    }
+                }
+            }
+
+            TabButton {
+                id: settings
+                text: qsTr("Settings")
+                Layout.fillWidth: true
+                checkable: true
+                autoExclusive: true
+
+                Connections {
+                    target: settings
+                    function onClicked(){
+                        stackLayout.currentIndex = 4
+                    }
+                }
+            }
+
+            TabButton {
+                id: about
+                text: qsTr("About")
+                Layout.fillWidth: true
+                checkable: true
+                autoExclusive: true
+
+                Connections {
+                    target: about
+                    function onClicked(){
+                        stackLayout.currentIndex = 5
+                    }
+                }
+            }
+        }
+     }
 
+    Button {
+        id: menuButon
+        x: 8
+        y: 8
+        text: qsTr("Menu")
+        Connections {
+            target: menuButon
+            function onClicked(){
+                drawer.open();
+            }
+        }
+    }
 }