left-bar working, bottom bar semi-broken

Modules/Resource.qml

@@ -4,13 +4,14 @@ import QtQuick.Shapes
 import qs.Components
 import qs.Config
 
-RowLayout {
+GridLayout {
 	id: root
 
 	property color accentColor: warning ? DynamicColors.palette.m3error : mainColor
 	property real animatedPercentage: 0
 	readonly property real arcStartAngle: 0.75 * Math.PI
 	readonly property real arcSweep: 1.5 * Math.PI
+	required property bool horizontal
 	property string icon
 	required property color iconColor
 	required property color mainColor
@@ -20,8 +21,9 @@ RowLayout {
 	property bool warning: percentage * 100 >= warningThreshold
 	property int warningThreshold: 80
 
+	columnSpacing: Appearance.spacing.smaller
+	columns: horizontal ? -1 : 1
 	percentage: 0
-	spacing: Appearance.spacing.smaller
 
 	Behavior on animatedPercentage {
 		Anim {
@@ -46,8 +48,8 @@ RowLayout {
 	}
 
 	CustomClippingRect {
-		Layout.preferredHeight: root.height - Appearance.padding.small
-		Layout.preferredWidth: 4
+		Layout.preferredHeight: root.horizontal ? icon.implicitHeight : 4
+		Layout.preferredWidth: root.horizontal ? 4 : icon.implicitWidth
 		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
 		radius: Appearance.rounding.full
 
@@ -56,9 +58,11 @@ RowLayout {
 
 			anchors.bottom: parent.bottom
 			anchors.left: parent.left
-			anchors.right: parent.right
+			anchors.right: root.horizontal ? parent.right : undefined
+			anchors.top: root.horizontal ? undefined : parent.top
 			color: root.mainColor
-			implicitHeight: Math.ceil(root.percentage * parent.height)
+			implicitHeight: root.horizontal ? Math.ceil(root.percentage * parent.height) : 0
+			implicitWidth: root.horizontal ? 0 : Math.ceil(root.percentage * parent.height)
 
 			// Behavior on implicitHeight {
 			// 	Anim {