feat(Components): introduce StatusNavigationListItem

This introduces the `StatusNavigationListItem` that can be used to render
menu navigation items in secondary panels, such as the profile panel.

Usage:

```
import StatusQ.Components 0.1

StatusNavigationListItem {
    title: "Menu Item"
}

StatusNavigationListItem {
    title: "Menu Item"
    icon.name: "info"
}

StatusNavigationListItem {
    title: "Menu Item"
    icon.name: "info"
    badge.value: 1
}
StatusNavigationListItem {
    title: "Menu Item (selected)"
    selected: true
    icon.name: "info"
    badge.value: 1
}
```

Closes #72

sandbox/ListItems.qml

@@ -10,6 +10,27 @@ GridLayout {
     columnSpacing: 5
     rowSpacing: 5
 
+    StatusNavigationListItem {
+        title: "Menu Item"
+    }
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+        icon.name: "info"
+    }
+
+    StatusNavigationListItem {
+        title: "Menu Item"
+        icon.name: "info"
+        badge.value: 1
+    }
+    StatusNavigationListItem {
+        title: "Menu Item (selected)"
+        selected: true
+        icon.name: "info"
+        badge.value: 1
+    }
+
     StatusChatListItem {
         id: test
         name: "public-channel"

src/StatusQ/Components/StatusNavigationListItem.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+StatusListItem {
+    id: statusNavigationListItem
+
+    signal clicked(var mouse)
+    property bool selected: false
+    property alias badge: statusBadge
+
+    implicitWidth: 286
+    implicitHeight: 48
+
+    icon.background.width: 20
+    icon.background.height: 20
+    icon.background.color: "transparent"
+
+
+    color: {
+        if (selected) {
+            return Theme.palette.statusNavigationListItem.selectedBackgroundColor
+        }
+        return sensor.containsMouse ? 
+          Theme.palette.statusNavigationListItem.hoverBackgroundColor :
+          Theme.palette.baseColor4
+    }
+
+    MouseArea {
+        id: sensor
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor 
+        hoverEnabled: true
+        onClicked: statusNavigationListitem.clicked(mouse)
+    }
+
+    components: [
+        StatusBadge {
+            id: statusBadge
+            visible: value > 0
+        }
+    ]
+}

src/StatusQ/Components/qmldir

@@ -5,5 +5,6 @@ StatusChatListItem 0.1 StatusChatListItem.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusListItem 0.1 StatusListItem.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
+StatusNavigationListItem 0.1 StatusNavigationListItem.qml
 StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -132,6 +132,11 @@ ThemePalette {
         property color selectedBackgroundColor: directColor7
     }
 
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor: directColor8
+        property color selectedBackgroundColor: directColor7
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: baseColor3
     }

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -132,6 +132,11 @@ ThemePalette {
         property color selectedBackgroundColor: baseColor3
     }
 
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor: baseColor2
+        property color selectedBackgroundColor: baseColor3
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor: white
     }

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -93,6 +93,11 @@ QtObject {
         property color selectedBackgroundColor
     }
 
+    property QtObject statusNavigationListItem: QtObject {
+        property color hoverBackgroundColor
+        property color selectedBackgroundColor
+    }
+
     property QtObject statusBadge: QtObject {
         property color foregroundColor
     }