Add basic Monitor layout

qml/Components/Monitors.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: monitors
+    state:"inactive"
+
+    property string activeMonitorName: ""
+
+    Component.onCompleted: {
+
+        var a = monitorList.get();
+        print(a[0]);
+
+    }
+
+    Rectangle {
+        id:blurParent
+        color: "#80ffffff"
+        anchors.fill: parent
+    }
+
+
+    Rectangle {
+        width: 800
+        height: 600
+
+        anchors.centerIn: parent
+    }
+
+
+    FastBlur {
+        id:blur
+        anchors.fill: monitors
+        source: blurParent
+        radius: 64
+    }
+
+    states: [
+        State {
+            name: "active"
+
+            PropertyChanges {
+                target: monitors
+                visible: true
+            }
+
+            PropertyChanges {
+                target: blur
+                opacity: 1
+            }
+        },
+        State {
+            name: "inactive"
+            PropertyChanges {
+                target: monitors
+                visible: false
+            }
+
+            PropertyChanges {
+                target: blur
+                opacity: 0
+            }
+        }
+    ]
+
+}

qml/Components/Navigation.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.0
-import QtQuick.Controls 2.2
+import QtQuick.Controls 2.0
+
 
 Rectangle {
     id:navigation
@@ -8,6 +9,7 @@ Rectangle {
     width: 1366
 
     signal changeTab(string name)
+    signal toggleMonitors()
 
     function onTabChanged(name){
          navigation.changeTab(name);
@@ -64,5 +66,56 @@ Rectangle {
         }
     }
 
+    Item {
+        id: monitorSelection
+        width: 321
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+
+        MouseArea {
+            id: mouseArea
+            anchors.fill: parent
+            onClicked: {
+                toggleMonitors()
+            }
+
+        }
+
+
+        Image {
+            id: image
+            width: 24
+            height: 24
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 20
+            sourceSize.height: 24
+            sourceSize.width: 24
+            source: "qrc:/assets/icons/icon_monitor.svg"
+        }
+
+        Text {
+            id: activeMonitorName
+            text: qsTr("Monitor Name")
+            anchors.right: image.right
+            anchors.rightMargin: 20 + image.width
+            horizontalAlignment: Text.AlignRight
+            color: "#626262"
+            anchors.verticalCenter: parent.verticalCenter
+            font.pixelSize: 16
+            font.family: font_Roboto_Regular.name
+
+            FontLoader{
+                id: font_Roboto_Regular
+                source: "qrc:/assets/fonts/Roboto-Regular.ttf"
+            }
+        }
+
+    }
+
 
 }

qml/main.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.6
 import QtQuick.Window 2.2
-import QtCanvas3D 1.1
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.3
 
@@ -10,7 +9,7 @@ Window {
     id: window
     color: "#eeeeee"
     visible: true
-    width: 1366
+    width: 1380
     height: 768
 
     Loader {
@@ -68,5 +67,18 @@ Window {
             pageLoader.setSource("qrc:/qml/Components/"+name+".qml")
             sidebar.state = "inactive"
         }
+
+        onToggleMonitors: {
+            monitors.state = monitors.state == "active" ? "inactive" : "active"
+        }
     }
+
+    Monitors {
+        id: monitors
+        state: "inactive"
+        anchors.fill: pageLoader
+        z:98
+    }
+
+
 }