Animate Sidebar ContentView focus switch

layouts/components/ContentView.qml

@@ -4,11 +4,13 @@ import QtQuick.Controls 1.4
 import Ikinuki.Client 1.0
 
 TabView {
+    id: tabView
     property var providers
     property bool viewSelected: false
+    state: viewSelected ? "selected" : "deselected"
     property int xSelect: 0
     property int ySelect: 0
-    width: parent.width * 0.8
+    width: viewSelected ? parent.width * 0.95 : parent.width * 0.8
     height: parent.height
 
     property var maxElements: providers.length
@@ -45,6 +47,32 @@ TabView {
             }
         }
     }
+    states: [
+        State {
+            name: "deselected"
+            PropertyChanges {
+                target: tabView
+                width: parent.width * 0.8
+            }
+        },
+        State {
+            name: "selected"
+            PropertyChanges {
+                target: tabView
+                width: parent.width * 0.95
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumberAnimation {
+                properties: "width"
+                duration: 150
+                easing.type: Easing.Linear
+            }
+        }
+    ]
+
     Keys.onPressed: (event)=> {
         console.log(Qt.Key_Left);
         if (event.key == Qt.Key_Left) {

layouts/components/Sidebar.qml

@@ -5,11 +5,13 @@ import Ikinuki.Client 1.0
 Rectangle {
     id: rect
     property var providers
+    property bool maximized: true
     property int selectedElement: 0
     property var max_elements: providers.length
     width: parent.width * 0.2
     height: parent.height
     color: "#22282A"
+    state: maximized ? "maximized" : "minimized"
     //color: "#0a3d4a"
     Column {
         anchors.fill: parent
@@ -19,10 +21,36 @@ Rectangle {
             model: providers
             SidebarElement {
                 provider: modelData
+                maximized: rect.maximized
                 selected: (index == selectedElement) ? true : false
             }
         }
     }
+    states: [
+        State {
+            name: "minimized"
+            PropertyChanges {
+                target: rect
+                width: parent.width * 0.05
+            }
+        },
+        State {
+            name: "maximized"
+            PropertyChanges {
+                target: rect
+                width: parent.width * 0.2
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumberAnimation {
+                properties: "width"
+                duration: 150
+                easing.type: Easing.Linear
+            }
+        }
+    ]
     function mod(n, m) {
         return ((n % m) + m) % m;
     }

layouts/components/SidebarElement.qml

@@ -4,6 +4,7 @@ import QtGraphicalEffects 1.12
 Item {
     property var provider
     property bool selected: false
+    property bool maximized
 
     width: parent.width * 0.9
     height: parent.height * 0.07
@@ -16,7 +17,7 @@ Item {
         color: "black"
         opacity: 0.5
         source: selector
-        visible: selected ? true : false
+        visible: selected && maximized
     }
     Rectangle {
         id: selector
@@ -24,7 +25,7 @@ Item {
         height: parent.height
         width: parent.width * 0.95
         //anchors.fill: parent
-        visible: selected ? true : false
+        visible: selected && maximized
         radius: 10
     }
     Row {
@@ -64,6 +65,7 @@ Item {
             color: selected ? "#3c3c3c" : "#99afb4"
             anchors.verticalCenter: parent.verticalCenter
             anchors.verticalCenterOffset: 4
+            visible: maximized
             //verticalAlignment: Text.AlignVCenter
             //height: parent.height
         }

layouts/ikinuki-default.qml

@@ -17,9 +17,10 @@ ApplicationWindow {
     Row {
         anchors.fill: parent
         focus: true
-        default property int selectedView: 0
+        property int selectedView: 0
         Sidebar {
             id: sidebar
+            maximized: parent.selectedView == 0
             providers: database.Providers
         }
         ContentView {