Add SidePanel base

Modules/Bar/Bar.qml

@@ -39,9 +39,9 @@ PanelWindow {
       id: leftSection
       height: parent.height
       anchors.left: parent.left
-      anchors.leftMargin: Style.marginMedium * scaling
+      anchors.leftMargin: Style.marginSmall * scaling
       anchors.verticalCenter: parent.verticalCenter
-      spacing: Style.marginMedium * scaling
+      spacing: Style.marginSmall * scaling
 
       NText {
         text: screen.name
@@ -54,7 +54,7 @@ PanelWindow {
       height: parent.height
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
-      spacing: Style.marginMedium * scaling
+      spacing: Style.marginSmall * scaling
 
       Workspace {}
     }
@@ -63,9 +63,9 @@ PanelWindow {
       id: rightSection
       height: parent.height
       anchors.right: bar.right
-      anchors.rightMargin: Style.marginMedium * scaling
+      anchors.rightMargin: Style.marginSmall * scaling
       anchors.verticalCenter: bar.verticalCenter
-      spacing: Style.marginMedium * scaling
+      spacing: Style.marginSmall * scaling
 
       NText {
         text: "Right"
@@ -77,12 +77,24 @@ PanelWindow {
       }
 
       NIconButton {
-        id: demoPanelToggler
+        id: demoPanelToggle
         icon: "experiment"
+        fontPointSize: Style.fontSizeMedium
+        anchors.verticalCenter: parent.verticalCenter
         onClicked: function () {
           demoPanel.isLoaded = !demoPanel.isLoaded
         }
       }
+
+      NIconButton {
+        id: sidePanelToggle
+        icon: "widgets"
+        fontPointSize: Style.fontSizeMedium
+        anchors.verticalCenter: parent.verticalCenter
+        onClicked: function () {
+          sidePanel.isLoaded = !demoPanel.isLoaded
+        }
+      }
     }
   }
 }

Modules/SidePanel/SidePanel.qml

@@ -0,0 +1,40 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Wayland
+import qs.Services
+import qs.Widgets
+
+/*
+  An experiment/demo panel to tweaks widgets
+*/
+
+NLoader {
+  id: root
+
+  panel: Component {
+    NPanel {
+      id: sidePanel
+
+      readonly property real scaling: Scaling.scale(screen)
+
+      // Ensure panel shows itself once created
+      Component.onCompleted: show()
+
+      Rectangle {
+        color: Colors.backgroundPrimary
+        radius: Style.radiusMedium * scaling
+        border.color: Colors.backgroundTertiary
+        border.width: Math.min(1, Style.borderMedium * scaling)
+        width: 500 * scaling
+        height: 400
+        anchors.centerIn: parent
+
+        // Prevent closing when clicking in the panel bg
+        MouseArea { anchors.fill: parent }
+
+      }
+    }
+  }
+}

Widgets/NIconButton.qml

@@ -7,13 +7,16 @@ Rectangle {
   id: root
 
   readonly property real scaling: Scaling.scale(screen)
-  property real size: Style.baseWidgetSize * scaling
+  // Multiplier to control how large the button container is relative to Style.baseWidgetSize
+  property real sizeMultiplier: 0.8
+  property real size: Style.baseWidgetSize * sizeMultiplier * scaling
   property string icon
   property bool enabled: true
   property bool hovering: false
   property var onEntered: function () {}
   property var onExited: function () {}
   property var onClicked: function () {}
+  property real fontPointSize: Style.fontSizeXL
 
   implicitWidth: size
   implicitHeight: size
@@ -23,9 +26,11 @@ Rectangle {
 
   Text {
     anchors.centerIn: parent
+    anchors.horizontalCenterOffset: 0
+    anchors.verticalCenterOffset: 0
     text: root.icon
     font.family: "Material Symbols Outlined"
-    font.pointSize: Style.fontSizeXL * scaling
+    font.pointSize: root.fontPointSize * scaling
     color: root.hovering ? Colors.onAccent : Colors.textPrimary
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter

shell.qml

@@ -1,6 +1,6 @@
-
 // Disable reload popup
 //@ pragma Env QS_NO_RELOAD_POPUP=1
+
 import QtQuick
 import Quickshell
 import Quickshell.Io
@@ -8,10 +8,13 @@ import Quickshell.Widgets
 import qs.Modules.Bar
 import qs.Modules.DemoPanel
 import qs.Modules.Background
+import qs.Modules.SidePanel
+import qs.Services
 
 ShellRoot {
   id: root
 
+
   Variants {
     model: Quickshell.screens
 
@@ -26,4 +29,8 @@ ShellRoot {
   DemoPanel {
     id: demoPanel
   }
+
+  SidePanel {
+    id: sidePanel
+  }
 }