1 files changed, 84 insertions, 0 deletions
diff --git a/examples/gtk4/simple-bar/js/src/ui/Bar.blp b/examples/gtk4/simple-bar/js/src/ui/Bar.blp
new file mode 100644
index 0000000..6e401e7
--- /dev/null
+++ b/examples/gtk4/simple-bar/js/src/ui/Bar.blp
@@ -0,0 +1,84 @@
+using Gtk 4.0;
+using Astal 4.0;
+
+template $Bar: Astal.Window {
+    CenterBox centerbox {
+        start-widget: Box {
+            MenuButton {
+                Label {
+                    label: bind template.clock;
+                }
+
+                popover: Popover popover {
+                    Calendar calendar {
+                        show-day-names: true;
+                        show-heading: true;
+                        show-week-numbers: true;
+                    }
+                };
+            }
+        };
+
+        center-widget: Box {
+            Box {
+                visible: bind template.mpris-visible;
+
+                Image {
+                    file: bind template.mpris-art;
+                }
+
+                Label {
+                    label: bind template.mpris-label;
+                }
+            }
+        };
+
+        end-widget: Box {
+            spacing: 4;
+
+            Image {
+                visible: bind template.bluetooth-visible;
+                icon-name: "bluetooth-symbolic";
+            }
+
+            Image {
+                icon-name: bind template.power-profile-icon;
+            }
+
+            Image {
+                icon-name: bind template.network-icon;
+            }
+
+            Box {
+                Image {
+                    icon-name: bind template.volume-icon;
+                }
+
+                Scale {
+                    width-request: 100;
+                    change-value => $change_volume();
+
+                    adjustment: Adjustment {
+                        value: bind template.volume;
+                        lower: 0;
+                        upper: 1;
+                    };
+                }
+            }
+
+            Box {
+                Image {
+                    icon-name: bind template.battery-icon;
+                }
+
+                Label {
+                    label: bind template.battery-label;
+                }
+            }
+
+            Box traybox {
+                spacing: 4;
+            }
+        };
+    }
+}