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 }
+
+      }
+    }
+  }
+}