Merge pull request #195 from opf/58256-header-and-sidebar-menu-should…

…-be-hidden-while-pressing-zen-mode-button- [58256] header and sidebar menu should be hidden while pressing zen mode button
opf · Oct 24, 2024 · 9f66ea9 · 9f66ea9
2 parents a18340c + 2cc6cb7
commit 9f66ea9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/three-cooks-ring.md b/.changeset/three-cooks-ring.md
@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+[58256] Add a click event listener for the button so we can listen to this event and make whatever changes that we want
diff --git a/app/components/primer/open_project/zen_mode_button.ts b/app/components/primer/open_project/zen_mode_button.ts
@@ -5,6 +5,17 @@ class ZenModeButtonElement extends HTMLElement {
   @target button: HTMLElement
   inZenMode = false
 
+  dispatchZenModeStatus() {
+    // Create a new custom event
+    const event = new CustomEvent('zenModeToggled', {
+      detail: {
+        active: this.inZenMode,
+      },
+    })
+    // Dispatch the custom event
+    window.dispatchEvent(event)
+  }
+
   private deactivateZenMode() {
     this.inZenMode = false
     this.button.setAttribute('aria-pressed', 'false')
@@ -27,6 +38,7 @@ class ZenModeButtonElement extends HTMLElement {
     } else {
       this.activateZenMode()
     }
+    this.dispatchZenModeStatus()
   }
 }