89 lines
2.8 KiB
QML
89 lines
2.8 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property var theme
|
|
property int currentIndex: 0
|
|
signal selected(int index)
|
|
|
|
readonly property var names: ["Quick", "Bar", "Panel", "Notifications", "Status"]
|
|
implicitWidth: 78
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: root.theme ? root.theme.cardRadius : 14
|
|
color: root.theme ? root.theme.surface : "#181825"
|
|
border.color: root.theme ? root.theme.border : "#313244"
|
|
border.width: 1
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: 7
|
|
spacing: 5
|
|
|
|
Label {
|
|
text: "iN"
|
|
color: root.theme ? root.theme.primary : "#89b4fa"
|
|
font.pixelSize: 17
|
|
font.bold: true
|
|
horizontalAlignment: Text.AlignHCenter
|
|
Layout.fillWidth: true
|
|
Layout.bottomMargin: 5
|
|
}
|
|
|
|
Repeater {
|
|
model: root.names
|
|
delegate: Rectangle {
|
|
required property int index
|
|
required property string modelData
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 48
|
|
radius: 11
|
|
color: index === root.currentIndex
|
|
? (root.theme ? root.theme.primary : "#89b4fa")
|
|
: (navMouse.containsMouse ? (root.theme ? root.theme.surfaceRaised : "#24243a") : "transparent")
|
|
|
|
Column {
|
|
anchors.centerIn: parent
|
|
spacing: 2
|
|
Label {
|
|
text: ["⌂", "≡", "▣", "●", "⌁"][index]
|
|
color: index === root.currentIndex ? (root.theme ? root.theme.background : "#11111b") : (root.theme ? root.theme.mutedText : "#9399b2")
|
|
font.pixelSize: 17
|
|
horizontalAlignment: Text.AlignHCenter
|
|
width: 58
|
|
}
|
|
Label {
|
|
text: modelData
|
|
color: index === root.currentIndex ? (root.theme ? root.theme.background : "#11111b") : (root.theme ? root.theme.mutedText : "#9399b2")
|
|
font.pixelSize: 9
|
|
horizontalAlignment: Text.AlignHCenter
|
|
width: 58
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: navMouse
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: root.selected(index)
|
|
}
|
|
}
|
|
}
|
|
|
|
Item { Layout.fillHeight: true }
|
|
|
|
Label {
|
|
text: "Niri"
|
|
color: root.theme ? root.theme.dimText : "#6c7086"
|
|
font.pixelSize: 9
|
|
horizontalAlignment: Text.AlignHCenter
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
}
|