feat: add click event to glazewm template

packages/desktop/resources/sample-config.yaml

@@ -18,7 +18,7 @@ window/bar:
   # Width of the window in physical pixels.
   width: '{{ self.args.MONITOR_WIDTH }}'
   # Height of the window in physical pixels.
-  height: '45'
+  height: '40'
   # X-position of the window in physical pixels.
   position_x: '{{ self.args.MONITOR_X }}'
   # Y-position of the window in physical pixels.
@@ -35,21 +35,26 @@ window/bar:
   # for a cheatsheet of available Nerdfonts icons.
   global_styles: |
     @import "https://www.nerdfonts.com/assets/css/webfont.css";
-  # CSS/SCSS styles to apply to the root element within the window.
+  # CSS/SCSS styles to apply to the root element within the window. Using
+  # CSS nesting, we can also target nested elements (e.g. below we set the
+  # color and margin-right of icons).
   styles: |
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
     height: 100%;
     color: #ffffffe6;
     font-family: ui-monospace, monospace;
-    font-size: 13px;
+    font-size: 12px;
     padding: 4px 24px;
     border-bottom: 1px solid #ffffff08;
-    background: linear-gradient(
-      rgba(14, 14, 28, 0.95),
-      rgba(26, 14, 28, 0.85),
-    );
+    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(4, 1, 18, 0.85));
+
+    i {
+      color: #7481b2e1;
+      margin-right: 7px;
+    }
+
   group/left:
     styles: |
       display: flex;
@@ -76,6 +81,10 @@ window/bar:
           border-radius: 2px;
         }
       providers: ['glazewm']
+      events:
+        - type: 'click'
+          fn_path: 'script.js#invokeMe'
+          selector: '.workspace'
       template: |
         @for (workspace of glazewm.workspacesOnMonitor) {
           <button class="workspace">{{ workspace.name }}</button>
@@ -100,11 +109,6 @@ window/bar:
         margin-left: 20px;
       }
 
-      i {
-        color: #7481b2e1;
-        margin-right: 7px;
-      }
-
     template/network:
       providers: ['network']
       template: |