From a3ef488434bf399ef93d065c1c25b4216bfc60e6 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Wed, 27 Aug 2025 11:16:07 -0400
Subject: [PATCH] styled drawer

---
 components/StyledDrawer.qml     | 26 ++++++++++
 modules/storybook/Storybook.qml | 90 ++++++++++++++++++++++++++++++---
 2 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 components/StyledDrawer.qml

diff --git a/components/StyledDrawer.qml b/components/StyledDrawer.qml
new file mode 100644
index 0000000..aae1b15
--- /dev/null
+++ b/components/StyledDrawer.qml
@@ -0,0 +1,26 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Drawer {
+    id: control
+    dim: false
+    background: Rectangle {
+        Component.onCompleted: {
+            if (control.edge == Qt.TopEdge) {
+                bottomLeftRadius = 8;
+                bottomRightRadius = 8;
+            } else if (control.edge == Qt.LeftEdge) {
+                topRightRadius = 8;
+                bottomRightRadius = 8;
+            } else if (control.edge == Qt.RightEdge) {
+                topLeftRadius = 8;
+                bottomLeftRadius = 8;
+            } else if (control.edge == Qt.BottomEdge) {
+                topLeftRadius = 8;
+                topRightRadius = 8;
+            }
+        }
+        color: Theme.palette.base200
+    }
+}
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index a7df0ee..08f9538 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -26,6 +26,8 @@ StyledWindow {
         id: rect
 
         color: Theme.palette.base300
+        implicitWidth: 800
+        implicitHeight: 1200
         leftMargin: 48
         rightMargin: 48
         topMargin: 24
@@ -41,15 +43,89 @@ StyledWindow {
         }
 
         ColumnLayout {
-            StyledSwitch {}
-            Button {
-                id: toolTipButton
-                text: "Hello world!"
-                StyledToolTip {
-                    visible: toolTipButton.hovered
-                    text: qsTr("Save the active project")
+
+            spacing: 12
+
+            ColumnLayout {
+                StyledText {
+                    text: "Switch"
+                    font.pixelSize: 18
+                }
+                StyledSwitch {}
+            }
+
+            ColumnLayout {
+                StyledText {
+                    text: "ToolTip"
+                    font.pixelSize: 18
+                }
+                Button {
+                    id: toolTipButton
+                    text: "Hello world!"
+                    StyledToolTip {
+                        visible: toolTipButton.hovered
+                        text: qsTr("Save the active project")
+                    }
+                }
+            }
+
+            ColumnLayout {
+                StyledText {
+                    text: "Drawer"
+                    font.pixelSize: 18
+                }
+                RowLayout {
+                    Button {
+                        text: "Top"
+                        onClicked: {
+                            drawer.x = root.width / 2 - drawer.width / 2;
+                            drawer.y = 0;
+                            drawer.edge = Qt.TopEdge;
+                            drawer.open();
+                        }
+                    }
+                    Button {
+                        text: "Left"
+                        onClicked: {
+                            drawer.y = root.height / 2 - drawer.height / 2;
+                            drawer.x = 0;
+                            drawer.edge = Qt.LeftEdge;
+                            drawer.open();
+                        }
+                    }
+                    Button {
+                        text: "Right"
+                        onClicked: {
+                            drawer.y = root.height / 2 - drawer.height / 2;
+                            drawer.x = 0;
+                            drawer.edge = Qt.RightEdge;
+                            drawer.open();
+                        }
+                    }
+                    Button {
+                        text: "Bottom"
+                        onClicked: {
+                            drawer.x = root.width / 2 - drawer.width / 2;
+                            drawer.y = 0;
+                            drawer.edge = Qt.BottomEdge;
+                            drawer.open();
+                        }
+                    }
                 }
             }
         }
     }
+
+    StyledDrawer {
+        id: drawer
+        edge: Qt.TopEdge
+        width: 400
+        height: 200
+        Button {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Close"
+            onClicked: drawer.close()
+        }
+    }
 }