status-desktop/ui/StatusQ/sandbox/Layout.qml

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Layout 0.1

GridLayout {
    columns: 6
    columnSpacing: 5
    rowSpacing: 5

    Button {
        id: btn
        text: "Append"
        onClicked: {
            buttons.append({
                name: "Test community",
                tooltipText: "Test Community"
            })
        }
    }

    StatusAppNavBar {
        navBarChatButton: StatusNavBarTabButton {
            icon.name: "chat"
            badge.value: 33
            badge.visible: true
            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
            badge.border.width: 2
            tooltip.text: "Chat"
        }
    }

    StatusAppNavBar {
        navBarChatButton: StatusNavBarTabButton {
            icon.name: "chat"
            badge.value: 33
            badge.visible: true
            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
            badge.border.width: 2
            tooltip.text: "Chat"
        }

        navBarCommunityTabButtons.model: ListModel {
            id: buttons
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
        }

        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
            name: model.name
            tooltip.text: model.name
            anchors.horizontalCenter: parent.horizontalCenter
        }

        navBarTabButtons: [
            StatusNavBarTabButton {
                icon.name: "wallet"
                tooltip.text: "Wallet"
            },
            StatusNavBarTabButton {
                icon.name: "browser"
                tooltip.text: "Browser"
            },
            StatusNavBarTabButton {
                icon.name: "status-update"
                tooltip.text: "Timeline"
            },
            StatusNavBarTabButton {
                icon.name: "profile"
                badge.visible: true
                badge.anchors.rightMargin: 4
                badge.anchors.topMargin: 5
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2

                tooltip.text: "Profile"
            }
        ]
    }

    StatusAppNavBar {
        navBarChatButton: StatusNavBarTabButton {
            icon.name: "chat"
            badge.value: 33
            badge.visible: true
            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
            badge.border.width: 2
            tooltip.text: "Chat"
        }

        navBarCommunityTabButtons.model: ListModel {
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
        }

        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
            name: model.name
            tooltip.text: model.name
            anchors.horizontalCenter: parent.horizontalCenter
        }

        navBarTabButtons: [
            StatusNavBarTabButton {
                icon.name: "wallet"
                tooltip.text: "Wallet"
            },
            StatusNavBarTabButton {
                icon.name: "browser"
                tooltip.text: "Browser"
            }
        ]
    }

    StatusAppNavBar {
        navBarChatButton: StatusNavBarTabButton {
            icon.name: "chat"
            badge.value: 33
            badge.visible: true
            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
            badge.border.width: 2
            tooltip.text: "Chat"
        }

        navBarCommunityTabButtons.model: ListModel {
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }

            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }

            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
        }

        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
            name: model.name
            tooltip.text: model.name
            anchors.horizontalCenter: parent.horizontalCenter
        }

        navBarTabButtons: [
            StatusNavBarTabButton {
                icon.name: "wallet"
                tooltip.text: "Wallet"
            },
            StatusNavBarTabButton {
                icon.name: "browser"
                tooltip.text: "Browser"
            },
            StatusNavBarTabButton {
                icon.name: "status-update"
                tooltip.text: "Timeline"
            },
            StatusNavBarTabButton {
                icon.name: "profile"
                badge.visible: true
                badge.anchors.rightMargin: 4
                badge.anchors.topMargin: 5
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2

                tooltip.text: "Profile"
            }
        ]
    }

    StatusAppNavBar {
        id: test
        navBarChatButton: StatusNavBarTabButton {
            icon.name: "chat"
            badge.value: 33
            badge.visible: true
            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
            badge.border.width: 2
            tooltip.text: "Chat"
        }

        navBarCommunityTabButtons.model: ListModel {
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }

            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
            ListElement {
                name: "Test community"
                tooltipText: "Test Community"
            }
        }

        navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
            name: model.name
            tooltip.text: model.name
            anchors.horizontalCenter: parent.horizontalCenter
        }

        navBarTabButtons: [
            StatusNavBarTabButton {
                icon.name: "wallet"
                tooltip.text: "Wallet"
            },
            StatusNavBarTabButton {
                icon.name: "browser"
                tooltip.text: "Browser"
            },
            StatusNavBarTabButton {
                icon.name: "status-update"
                tooltip.text: "Timeline"
            },
            StatusNavBarTabButton {
                icon.name: "profile"
                badge.visible: true
                badge.anchors.rightMargin: 4
                badge.anchors.topMargin: 5
                badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
                badge.border.width: 2

                tooltip.text: "Profile"
            }
        ]
    }
}