feat(StatusNavBarTabButton): introduce `popupMenu` property

This enables users to apply a `StatusPopupMenu` to the button which automatically
positions itself and takes care of highlighting the activated button.

Usage:

```qml
StatusNavBarTabButton {
    ...
    popupMenu: StatusPopupMenu {

        StatusMenuItem {
            text: qsTr("Invite People")
            icon.name: "share-ios"
        }

        StatusMenuItem {
            text: qsTr("View Community")
            icon.name: "group"
        }

        StatusMenuItem {
            text: qsTr("Edit Community")
            icon.name: "edit"
        }
    }
}
```

Closes #137

ui/StatusQ/sandbox/DemoApp.qml

@@ -57,6 +57,8 @@ Rectangle {
 
         appNavBar: StatusAppNavBar {
 
+            id: navBar
+
             navBarChatButton: StatusNavBarTabButton {
                 icon.name: "chat"
                 tooltip.text: "Chat"
@@ -74,6 +76,7 @@ Rectangle {
             }
 
             navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
+                id: communityBtn
                 anchors.horizontalCenter: parent.horizontalCenter
                 name: model.name
                 tooltip.text: model.tooltipText
@@ -83,6 +86,35 @@ Rectangle {
                 onClicked: {
                     appView.sourceComponent = statusAppCommunityView
                 }
+
+                popupMenu: StatusPopupMenu {
+
+                    StatusMenuItem {
+                        text: qsTr("Invite People")
+                        icon.name: "share-ios"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("View Community")
+                        icon.name: "group"
+                    }
+
+                    StatusMenuItem {
+                        text: qsTr("Edit Community")
+                        icon.name: "edit"
+                    }
+
+                    StatusMenuSeparator {}
+
+                    StatusMenuItem {
+                        text: qsTr("Leave Community")
+                        icon.name: "arrow-right"
+                        icon.width: 14
+                        iconRotation: 180
+                        type: StatusMenuItem.Type.Danger
+                    }
+                }
+
             }
 
             navBarTabButtons: [

ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml

@@ -9,6 +9,7 @@ TabButton {
     id: statusIconTabButton
 
     property string name: ""
+    property bool highlighted: false
 
     implicitWidth: 40
     implicitHeight: 40
@@ -34,7 +35,7 @@ TabButton {
                 icon: statusIconTabButton.icon.name
                 height: statusIconTabButton.icon.height
                 width: statusIconTabButton.icon.width
-                color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+                color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
             }
         }
 
@@ -67,13 +68,13 @@ TabButton {
                 height: 26
                 letterSize: 15
                 name: statusIconTabButton.name
-                color: (statusIconTabButton.hovered || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
+                color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
             }
         }
     }
 
     background: Rectangle {
-        color: hovered || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent"
+        color: hovered || highlighted || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent"
         border.color: Theme.palette.primaryColor1
         border.width: (!!icon.source.toString() || !!name) && checked ? 1 : 0
         radius: statusIconTabButton.width / 2

ui/StatusQ/src/StatusQ/Controls/StatusNavBarTabButton.qml

@@ -1,13 +1,22 @@
 import QtQuick 2.13
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
     
 StatusIconTabButton {
     id: statusNavBarTabButton 
     property alias badge: statusBadge
     property alias tooltip: statusTooltip
+    property Component popupMenu
+
     signal clicked(var mouse)
 
+    onPopupMenuChanged: {
+        if (!!popupMenu) {
+            popupMenuSlot.sourceComponent = popupMenu
+        }
+    }
+
     StatusToolTip {
         id: statusTooltip
         visible: statusNavBarTabButton.hovered && !!statusTooltip.text
@@ -38,7 +47,27 @@ StatusIconTabButton {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
         acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onClicked: statusNavBarTabButton.clicked(mouse)
+        onClicked: {
+            if (mouse.button === Qt.RightButton) {
+                if (popupMenuSlot.active) {
+                    statusNavBarTabButton.highlighted = true
+                    let btnWidth = statusNavBarTabButton.width
+                    popupMenuSlot.item.popup(parent.x + btnWidth + 4, parent.y - 2)
+                }
+                return
+            }
+            statusNavBarTabButton.clicked(mouse)
+        }
+    }
+
+    Loader {
+        id: popupMenuSlot
+        active: !!statusNavBarTabButton.popupMenu
+        onLoaded: {
+            popupMenuSlot.item.closeHandler = function () {
+                statusNavBarTabButton.highlighted = false
+            }
+        }
     }
 }