Styles was added

qml/Components/MenuBackButton.qml

@@ -0,0 +1,84 @@
+import QtQuick 2.15
+
+Item {
+    id: root
+
+    width: 40
+    height: 40
+
+    property double iconMarigns: 8
+    property double iconHeight: width - iconMarigns * 2
+    signal clicked()
+    signal back()
+
+    SystemPalette {
+        id: palette
+    }
+
+    MouseArea {
+        id: ma
+
+        anchors.fill: parent
+    }
+
+    Rectangle {
+        id: bar1
+        x: root.iconMarigns
+        y: root.iconMarigns + root.iconHeight / 6
+        width: root.iconHeight
+        height: root.iconHeight / 9
+        antialiasing: true
+
+        color: palette.button
+    }
+
+    Rectangle {
+        id: bar2
+        x: root.iconMarigns
+        y: root.iconMarigns + root.iconHeight / 2 - height / 2
+        width: root.iconHeight
+        height: root.iconHeight / 9
+        antialiasing: true
+
+        color: palette.button
+    }
+
+    Rectangle {
+        id: bar3
+        x: root.iconMarigns
+        y: root.iconMarigns + root.iconHeight / 2 + height * 2
+        width: root.iconHeight
+        height: root.iconHeight / 9
+        antialiasing: true
+
+        color: palette.button
+    }
+
+    property int animationDuration: 450
+
+    state: "menu"
+    states: [
+        State {
+            name: "menu"
+            PropertyChanges { target: ma; onClicked: root.clicked() }
+        },
+
+        State {
+            name: "back"
+            PropertyChanges { target: root; rotation: 180 }
+            PropertyChanges { target: bar1; rotation: 45; width: root.iconHeight / 3 * 2; x: root.iconMarigns + root.iconHeight / 2; y: root.iconMarigns + root.iconHeight / 4 }
+            PropertyChanges { target: bar2; width: root.iconHeight / 6 * 5 + 1; x: root.iconMarigns + root.iconHeight / 9 }
+            PropertyChanges { target: bar3; rotation: -45; width: root.iconHeight / 3 * 2; x: root.iconMarigns + root.iconHeight / 2; y: root.iconMarigns + root.iconHeight / 3 * 2 }
+            PropertyChanges { target: ma; onClicked: root.back() }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            RotationAnimation { target: root; direction: RotationAnimation.Clockwise; duration: animationDuration; easing.type: Easing.InOutQuad }
+            PropertyAnimation { target: bar1; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
+            PropertyAnimation { target: bar2; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
+            PropertyAnimation { target: bar3; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
+        }
+    ]
+}

qml/main.qml

@@ -0,0 +1,94 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtWebSockets
+
+import ru.ded.beerlog 1.0
+import "Components"
+
+ApplicationWindow {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Beer Log")
+
+    header: ToolBar {
+        RowLayout {
+            anchors.fill: parent
+            MenuBackButton {
+                state: "menu"//stackView.depth > 1 ? "back" : "menu"
+                onClicked: drawer.open()
+                onBack: {
+                    state = "menu"
+                }
+            }
+            ToolButton {
+                text: usersModel.selectedUserName
+                Layout.fillWidth: true
+                onClicked: usersMenu.open()
+            }
+        }
+
+        Menu {
+            id: usersMenu
+
+            UsersViewModel {
+                id: usersModel
+            }
+
+            Repeater {
+                model: usersModel.users
+
+                MenuItem {
+                    text: modelData.name
+
+                    onClicked: {
+                        usersModel.selectedUser = modelData.id
+                    }
+                }
+            }
+        }
+    }
+
+    Drawer {
+        id: drawer
+
+        width: parent.width * 0.66
+        height: parent.height
+
+        Column {
+            anchors.fill: parent
+
+            Row {
+                width: parent.width
+                height: 100
+
+                Image {
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.margins: 10
+                    source: "logo.png"
+                }
+
+                Label {
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pointSize: 20
+                    text: qsTr("BeerLog v0.1")
+                }
+            }
+
+            ItemDelegate {
+                text: qsTr("Settings")
+                width: parent.width
+                onClicked: stackView.openPage("SettingsForm.qml")
+            }
+
+            ItemDelegate {
+                text: qsTr("Quit")
+                width: parent.width
+                onClicked: Qt.quit()
+            }
+        }
+    }
+}

qml/qml.qrc

@@ -0,0 +1,9 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>Components/MenuBackButton.qml</file>
+        <file>qtquickcontrols2.conf</file>
+        <file>logo.png</file>
+        <file>beerlog_ru_RU.qm</file>
+    </qresource>
+</RCC>

qml/qtquickcontrols2.conf

@@ -0,0 +1,13 @@
+; This file can be edited to change the style of the application
+; Read "Qt Quick Controls 2 Configuration File" for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
+
+[Controls]
+Style=Material
+
+[Material]
+Theme=Dark
+Primary=BlueGrey
+Accent=Grey
+;Foreground=Brown
+;Background=Steel