left-bar working, bottom bar semi-broken

Components/MarqueeText.qml

@@ -40,7 +40,7 @@ Item {
 		}
 	}
 
-	clip: true
+	clip: false
 	implicitHeight: elideText.implicitHeight
 
 	Behavior on leftFadeStrength {
@@ -80,7 +80,7 @@ Item {
 		id: marqueeViewport
 
 		anchors.fill: parent
-		clip: true
+		clip: false
 		layer.enabled: true
 		visible: root.overflowing
 

Drawers/EdgeGeometry.qml

@@ -10,9 +10,7 @@ QtObject {
 	readonly property bool barOnBottom: position === "bottom"
 	readonly property bool barOnLeft: position === "left"
 	readonly property bool barOnTop: position === "top"
-	required property string configDashboardPosition
 	required property string configPosition
-	readonly property bool dashboardOnLeft: configDashboardPosition === "left" ? !barOnLeft : barOnTop
 	readonly property bool horizontal: position !== "left"
 	readonly property string position: configPosition === "top" || configPosition === "bottom" ? configPosition : "left"
 	required property var win

Drawers/Interactions.qml

@@ -22,7 +22,8 @@ Item {
 	required property PersistentProperties visibilities
 
 	function inBottomPanel(panel: Item, x: real, y: real): bool {
-		return y > root.height - panel.height - geometry.insetBottom(borderThickness) && withinPanelWidth(panel, x, y);
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
+		return y > root.height - (panelHeight + geometry.insetBottom(borderThickness)) && withinPanelWidth(panel, x, y);
 	}
 
 	function inLeftPanel(panel: Item, x: real, y: real): bool {
@@ -37,17 +38,12 @@ Item {
 	}
 
 	function inRightPanel(panel: Item, x: real, y: real): bool {
-		return x > panel.x - geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
+		return x > panel.x + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
 	}
 
 	function inTopPanel(panel: Item, x: real, y: real): bool {
-		return y < geometry.insetTop(borderThickness) + panel.height && withinPanelWidth(panel, x, y);
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
-	}
+		return y < geometry.insetTop(borderThickness) + panelHeight && withinPanelWidth(panel, x, y);
-
-	function onWheel(event: WheelEvent): void {
-		if (event.x < bar.implicitWidth) {
-			bar.handleWheel(event.y, event.angleDelta);
-		}
 	}
 
 	function withinPanelHeight(panel: Item, x: real, y: real): bool {
@@ -89,12 +85,11 @@ Item {
 			if (root.singleGestureTriggered)
 				return;
 
-			if (root.geometry.barContains(centroid.pressPosition.x, centroid.pressPosition.y, true)) {
+			if (root.geometry.insetTop(root.borderThickness) > centroid.pressPosition.y) {
-				const barDrag = root.geometry.inwardDrag(dragX, dragY);
+				if (dragY > 20) {
-				if (barDrag > 20) {
 					root.visibilities.settings = true;
 					root.singleGestureTriggered = true;
-				} else if (barDrag < -20) {
+				} else if (dragY < -20) {
 					root.visibilities.settings = false;
 					root.singleGestureTriggered = true;
 				}
@@ -228,8 +223,8 @@ Item {
 			if (Config.dock.enable && Config.dock.hoverToReveal && !root.visibilities.dock && !root.visibilities.launcher && root.inBottomPanel(root.panels.dock, x, y))
 				root.visibilities.dock = true;
 
-			if (y < root.bar.implicitHeight)
+			if (root.geometry.barContains(x, y))
-				root.bar.checkPopout(x);
+				root.bar.checkPopout(root.geometry.axisPos(x, y));
 		}
 	}
 

Drawers/Panels.qml

@@ -27,6 +27,7 @@ Item {
 	readonly property alias dock: dock
 	readonly property alias drawing: drawing
 	required property var drawingItem
+	required property EdgeGeometry geometry
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
@@ -43,9 +44,11 @@ Item {
 	readonly property alias utilities: utilities
 	required property PersistentProperties visibilities
 
+	anchors.bottomMargin: geometry.insetBottom(borderThickness)
 	anchors.fill: parent
+	anchors.leftMargin: geometry.insetLeft(borderThickness)
 	anchors.margins: borderThickness
-	anchors.topMargin: bar.implicitHeight
+	anchors.topMargin: geometry.insetTop(borderThickness)
 
 	Item {
 		id: resourcesWrapper
@@ -53,14 +56,15 @@ Item {
 		anchors.left: parent.left
 		anchors.top: parent.top
 		clip: true
-		implicitHeight: resources.implicitHeight * (1 - resources.offsetScale)
+		implicitHeight: root.geometry.horizontal ? resources.implicitHeight * (1 - resources.offsetScale) : resources.implicitHeight
-		implicitWidth: resources.implicitWidth
+		implicitWidth: root.geometry.horizontal ? resources.implicitWidth : resources.implicitWidth * (1 - resources.offsetScale)
 
 		Resources.Wrapper {
 			id: resources
 
 			anchors.left: parent.left
 			anchors.top: parent.top
+			horizontal: root.geometry.horizontal
 			visibilities: root.visibilities
 		}
 	}
@@ -99,8 +103,8 @@ Item {
 	Modules.ClipWrapper {
 		id: popouts
 
-		anchors.top: parent.top
 		borderThickness: root.borderThickness
+		position: root.geometry.position
 		screen: root.screen
 	}
 
@@ -147,11 +151,13 @@ Item {
 
 		property real offsetScale: dashboard.shouldBeActive ? 0 : 1
 
-		anchors.right: parent.right
+		anchors.bottom: root.geometry.barOnLeft || root.geometry.barOnBottom ? parent.bottom : undefined
-		anchors.top: parent.top
+		anchors.left: root.geometry.barOnLeft ? parent.left : undefined
+		anchors.right: root.geometry.barOnLeft ? undefined : parent.right
+		anchors.top: root.geometry.barOnBottom || root.geometry.barOnLeft ? undefined : parent.top
 		clip: true
-		implicitHeight: dashboard.implicitHeight * (1 - offsetScale)
+		implicitHeight: root.geometry.horizontal ? dashboard.implicitHeight * (1 - offsetScale) : dashboard.implicitHeight
-		implicitWidth: dashboard.implicitWidth
+		implicitWidth: root.geometry.horizontal ? dashboard.implicitWidth : dashboard.implicitWidth * (1 - offsetScale)
 
 		Behavior on offsetScale {
 			Anim {
@@ -164,8 +170,7 @@ Item {
 			id: dashboard
 
 			anchors.right: parent.right
-			anchors.top: parent.top
+			horizontal: root.geometry.horizontal
-			anchors.topMargin: (-implicitHeight - 5) * offsetScale
 			offsetScale: dashboardWrapper.offsetScale
 			visibilities: root.visibilities
 		}

Drawers/Regions.qml

@@ -7,17 +7,18 @@ import qs.Modules.Bar as Bar
 Region {
 	id: root
 
-	required property Bar.BarLoader bar
+	// required property Bar.BarLoader bar
 	readonly property real borderThickness: win.borderThickness
+	required property EdgeGeometry geometry
 	readonly property alias menuPopoutRegion: menuPopoutRegion
 	required property Panels panels
 	required property var win
 
-	height: win.height - bar.implicitHeight - win.borderThickness - win.dragMaskPadding * 2
+	height: win.height - geometry.insetTop(borderThickness, true) - geometry.insetBottom(borderThickness, true) - win.dragMaskPadding * 2
 	intersection: Intersection.Xor
-	width: win.width - win.borderThickness * 2 - win.dragMaskPadding * 2
+	width: win.width - geometry.insetLeft(borderThickness, true) * 2 - win.dragMaskPadding * 2
-	x: win.borderThickness + win.dragMaskPadding
+	x: geometry.insetLeft(borderThickness, true) + win.dragMaskPadding
-	y: bar.implicitHeight + win.dragMaskPadding
+	y: geometry.insetTop(borderThickness, true) + win.dragMaskPadding
 
 	R {
 		panel: root.panels.dashboardWrapper
@@ -41,17 +42,21 @@ Region {
 	}
 
 	R {
+		height: panel.height + root.geometry.insetTop(root.borderThickness)
 		panel: root.panels.notifications
+		y: 0
 	}
 
 	R {
-		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.borderThickness
+		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.geometry.insetBottom(root.borderThickness)
 		panel: root.panels.utilities
 		y: root.win.height - height
 	}
 
 	R {
+		height: root.geometry.horizontal ? panel.height * (1 - root.panels.popoutsWrapper.offsetScale) : panel.height
 		panel: root.panels.popoutsWrapper
+		width: root.geometry.horizontal ? panel.width : panel.width * (1 - root.panels.popoutsWrapper.offsetScale)
 	}
 
 	R {
@@ -82,7 +87,7 @@ Region {
 		height: panel.height
 		intersection: Intersection.Subtract
 		width: panel.width
-		x: panel.x + root.borderThickness
+		x: panel.x + root.geometry.insetLeft(root.borderThickness)
-		y: panel.y + root.bar.implicitHeight
+		y: panel.y + root.geometry.insetTop(root.borderThickness)
 	}
 }

Drawers/Windows.qml

@@ -212,15 +212,15 @@ CustomWindow {
 		PanelBg {
 			id: dashBg
 
-			property real extraHeight: 0.2
+			property real extraExtent: 0.2
 
 			deformAmount: 0.06
-			implicitHeight: panels.dashboard.height * (1 + extraHeight)
+			implicitHeight: panels.dashboard.height * (geometry.horizontal ? 1 + extraExtent : 1)
-			implicitWidth: panels.dashboard.width
+			implicitWidth: panels.dashboard.width * (geometry.horizontal ? 1 : 1 + extraExtent)
 			panel: panels.dashboardWrapper
 			radius: Appearance.rounding.normal
-			x: panels.dashboardWrapper.x + panels.dashboard.x + root.borderThickness
+			x: panels.dashboardWrapper.x + panels.dashboard.x + geometry.insetLeft(root.borderThickness) - (geometry.horizontal ? 0 : panels.dashboard.width * extraExtent)
-			y: panels.dashboardWrapper.y + panels.dashboard.y + geometry.insetTop(root.borderThickness) - panels.dashboard.height * extraHeight
+			y: panels.dashboardWrapper.y + panels.dashboard.y + geometry.insetTop(root.borderThickness) - (geometry.horizontal ? panels.dashboard.height * extraExtent : 0)
 		}
 
 		PanelBg {
@@ -232,7 +232,7 @@ CustomWindow {
 			implicitHeight: panels.launcher.height * (1 + extraHeight)
 			panel: panels.launcher
 			radius: Appearance.rounding.smallest + 5
-			y: panels.launcher.y + bar.implicitHeight
+			y: panels.launcher.y + geometry.insetTop(root.borderThickness)
 		}
 
 		PanelBg {
@@ -299,8 +299,8 @@ CustomWindow {
 			implicitWidth: panels.resources.width
 			panel: panels.resourcesWrapper
 			radius: Appearance.rounding.large
-			x: panels.resourcesWrapper.x + panels.resources.x + root.borderThickness
+			x: panels.resourcesWrapper.x + panels.resources.x + geometry.insetLeft(root.borderThickness)
-			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
+			y: panels.resourcesWrapper.y + panels.resources.y + geometry.insetTop(root.borderThickness)
 		}
 
 		PanelBg {

Modules/Bar/Bar.qml

@@ -49,7 +49,7 @@ GridLayout {
 		} else if (id === "tray" && Config.bar.popouts.tray && Config.bar.tray.showOnHover) {
 			const tray = ch.item as TrayIcons;
 			const layout = tray.layout;
-			const trayItem = horizontal ? layout.childAt(mapToItem(layout, pos, 0).x, layout.height / 2) : layout.childAt(items.width / 2, mapToItem(layout, 0, pos).y);
+			const trayItem = horizontal ? layout.childAt(mapToItem(layout, pos, 0).x, layout.height / 2) : layout.childAt(tray.width / 2, mapToItem(layout, 0, pos).y);
 
 			if (trayItem) {
 				const idx = trayItem.index;
@@ -92,7 +92,10 @@ GridLayout {
 				roleValue: "hyprsunset"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					HyprsunsetWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -123,6 +126,8 @@ GridLayout {
 				roleValue: "tray"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					TrayIcons {
 						horizontal: root.horizontal
 						loader: root
@@ -136,6 +141,8 @@ GridLayout {
 				roleValue: "statusIcons"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					StatusIcons {
 						horizontal: root.horizontal
 					}
@@ -146,6 +153,8 @@ GridLayout {
 				roleValue: "resources"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					Resources {
 						horizontal: root.horizontal
 						visibilities: root.visibilities
@@ -158,6 +167,8 @@ GridLayout {
 				roleValue: "updates"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					UpdatesWidget {
 						horizontal: root.horizontal
 						visible: !root.fullscreen
@@ -169,6 +180,8 @@ GridLayout {
 				roleValue: "notifBell"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					NotifBell {
 						horizontal: root.horizontal
 						popouts: root.popouts
@@ -182,6 +195,8 @@ GridLayout {
 				roleValue: "clock"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					Clock {
 						horizontal: root.horizontal
 						loader: root
@@ -196,6 +211,8 @@ GridLayout {
 				roleValue: "activeWindow"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					WindowTitle {
 						bar: root
 						horizontal: root.horizontal
@@ -209,7 +226,6 @@ GridLayout {
 
 				delegate: EntryWrapper {
 					NetworkWidget {
-						horizontal: root.horizontal
 					}
 				}
 			}
@@ -218,6 +234,8 @@ GridLayout {
 				roleValue: "media"
 
 				delegate: EntryWrapper {
+					Layout.fillWidth: !root.horizontal
+
 					MediaWidget {
 						horizontal: root.horizontal
 						visible: !root.fullscreen
@@ -233,11 +251,11 @@ GridLayout {
 		default property Item item
 		required property var modelData
 
-		Layout.alignment: Qt.AlignVCenter
+		Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
 		Layout.bottomMargin: !root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
-		Layout.leftMargin: root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons") ? -root.rowSpacing + Appearance.spacing.extraSmall : 0
+		Layout.leftMargin: root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && root.horizontal) ? -root.rowSpacing + Appearance.spacing.extraSmall : root.horizontal ? 0 : Appearance.padding.smaller
-		Layout.rightMargin: root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
+		Layout.rightMargin: root.horizontal && index === repeater.count - 1 ? root.vPadding : root.horizontal ? 0 : Appearance.padding.smaller
-		Layout.topMargin: !root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons") ? -root.columnSpacing + Appearance.spacing.extraSmall : 0
+		Layout.topMargin: !root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && !root.horizontal) ? -root.columnSpacing + Appearance.spacing.extraSmall : 0
 		children: item
 		implicitHeight: item?.implicitHeight ?? 0
 		implicitWidth: item?.implicitWidth ?? 0

Modules/Bar/BarLoader.qml

@@ -1,28 +1,22 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
-import Quickshell.Hyprland
 import QtQuick
-import QtQuick.Layouts
 import qs.Components
 import qs.Modules
 import qs.Config
-import qs.Helpers
-import qs.Modules.SysTray
-import qs.Modules.SysTray.Widgets
-import qs.Modules.Network
 
 Item {
 	id: root
 
 	readonly property int clampedExtent: Math.max(Config.bar.border, extent)
-	readonly property int contentThickness: Config.bar.height + padding * 2
+	readonly property int contentThickness: Math.max(Config.bar.height, (horizontal ? 24 : 30)) + padding * 2
 	readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentThickness
 	property real extent: fullscreen ? 0 : Config.bar.border
 	required property bool fullscreen
 	readonly property bool horizontal: position !== "left"
 	property bool isHovered
-	readonly property int padding: Math.max(Appearance.padding.smaller, Config.bar.border)
+	readonly property int padding: horizontal ? Math.max(Appearance.padding.smaller, Config.bar.border) : Math.max(Appearance.padding.larger, Config.bar.border)
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
 	required property string position
@@ -89,7 +83,6 @@ Item {
 
 		sourceComponent: Bar {
 			fullscreen: root.fullscreen
-			height: root.contentHeight
 			horizontal: root.horizontal
 			popouts: root.popouts
 			popoutsWrapper: root.popoutsWrapper

Modules/ClipWrapper.qml

@@ -10,27 +10,51 @@ Item {
 
 	required property real borderThickness
 	readonly property alias content: content
-	property real offsetScale: y > 0 || content.hasCurrent ? 0 : 1
+	readonly property bool horizontal: position !== "left"
+	// property real offsetScale: y > 0 || content.hasCurrent ? 0 : 1
+	property real offsetScale: {
+		if (content.hasCurrent)
+			return 0;
+		if (position === "top")
+			return y > 0 ? 0 : 1;
+		if (position === "bottom")
+			return 1;
+		return x > 0 ? 0 : 1;
+	}
+	required property string position
 	required property ShellScreen screen
 
+	anchors.bottom: position === "bottom" ? parent.bottom : undefined
 	clip: true
-	implicitHeight: content.implicitHeight * (1 - offsetScale)
+	implicitHeight: horizontal ? content.implicitHeight * (1 - offsetScale) : content.implicitHeight
-	implicitWidth: content.implicitWidth
+	implicitWidth: horizontal ? content.implicitWidth : content.implicitWidth * (1 - offsetScale)
 	visible: width > 0 && height > 0
 	x: {
+		if (!horizontal)
+			return 0;
 		const off = content.currentCenter - borderThickness - content.nonAnimWidth / 2;
 		const diff = parent.width - Math.floor(off + content.nonAnimWidth);
 		if (diff < 0)
 			return off + diff;
 		return Math.floor(Math.max(off, 0));
 	}
+	y: {
+		if (horizontal)
+			return 0;
+
+		const off = content.currentCenter - borderThickness - content.nonAnimHeight / 2;
+		const diff = parent.height - Math.floor(off + content.nonAnimHeight);
+		if (diff < 0)
+			return off + diff;
+		return Math.max(off, 0);
+	}
 
 	Behavior on offsetScale {
 		Anim {
 		}
 	}
 	Behavior on x {
-		enabled: root.offsetScale < 1
+		enabled: !root.horizontal || root.offsetScale < 1
 
 		Anim {
 			duration: content.animLength
@@ -38,6 +62,8 @@ Item {
 		}
 	}
 	Behavior on y {
+		enabled: root.horizontal || root.offsetScale < 1
+
 		Anim {
 			duration: content.animLength
 			easing.bezierCurve: content.animCurve
@@ -47,9 +73,14 @@ Item {
 	Wrapper {
 		id: content
 
-		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.bottom: root.position === "bottom" ? parent.bottom : undefined
-		anchors.top: parent.top
+		anchors.bottomMargin: (-implicitHeight - 5) * root.offsetScale
+		anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
+		anchors.left: root.horizontal ? undefined : parent.left
+		anchors.leftMargin: (-implicitWidth - 5) * root.offsetScale
+		anchors.top: root.position === "top" ? parent.top : undefined
 		anchors.topMargin: (-implicitHeight - 5) * root.offsetScale
+		anchors.verticalCenter: root.horizontal ? undefined : parent.verticalCenter
 		offsetScale: root.offsetScale
 		screen: root.screen
 	}

Modules/Clock.qml

@@ -9,27 +9,45 @@ import qs.Components
 CustomRect {
 	id: root
 
-	required property RowLayout loader
+	required property bool horizontal
+	required property GridLayout loader
 	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smallest * 2
+	readonly property real size: timeText.contentWidth + (horizontal ? Appearance.padding.normal : Appearance.padding.larger) * 2
 	required property PersistentProperties visibilities
 
+	anchors.fill: parent
 	color: visibilities.dashboard ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? shortSize : size
-	implicitWidth: timeText.contentWidth + Appearance.padding.normal * 2
+	implicitWidth: horizontal ? size : shortSize
 	radius: Appearance.rounding.full
 
 	CustomText {
 		id: timeText
 
 		anchors.centerIn: parent
+		// anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		// anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
 		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 		font: Appearance.font.family.mono // qmllint disable incompatible-type
+		height: root.horizontal ? implicitHeight : implicitWidth
 		text: Time.dateStr
+		width: root.horizontal ? implicitWidth : implicitHeight
 
 		Behavior on color {
 			CAnim {
 			}
 		}
+		transform: [
+			Translate {
+				x: !root.horizontal ? -timeText.implicitWidth + timeText.implicitHeight : 0
+			},
+			Rotation {
+				angle: root.horizontal ? 0 : 270
+				origin.x: timeText.implicitHeight / 2
+				origin.y: timeText.implicitHeight / 2
+			}
+		]
 	}
 
 	StateLayer {

Modules/Dashboard/Wrapper.qml

@@ -14,11 +14,16 @@ Item {
 
 		reloadableId: "dashboardState"
 	}
+	required property bool horizontal
 	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
 	required property real offsetScale
 	readonly property bool shouldBeActive: root.visibilities.dashboard && Config.dashboard.enabled
 	required property PersistentProperties visibilities
 
+	anchors.left: horizontal ? undefined : parent.left
+	anchors.leftMargin: horizontal ? 0 : (-implicitWidth - 5) * offsetScale
+	anchors.top: horizontal ? parent.top : undefined
+	anchors.topMargin: horizontal ? (-implicitHeight - 5) * offsetScale : 0
 	implicitHeight: content.implicitHeight
 	implicitWidth: content.implicitWidth || 854
 	opacity: 1 - offsetScale

Modules/HyprsunsetWidget.qml

@@ -6,11 +6,13 @@ import qs.Config
 CustomRect {
 	id: root
 
+	required property bool horizontal
 	property bool tempEnabled: Hyprsunset.enabled
 
+	anchors.fill: parent
 	color: root.tempEnabled ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height + Appearance.padding.smallest * 2 : width
-	implicitWidth: implicitHeight
+	implicitWidth: horizontal ? height : Config.bar.height + Appearance.padding.smallest * 2
 	radius: Appearance.rounding.full
 
 	StateLayer {
@@ -25,6 +27,7 @@ CustomRect {
 		animate: true
 		color: root.tempEnabled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 		fill: root.tempEnabled ? 1 : 0
+		font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 		text: root.tempEnabled ? "lightbulb" : "light_off"
 
 		Behavior on fill {

Modules/MediaWidget.qml

@@ -9,11 +9,13 @@ CustomRect {
 	id: root
 
 	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
+	required property bool horizontal
 	readonly property int textWidth: Math.min(metrics.width, 200)
 
+	anchors.fill: parent
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height + Appearance.padding.smallest * 2 : layout.implicitHeight + Appearance.padding.normal * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
+	implicitWidth: horizontal ? layout.implicitWidth + Appearance.padding.normal * 2 : Config.bar.height + Appearance.padding.smallest
 	radius: Appearance.rounding.full
 
 	Behavior on implicitWidth {
@@ -28,10 +30,11 @@ CustomRect {
 		text: mediatext.text
 	}
 
-	RowLayout {
+	GridLayout {
 		id: layout
 
 		anchors.centerIn: parent
+		columns: root.horizontal ? -1 : 1
 
 		Behavior on implicitWidth {
 			Anim {
@@ -39,6 +42,7 @@ CustomRect {
 		}
 
 		MaterialIcon {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
 			animate: true
 			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 			font.pointSize: Appearance.font.size.larger
@@ -48,7 +52,8 @@ CustomRect {
 		MarqueeText {
 			id: mediatext
 
-			Layout.preferredWidth: root.textWidth
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			Layout.preferredHeight: root.horizontal ? root.height : root.textWidth
 			animate: true
 			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 			font.pointSize: Appearance.font.size.normal
@@ -58,6 +63,17 @@ CustomRect {
 			text: root.currentMedia
 			width: root.textWidth
 
+			transform: [
+				Translate {
+					x: !root.horizontal ? -root.textWidth + mediatext.implicitHeight : 0
+				},
+				Rotation {
+					angle: root.horizontal ? 0 : 270
+					origin.x: mediatext.implicitHeight / 2
+					origin.y: mediatext.implicitHeight / 2
+				}
+			]
+
 			CustomMouseArea {
 				anchors.fill: parent
 				hoverEnabled: true

Modules/NotifBell.qml

@@ -7,12 +7,14 @@ import qs.Components
 CustomRect {
 	id: root
 
+	required property bool horizontal
 	required property Wrapper popouts
 	required property PersistentProperties visibilities
 
+	anchors.fill: parent
 	color: visibilities.sidebar ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height + Appearance.padding.smallest * 2 : width
-	implicitWidth: implicitHeight
+	implicitWidth: horizontal ? height : Config.bar.height + Appearance.padding.smallest * 2
 	radius: Appearance.rounding.full
 
 	MaterialIcon {
@@ -21,8 +23,7 @@ CustomRect {
 		anchors.centerIn: parent
 		color: root.visibilities.sidebar ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 		fill: root.visibilities.sidebar ? 1 : 0
-		font.family: "Material Symbols Rounded"
+		font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
-		font.pointSize: Appearance.font.size.larger
 		text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"
 
 		Behavior on color {

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.preferredHeight: root.horizontal ? icon.implicitHeight : 4
-		Layout.preferredWidth: 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 {

Modules/Resources.qml

@@ -12,12 +12,14 @@ import qs.Components
 CustomRect {
 	id: root
 
+	required property bool horizontal
 	required property PersistentProperties visibilities
 
+	anchors.fill: parent
 	clip: true
 	color: visibilities.resources ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height + Appearance.padding.smallest * 2 : gridLayout.implicitHeight + Appearance.padding.normal * 2
-	implicitWidth: rowLayout.implicitWidth + Appearance.padding.larger * 2
+	implicitWidth: horizontal ? gridLayout.implicitWidth + Appearance.padding.larger * 2 : Config.bar.height
 	radius: Appearance.rounding.full
 
 	StateLayer {
@@ -26,13 +28,14 @@ CustomRect {
 		onClicked: root.visibilities.resources = !root.visibilities.resources
 	}
 
-	RowLayout {
+	GridLayout {
-		id: rowLayout
+		id: gridLayout
 
 		anchors.centerIn: parent
-		anchors.horizontalCenterOffset: -2
+		anchors.horizontalCenterOffset: root.horizontal ? 0 : 1
-		implicitHeight: root.implicitHeight
+		anchors.verticalCenterOffset: root.horizontal ? 0 : -3
-		spacing: Appearance.spacing.smaller
+		columnSpacing: Appearance.spacing.smaller
+		columns: root.horizontal ? -1 : 1
 
 		ServiceRef {
 			service: Gpu
@@ -48,7 +51,9 @@ CustomRect {
 
 		Resource {
 			Layout.alignment: Qt.AlignVCenter
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "memory"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
@@ -57,7 +62,9 @@ CustomRect {
 		}
 
 		Resource {
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "memory_alt"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3secondary
@@ -66,7 +73,9 @@ CustomRect {
 		}
 
 		Resource {
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "gamepad"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3tertiary
@@ -74,7 +83,9 @@ CustomRect {
 		}
 
 		Resource {
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "developer_board"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary

Modules/Resources/Wrapper.qml

@@ -8,12 +8,14 @@ import qs.Config
 Item {
 	id: root
 
+	required property bool horizontal
 	readonly property real nonAnimHeight: content.item?.nonAnimHeight ?? 0
 	property real offsetScale: shouldBeActive ? 0 : 1
 	readonly property bool shouldBeActive: root.visibilities.resources
 	required property PersistentProperties visibilities
 
-	anchors.topMargin: (-implicitHeight - 5) * offsetScale
+	anchors.leftMargin: horizontal ? 0 : (-implicitWidth - 5) * offsetScale
+	anchors.topMargin: horizontal ? (-implicitHeight - 5) * offsetScale : 0
 	clip: true
 	implicitHeight: content.implicitHeight
 	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open

Modules/Settings/Pages/Panels/BarPanel.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick.Layouts
+import qs.Components
 import qs.Config
 import qs.Modules.Settings.Common
 
@@ -25,7 +26,6 @@ PageBase {
 		ToggleRow {
 			checked: Config.bar.autoHide
 			first: true
-			last: true
 			settingAnchor: "bar-autohide"
 			subtext: qsTr("Hide the bar, reveal on hover")
 			text: qsTr("Auto hide")
@@ -33,6 +33,37 @@ PageBase {
 			onToggled: Config.bar.autoHide = checked
 		}
 
+		SelectRow {
+			active: Config.bar.position === "top" ? menuItems[0] : Config.bar.position === "left" ? menuItems[1] : menuItems[2]
+			last: true
+			settingAnchor: "bar-position"
+			subtext: qsTr("Automatic or manual effect values")
+			text: qsTr("Effects mode")
+
+			menuItems: [
+				MenuItem {
+					icon: "build"
+					text: qsTr("Top")
+					value: "top"
+				},
+				MenuItem {
+					icon: "rotate_auto"
+					text: qsTr("Left")
+					value: "left"
+				},
+				MenuItem {
+					icon: "rotate_auto"
+					text: qsTr("Bottom")
+					value: "bottom"
+				}
+			]
+
+			onSelected: item => {
+				Config.bar.position = item.value;
+				Config.save();
+			}
+		}
+
 		// Components
 		SectionHeader {
 			text: qsTr("Components")

Modules/SysTray/StatusIcons.qml

@@ -18,9 +18,10 @@ CustomClippingRect {
 				return i;
 		return -1;
 	}
+	required property bool horizontal
 
 	// Index of the first/last entry that isn't collapsed, for edge margin gating
-	readonly property alias items: row
+	readonly property alias items: grid
 	readonly property int lastPresent: {
 		const values = model.values;
 		for (let i = values.length - 1; i >= 0; i--)
@@ -28,6 +29,8 @@ CustomClippingRect {
 				return i;
 		return -1;
 	}
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smallest * 2
+	readonly property real size: horizontal ? grid.implicitWidth + Appearance.padding.small * 2 : grid.implicitHeight + Appearance.padding.small * 2
 	readonly property int spacing: Appearance.spacing.normal / 2
 
 	// Entries that can shrink to nothing, spacing included
@@ -37,19 +40,37 @@ CustomClippingRect {
 		return false;
 	}
 
-	bottomLeftRadius: Appearance.rounding.smallest / 2
+	anchors.fill: parent
+	bottomLeftRadius: horizontal ? Appearance.rounding.smallest / 2 : Appearance.rounding.full
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? shortSize : size
-	implicitWidth: row.implicitWidth + Appearance.padding.small * 2
+	implicitWidth: horizontal ? size : shortSize
 	radius: Appearance.rounding.full
 	topLeftRadius: Appearance.rounding.smallest / 2
+	topRightRadius: horizontal ? Appearance.rounding.full : Appearance.rounding.smallest / 2
 
-	RowLayout {
+	Behavior on implicitHeight {
-		id: row
+		enabled: !root.horizontal
 
+		Anim {
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+		}
+	}
+
+	GridLayout {
+		id: grid
+
+		anchors.bottomMargin: root.horizontal ? 0 : Appearance.padding.small
 		anchors.fill: parent
-		anchors.leftMargin: Appearance.padding.small
+		anchors.leftMargin: root.horizontal ? Appearance.padding.small : 0
-		anchors.rightMargin: Appearance.padding.small
+		anchors.rightMargin: root.horizontal ? Appearance.padding.small : 0
+		anchors.topMargin: root.horizontal ? 0 : Appearance.padding.small
+		columns: root.horizontal ? -1 : 1
 
 		Repeater {
 			model: ScriptModel {
@@ -68,6 +89,7 @@ CustomClippingRect {
 						name: "audio"
 
 						AudioWidget {
+							horizontal: root.horizontal
 						}
 					}
 				}
@@ -79,6 +101,7 @@ CustomClippingRect {
 						name: "audio"
 
 						MicWidget {
+							horizontal: root.horizontal
 						}
 					}
 				}
@@ -90,6 +113,7 @@ CustomClippingRect {
 						name: "upower"
 
 						UPowerWidget {
+							horizontal: root.horizontal
 						}
 					}
 				}
@@ -108,8 +132,10 @@ CustomClippingRect {
 		property real rightGap: present && index !== root.firstPresent ? margin : 0
 
 		Layout.alignment: Qt.AlignHCenter
-		Layout.leftMargin: Math.round(leftGap)
+		Layout.bottomMargin: root.horizontal ? 0 : Math.round(rightGap)
-		Layout.rightMargin: Math.round(rightGap)
+		Layout.leftMargin: root.horizontal ? Math.round(leftGap) : 0
+		Layout.rightMargin: root.horizontal ? Math.round(rightGap) : 0
+		Layout.topMargin: root.horizontal ? 0 : Math.round(leftGap)
 		children: item
 		implicitHeight: item?.implicitHeight ?? 0
 		implicitWidth: item?.implicitWidth ?? 0

Modules/SysTray/TrayIcons.qml

@@ -11,24 +11,30 @@ import qs.Modules
 CustomClippingRect {
 	id: root
 
+	required property bool horizontal
 	readonly property alias items: repeater
-	readonly property alias layout: sysRow
+	readonly property alias layout: sysGrid
-	required property RowLayout loader
+	required property GridLayout loader
 	readonly property int padding: Appearance.padding.small
 	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smallest * 2
+	readonly property real size: horizontal ? sysGrid.implicitWidth + Appearance.padding.small : sysGrid.implicitHeight + Appearance.padding.small
 
+	anchors.fill: parent
+	bottomLeftRadius: horizontal ? Appearance.rounding.full : Appearance.rounding.smallest / 2
 	bottomRightRadius: Appearance.rounding.smallest / 2
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? shortSize : size
-	implicitWidth: sysRow.implicitWidth + Appearance.padding.small * 2
+	implicitWidth: horizontal ? size : shortSize
 	radius: Appearance.rounding.full
-	topRightRadius: Appearance.rounding.smallest / 2
+	topRightRadius: horizontal ? Appearance.rounding.smallest / 2 : Appearance.rounding.full
 
-	RowLayout {
+	GridLayout {
-		id: sysRow
+		id: sysGrid
 
 		anchors.centerIn: parent
-		spacing: 0
+		columns: root.horizontal ? -1 : 1
+		rowSpacing: -2
 
 		Repeater {
 			id: repeater

Modules/SysTray/TrayItem.qml

@@ -12,10 +12,10 @@ Item {
 	id: root
 
 	property bool current: popouts.currentName.startsWith(`traymenu${ind}`) && popouts.hasCurrent
-	readonly property real dpr: Hypr.monitorFor(loader.screen).scale
+	readonly property real dpr: Hypr.monitorFor(loader?.screen).scale
 	required property int ind
 	required property SystemTrayItem item
-	required property RowLayout loader
+	required property GridLayout loader
 	required property Wrapper popouts
 
 	function resolveIcon(app: string, icon: string): string {

Modules/SysTray/TrayWidget.qml

@@ -8,12 +8,15 @@ import qs.Config
 import qs.Modules.SysTray.Widgets
 import qs.Modules
 
-RowLayout {
+GridLayout {
 	id: root
 
+	required property bool horizontal
 	readonly property alias items: repeater
-	required property RowLayout loader
+	required property GridLayout loader
 	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smallest * 2
+	readonly property real size: horizontal ? sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small : sysTray.implicitHeight + sysTrayMod.implicitHeight + Appearance.padding.small
 
 	function closestRowChild(row, x) {
 		let child = row.childAt(x, row.height / 2);
@@ -80,9 +83,11 @@ RowLayout {
 		return null;
 	}
 
-	height: Config.bar.height + Appearance.padding.smallest * 2
+	columnSpacing: Appearance.padding.small
-	spacing: Appearance.padding.small
+	columns: horizontal ? -1 : 1
-	width: sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small
+	height: horizontal ? shortSize : size
+	rowSpacing: Appearance.padding.small
+	width: horizontal ? size : shortSize
 
 	CustomClippingRect {
 		id: sysTray
@@ -94,11 +99,18 @@ RowLayout {
 		radius: Appearance.rounding.full
 		topRightRadius: Appearance.rounding.smallest / 2
 
-		Row {
+		GridLayout {
 			id: sysRow
 
+			anchors.bottom: root.horizontal ? undefined : parent.bottom
 			anchors.centerIn: parent
-			spacing: 0
+			anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
+			anchors.left: root.horizontal ? undefined : parent.left
+			anchors.right: root.horizontal ? undefined : parent.right
+			anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+			columnSpacing: Appearance.spacing.small / 2
+			columns: root.horizontal ? -1 : 1
+			rowSpacing: Appearance.spacing.small / 2
 
 			Repeater {
 				id: repeater
@@ -125,10 +137,12 @@ RowLayout {
 	CustomClippingRect {
 		id: sysTrayMod
 
-		Layout.fillHeight: true
+		Layout.fillHeight: root.horizontal
+		Layout.fillWidth: !root.horizontal
 		bottomLeftRadius: Appearance.rounding.smallest / 2
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: sysIcons.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal
+		implicitHeight: root.horizontal ? sysIcons.implicitHeight : sysIcons.implicitHeight + Appearance.padding.smaller + Appearance.padding.normal
+		implicitWidth: root.horizontal ? sysIcons.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal : sysIcons.implicitWidth
 		radius: Appearance.rounding.full
 		topLeftRadius: Appearance.rounding.smallest / 2
 
@@ -138,6 +152,7 @@ RowLayout {
 			anchors.fill: parent
 			anchors.leftMargin: Appearance.padding.smaller
 			anchors.rightMargin: Appearance.padding.normal
+			horizontal: root.horizontal
 		}
 	}
 }

Modules/SysTray/Widgets/AudioWidget.qml

@@ -10,10 +10,12 @@ import qs.Components
 MaterialIcon {
 	id: speaker
 
+	required property bool horizontal
+
 	animate: true
 	color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
 	fill: 1
-	font.pointSize: Appearance.font.size.larger
+	font.pointSize: horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 	text: Audio.muted ? "volume_off" : "volume_up"
 
 	Behavior on Layout.maximumWidth {

Modules/SysTray/Widgets/MicWidget.qml

@@ -10,10 +10,12 @@ import qs.Components
 MaterialIcon {
 	id: mic
 
+	required property bool horizontal
+
 	animate: true
 	color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
 	fill: 1
-	font.pointSize: Appearance.font.size.larger
+	font.pointSize: horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 	text: Audio.sourceMuted ? "mic_off" : "mic"
 
 	Behavior on Layout.maximumWidth {

Modules/SysTray/Widgets/UPowerWidget.qml

@@ -8,6 +8,8 @@ import qs.Helpers
 Item {
 	id: root
 
+	required property bool horizontal
+
 	implicitHeight: Battery.isLaptop ? batteryIconLoader.item.implicitHeight : upowerIconLoader.item.implicitHeight
 	implicitWidth: Battery.isLaptop ? batteryIconLoader.item.implicitWidth : upowerIconLoader.item.implicitWidth
 
@@ -123,6 +125,7 @@ Item {
 			Layout.alignment: Qt.AlignVCenter
 			animate: true
 			fill: 1
+			font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 			text: {
 				if (PowerProfiles.profile === PowerProfile.PowerSaver)
 					return "energy_savings_leaf";

Modules/Updates/UpdatesWidget.qml

@@ -9,27 +9,32 @@ CustomRect {
 	id: root
 
 	property int countUpdates: Updates.availableUpdates
+	required property bool horizontal
 	property color textColor: DynamicColors.palette.m3onSurface
 
+	anchors.fill: parent
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height + Appearance.padding.smallest * 2 : content.implicitHeight + Appearance.spacing.small * 2
-	implicitWidth: contentRow.implicitWidth + Appearance.spacing.small * 2
+	implicitWidth: horizontal ? content.implicitWidth + Appearance.spacing.small * 2 : Config.bar.height
 	radius: Appearance.rounding.full
 
-	RowLayout {
+	GridLayout {
-		id: contentRow
+		id: content
 
 		anchors.centerIn: parent
-		spacing: Appearance.spacing.small
+		columnSpacing: Appearance.spacing.small
+		columns: root.horizontal ? -1 : 1
 
 		MaterialIcon {
-			font.pointSize: Appearance.font.size.larger
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 			text: "package_2"
 		}
 
 		CustomText {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
 			color: root.textColor
-			font.pointSize: Appearance.font.size.normal
+			font.pointSize: root.horizontal ? Appearance.font.size.normal : Appearance.font.size.larger
 			text: root.countUpdates
 		}
 	}

Modules/WindowTitle.qml

@@ -9,22 +9,32 @@ Item {
 	id: root
 
 	required property var bar
-	property color colour: DynamicColors.palette.m3primary
+	property color color: DynamicColors.palette.m3primary
 	property Title current: text1
+	required property bool horizontal
 	// readonly property int maxWidth: 300
-	readonly property int maxWidth: {
+	readonly property int maxSize: {
-		const otherModules = bar.children.filter(c => c.enabled && c.id && c.item !== this && c.id !== "spacer");
+		const otherModules = bar.children.filter(c => c.enabled && c.entryId && c.item !== this && c.entryId !== "spacer");
-		const otherWidth = otherModules.reduce((acc, curr) => {
+		const otherSize = otherModules.reduce((acc, curr) => acc + (horizontal ? (curr.item?.nonAnimWidth ?? curr.width ?? 0) : (curr.item.nonAnimHeight ?? curr.height ?? 0)), 0);
-			return acc + (curr.item?.nonAnimWidth ?? curr.width ?? 0);
+		return horizontal ? bar.width - otherSize - bar.spacing * (bar.children.length - 1) - bar.vPadding * 2 : bar.height - otherSize - bar.vPadding * (bar.children.length - 1) - bar.vPadding * 4;
-		}, 0);
-		return bar.width - otherWidth - bar.spacing * (bar.children.length - 1) - bar.vPadding * 2;
 	}
 
+	anchors.centerIn: parent
 	clip: true
-	implicitHeight: current.implicitHeight
+	implicitHeight: horizontal ? current.implicitHeight : current.implicitWidth + current.anchors.topMargin
-	implicitWidth: Math.min(current.implicitWidth, root.maxWidth)
+	implicitWidth: horizontal ? Math.min(current.implicitWidth, root.maxSize) : current.implicitHeight + current.anchors.topMargin
 
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+			duration: MaterialEasing.expressiveEffectsTime
+			easing.bezierCurve: MaterialEasing.expressiveEffects
+		}
+	}
 	Behavior on implicitWidth {
+		enabled: root.horizontal
+
 		Anim {
 			duration: MaterialEasing.expressiveEffectsTime
 			easing.bezierCurve: MaterialEasing.expressiveEffects
@@ -33,19 +43,17 @@ Item {
 
 	Title {
 		id: text1
-
 	}
 
 	Title {
 		id: text2
-
 	}
 
 	TextMetrics {
 		id: metrics
 
 		elide: Qt.ElideRight
-		elideWidth: root.maxWidth
+		elideWidth: root.maxSize - (root.horizontal ? root.current.anchors.leftMargin : 0)
 		font.family: "Rubik"
 		font.pointSize: Appearance.font.size.normal
 		text: Hypr.activeToplevel?.title ?? qsTr("Desktop")
@@ -61,18 +69,32 @@ Item {
 	component Title: CustomText {
 		id: text
 
-		anchors.leftMargin: 7
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
-		anchors.verticalCenter: parent.verticalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
-		color: root.colour
+		anchors.leftMargin: root.horizontal ? Appearance.spacing.small : 0
+		anchors.top: root.horizontal ? undefined : parent.top
+		anchors.topMargin: root.horizontal ? 0 : Appearance.spacing.small
+		anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+		color: root.color
 		font.family: metrics.font.family
 		font.pointSize: metrics.font.pointSize
-		height: implicitHeight
+		height: root.horizontal ? implicitHeight : implicitWidth
 		opacity: root.current === this ? 1 : 0
-		width: implicitWidth
+		width: root.horizontal ? implicitWidth : implicitHeight
 
 		Behavior on opacity {
 			Anim {
 			}
 		}
+		transform: [
+			Translate {
+				x: !root.horizontal ? -text.implicitWidth + text.implicitHeight : 0
+			},
+			Rotation {
+				angle: root.horizontal ? 0 : 270
+				origin.x: text.implicitHeight / 2
+				origin.y: text.implicitHeight / 2
+			}
+		]
 	}
 }

Modules/Workspaces.qml

@@ -13,41 +13,57 @@ Item {
 
 	property real activeWorkspaceMargin: Math.ceil(Appearance.padding.small / 2)
 	readonly property int effectiveActiveWorkspaceId: monitor?.activeWorkspace?.id ?? 1
+	required property bool horizontal
 	readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
 	required property ShellScreen screen
-	property int workspaceButtonWidth: bgRect.implicitHeight - root.activeWorkspaceMargin * 2
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smaller * 2
+	readonly property real size: (workspaceButtonWidth * workspacesShown) + activeWorkspaceMargin * 2
+	property int workspaceButtonWidth: (horizontal ? bgRect.implicitHeight : bgRect.implicitWidth) - root.activeWorkspaceMargin * 2
 	property int workspaceIndexInGroup: (effectiveActiveWorkspaceId - 1) % root.workspacesShown
 	readonly property list<var> workspaces: Hyprland.workspaces.values.filter(w => w.monitor === root.monitor)
 	readonly property int workspacesShown: workspaces.length
 
-	height: implicitHeight
+	implicitHeight: horizontal ? shortSize : size
-	implicitHeight: Config.bar.height + Appearance.padding.smaller * 2
+	implicitWidth: horizontal ? size : shortSize
-	implicitWidth: (root.workspaceButtonWidth * root.workspacesShown) + root.activeWorkspaceMargin * 2
 
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
 	Behavior on implicitWidth {
+		enabled: root.horizontal
+
 		Anim {
 		}
 	}
 
 	CustomRect {
+		// qmllint disable Quick.anchor-combinations
 		id: bgRect
 
-		anchors.left: parent.left
+		anchors.bottom: root.horizontal ? undefined : parent.bottom
-		anchors.right: parent.right
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
-		anchors.verticalCenter: parent.verticalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
+		anchors.right: root.horizontal ? parent.right : undefined
+		anchors.top: root.horizontal ? undefined : parent.top
+		anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.implicitHeight - ((Appearance.padding.small - 1) * 2)
+		implicitHeight: root.horizontal ? root.implicitHeight - ((Appearance.padding.small - 1) * 2) : 0
+		implicitWidth: root.horizontal ? 0 : root.implicitWidth - ((Appearance.padding.small - 1) * 2)
 		radius: height / 2
 
+		// qmllint enable Quick.anchor-combinations
 		Grid {
 			id: grid
 
 			anchors.fill: parent
 			anchors.margins: root.activeWorkspaceMargin
 			columnSpacing: 0
-			columns: root.workspacesShown
+			columns: root.horizontal ? root.workspacesShown : 1
 			rowSpacing: 0
-			rows: 1
+			rows: root.horizontal ? 1 : root.workspacesShown
 
 			Repeater {
 				model: root.workspaces
@@ -93,13 +109,15 @@ Item {
 			property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceMargin
 			property real indicatorThickness: root.workspaceButtonWidth
 
-			anchors.verticalCenter: parent.verticalCenter
+			anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+			anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
 			clip: true
 			color: DynamicColors.palette.m3primary
-			implicitHeight: indicatorThickness
+			implicitHeight: root.horizontal ? indicatorThickness : indicatorLength
-			implicitWidth: indicatorLength
+			implicitWidth: root.horizontal ? indicatorLength : indicatorThickness
 			radius: Appearance.rounding.full
-			x: indicatorPosition
+			x: root.horizontal ? indicatorPosition : 0
+			y: root.horizontal ? 0 : indicatorPosition
 
 			AnimatedTabIndexPair {
 				id: idxPair
@@ -113,7 +131,8 @@ Item {
 				implicitWidth: grid.width
 				source: grid
 				sourceColor: DynamicColors.palette.m3onSurface
-				x: -indicator.x + 3
+				x: root.horizontal ? -indicator.x + 3 : 0
+				y: root.horizontal ? 0 : -indicator.y + 3
 			}
 		}
 	}