sidebar: create dashboard

1 files changed, 34 insertions, 0 deletions

diff --git a/src/modules/sidebar/index.tsx b/src/modules/sidebar/index.tsx
new file mode 100644
index 0000000..3b62d82
--- /dev/null
+++ b/src/modules/sidebar/index.tsx
@@ -0,0 +1,34 @@
+import type { Monitor } from "@/services/monitors";
+import { bind, register, Variable } from "astal";
+import { App, Astal, Gtk, Widget } from "astal/gtk3";
+import Dashboard from "./dashboard";
+
+@register()
+export default class SideBar extends Widget.Window {
+    readonly shown: Variable<string> = Variable("dashboard");
+
+    constructor({ monitor }: { monitor: Monitor }) {
+        super({
+            application: App,
+            name: "sidebar",
+            namespace: "caelestia-sidebar",
+            monitor: monitor.id,
+            anchor: Astal.WindowAnchor.LEFT | Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM,
+            exclusivity: Astal.Exclusivity.EXCLUSIVE,
+            // visible: false,
+        });
+
+        this.add(
+            <box vertical className="sidebar">
+                <stack
+                    vexpand
+                    transitionType={Gtk.StackTransitionType.SLIDE_UP_DOWN}
+                    transitionDuration={200}
+                    shown={bind(this.shown)}
+                >
+                    <Dashboard />
+                </stack>
+            </box>
+        );
+    }
+}