fix(StatusAppThreePanelLayout): limit right panel width to 300px

Also added handle in DemoApp as well as hiding text when in minimum
width for right and left panels

Author: alexandraB99

sandbox/DemoApp.qml

@@ -408,6 +408,12 @@ Rectangle {
 
         StatusAppThreePanelLayout {
             id: root
+
+            handle: Rectangle {
+                implicitWidth: 5
+                color: SplitHandle.pressed ? Theme.palette.baseColor2
+                    : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
+            }
             leftPanel: Item {
                 id: leftPanel
 
@@ -567,12 +573,15 @@ Rectangle {
             }
 
             rightPanel: Item {
+                id: rightPanel
                 StatusBaseText {
                     id: titleText
                     anchors.top: parent.top
                     anchors.topMargin:16
                     anchors.left: parent.left
                     anchors.leftMargin: 16
+                    opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                    visible: (opacity > 0.1)
                     font.pixelSize: 15
                     text: qsTr("Members")
                 }
@@ -601,6 +610,8 @@ Rectangle {
                         StatusBaseText {
                             height: parent.height
                             horizontalAlignment: Text.AlignHCenter
+                            opacity: (rightPanel.width > 50) ? 1.0 : 0.0
+                            visible: (opacity > 0.1)
                             font.pixelSize: 15
                             color: Theme.palette.directColor1
                             text: modelData

src/StatusQ/Layout/StatusAppThreePanelLayout.qml

@@ -16,6 +16,7 @@ SplitView {
     property bool showRightPanel
 
     Control {
+        SplitView.minimumWidth: 300
         SplitView.preferredWidth: 300
         SplitView.fillHeight: true
         contentItem: (!!leftPanel) ? leftPanel : null