From 36f617d57c26c8e1889669618f715c8ecbf7cce4 Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Fri, 10 Feb 2023 12:26:11 +0100
Subject: [PATCH 1/2] :bug: inspect eventlisteners and fix bubbling of dialog
 focus-trap

---
 .../js/components/header/header.js            | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/open_inwoner/js/components/header/header.js b/src/open_inwoner/js/components/header/header.js
index 5a7eaf78a3..529a5e03ad 100644
--- a/src/open_inwoner/js/components/header/header.js
+++ b/src/open_inwoner/js/components/header/header.js
@@ -25,9 +25,16 @@ class Header extends Component {
    * Callbacks should trigger `setState` which in turn triggers `render`.
    */
   bindEvents() {
-    this.node.addEventListener('click', () =>
-      this.setState({ open: !this.state.open })
-    )
+    this.node.addEventListener('keyup', this.onKeyUp.bind(this))
+    this.node.addEventListener('click', (e) => {
+      console.log('click in bindEvents')
+      if (
+        e.target.matches('.header__button') ||
+        e.target.matches('.header__button *')
+      ) {
+        this.setState({ open: !this.state.open })
+      }
+    })
   }
 
   /**
@@ -35,6 +42,7 @@ class Header extends Component {
    * @returns {HTMLButtonElement}
    */
   getButton() {
+    console.log('getButton')
     return BEM.getChildBEMNode(this.node, BLOCK_HEADER, ELEMENT_BUTTON)
   }
   /**
@@ -42,8 +50,19 @@ class Header extends Component {
    * @returns {HTMLDialogElement}
    */
   getSubMenu() {
+    console.log('getSubMenu')
     return BEM.getChildBEMNode(this.node, BLOCK_HEADER, ELEMENT_SUBMENU)
   }
+  /**
+   * Gets called when a key is released.
+   * If key is escape key, explicitly close the mobile menu.
+   * @param {KeyboardEvent} event
+   */
+  onKeyUp(event) {
+    if (event.key === 'Escape') {
+      this.setState({ open: false })
+    }
+  }
 
   /**
    * Persists state to DOM.
@@ -51,10 +70,14 @@ class Header extends Component {
    * @param {Object} state State to render.
    */
   render(state) {
+    console.log('render', state)
     document.body.classList.add('body')
     BEM.toggleModifier(document.body, MODIFIER_OPEN, state.open)
     BEM.toggleModifier(this.getButton(), MODIFIER_OPEN, state.open)
-    state.open ? this.getSubMenu().showModal() : this.getSubMenu().close()
+
+    if (matchMedia('(max-width: 767px)').matches) {
+      state.open ? this.getSubMenu().show() : this.getSubMenu().close()
+    }
 
     if (state.open) {
       window.scrollTo({ x: 0, y: 0 })

From c33434d4e6001c8dd3504f2f084055b71762c66b Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Fri, 10 Feb 2023 12:49:06 +0100
Subject: [PATCH 2/2] :art: clean up console logs

---
 src/open_inwoner/js/components/header/header.js     | 4 ----
 src/open_inwoner/scss/components/Header/Header.scss | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/open_inwoner/js/components/header/header.js b/src/open_inwoner/js/components/header/header.js
index 529a5e03ad..4b87f692eb 100644
--- a/src/open_inwoner/js/components/header/header.js
+++ b/src/open_inwoner/js/components/header/header.js
@@ -27,7 +27,6 @@ class Header extends Component {
   bindEvents() {
     this.node.addEventListener('keyup', this.onKeyUp.bind(this))
     this.node.addEventListener('click', (e) => {
-      console.log('click in bindEvents')
       if (
         e.target.matches('.header__button') ||
         e.target.matches('.header__button *')
@@ -42,7 +41,6 @@ class Header extends Component {
    * @returns {HTMLButtonElement}
    */
   getButton() {
-    console.log('getButton')
     return BEM.getChildBEMNode(this.node, BLOCK_HEADER, ELEMENT_BUTTON)
   }
   /**
@@ -50,7 +48,6 @@ class Header extends Component {
    * @returns {HTMLDialogElement}
    */
   getSubMenu() {
-    console.log('getSubMenu')
     return BEM.getChildBEMNode(this.node, BLOCK_HEADER, ELEMENT_SUBMENU)
   }
   /**
@@ -70,7 +67,6 @@ class Header extends Component {
    * @param {Object} state State to render.
    */
   render(state) {
-    console.log('render', state)
     document.body.classList.add('body')
     BEM.toggleModifier(document.body, MODIFIER_OPEN, state.open)
     BEM.toggleModifier(this.getButton(), MODIFIER_OPEN, state.open)
diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss
index eba10e7f5d..ec54d18b76 100644
--- a/src/open_inwoner/scss/components/Header/Header.scss
+++ b/src/open_inwoner/scss/components/Header/Header.scss
@@ -121,7 +121,7 @@ $vm: var(--spacing-large);
     z-index: 2;
 
     @media (min-width: 768px) {
-      display: block;
+      display: none;
     }
   }
   &__submenu::backdrop {