Merge pull request 'i3' (#4) from i3 into main

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/4

components/header.js

@@ -37,13 +37,20 @@ export class Header extends HTMLElement {
     this.menuPanel.appendChild(this.menu)
     this.shadowRoot.appendChild(this.menuPanel)
     this.overlay.addEventListener('click', () => {
-      this.overlay.classList.add('closing')
+      this.close()
-      this.overlay.classList.remove('open')
-      this.menuPanel.classList.remove('open')
-      setTimeout(() => {
-        this.overlay.classList.remove('closing')
-      }, 250)
     })
+    this.menu.addEventListener('close', () => {
+      this.close()
+    })
+  }
+
+  close() {
+    this.overlay.classList.add('closing')
+    this.overlay.classList.remove('open')
+    this.menuPanel.classList.remove('open')
+    setTimeout(() => {
+      this.overlay.classList.remove('closing')
+    }, 250)
   }
 
   connectedCallback() {

components/nav-menu.js

@@ -32,6 +32,13 @@ export class NavMenu extends HTMLElement {
     this.pageList = document.createElement('div')
     this.shadowRoot.append(this.pageList)
     this.renderPageList()
+    this.shadowRoot.addEventListener('click', e => {
+      if (e.target.classList.contains('page')) {
+        this.dispatchEvent(new CustomEvent(
+          'close', {bubbles: true}
+        ))
+      }
+    })
   }
 
   get language() {

sw.js

@@ -1,7 +1,7 @@
 async function initCache() {
   const cache = await caches.open('v1')
   await cache.addAll([
-    '/', //6
+    '/', //7
     '/index.html',
     '/app.js',
     '/components/page.js',