feat(Components): introduce `StatusNavigationPanelHeadline`

Component to render navigation panel headlines.

Usage:

```qml
import StatusQ.Components 0.1

StatusNavigationPanelHeadline {
    text: "Profile"
}
```

Closes #162

sandbox/DemoApp.qml

@@ -157,18 +157,32 @@ Rectangle {
 
         StatusAppTwoPanelLayout {
 
-            leftPanel: StatusChatListAndCategories {
+            leftPanel: Item {
                 anchors.fill: parent
-                anchors.topMargin: 64
 
-                chatList.model: demoChatListItems
+                StatusNavigationPanelHeadline {
-                selectedChatId: "0"
+                    id: headline
-                onChatItemSelected: selectedChatId = id
+                    anchors.top: parent.top
-                onChatItemUnmuted: {
+                    anchors.topMargin: 16
-                    for (var i = 0; i < demoChatListItems.count; i++) {
+                    anchors.horizontalCenter: parent.horizontalCenter
-                        let item = demoChatListItems.get(i);
+                    text: "Chat"
-                        if (item.chatId === id) {
+                }
-                            demoChatListItems.setProperty(i, "muted", false)
+
+                StatusChatListAndCategories {
+                    anchors.top: headline.bottom
+                    anchors.topMargin: 16
+                    anchors.bottom: parent.bottom
+                    width: parent.width
+
+                    chatList.model: demoChatListItems
+                    selectedChatId: "0"
+                    onChatItemSelected: selectedChatId = id
+                    onChatItemUnmuted: {
+                        for (var i = 0; i < demoChatListItems.count; i++) {
+                            let item = demoChatListItems.get(i);
+                            if (item.chatId === id) {
+                                demoChatListItems.setProperty(i, "muted", false)
+                            }
                         }
                     }
                 }
@@ -218,7 +232,6 @@ Rectangle {
                         }
                     }
                 }
-
             }
         }
     }
@@ -228,9 +241,6 @@ Rectangle {
 
         StatusAppTwoPanelLayout {
 
-
-
-
             leftPanel: Item {
                 anchors.fill: parent
 

src/StatusQ/Components/StatusNavigationPanelHeadline.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.13
+import StatusQ.Core.Theme 0.1
+
+import StatusQ.Core 0.1
+
+StatusBaseText {
+    font.pixelSize: 17
+    font.weight: Font.Bold
+    color: Theme.palette.directColor1
+}
+

src/StatusQ/Components/qmldir

@@ -13,6 +13,7 @@ StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
 StatusNavigationListItem 0.1 StatusNavigationListItem.qml
+StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml

statusq.qrc

@@ -21,6 +21,7 @@
         <file>src/StatusQ/Components/StatusChatListAndCategories.qml</file>
         <file>src/StatusQ/Components/StatusChatInfoToolBar.qml</file>
         <file>src/StatusQ/Components/StatusNavigationListItem.qml</file>
+        <file>src/StatusQ/Components/StatusNavigationPanelHeadline.qml</file>
         <file>src/StatusQ/Components/StatusChatToolBar.qml</file>
         <file>src/StatusQ/Components/StatusRoundedImage.qml</file>
         <file>src/StatusQ/Components/StatusRoundIcon.qml</file>