Merge pull request 'i5' (#6) from i5 into main

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

components/header.js

@@ -1,20 +1,29 @@
 export class Header extends HTMLElement {
+  icons = {
+    menu: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+    </svg>`,
+    dot: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+  <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+</svg>`,
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
-    this.addButton('=', () => {
+    this.addButton(this.icons.menu, () => {
       this.menu.pages = this.getPages()
       this.menuPanel.classList.add('open')
       this.overlay.classList.add('open')
     })
     this.addDivider()
-    this.addButton('-')
+    this.addButton(this.icons.dot)
     this.addMenu()
   }
 
-  addButton(text, onClick) {
+  addButton(html, onClick) {
     const b = document.createElement('button')
-    b.innerText = text
+    b.innerHTML = html
     this.shadowRoot.appendChild(b)
     if (onClick) {
       b.addEventListener('click', onClick)
@@ -68,7 +77,7 @@ export class Header extends HTMLElement {
         background: inherit;
         color: inherit;
         font-size: 24px;
-        width: 24px;
+        width: 30px;
       }
       div.divider {
         flex-grow: 1;

sw.js

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