Actualizar 'components/header.js'

components/header.js

@@ -3,7 +3,8 @@ export class Header extends HTMLElement {
     super()
     this.attachShadow({mode: 'open'})
     this.addButton('=', () => {
-      this.menu.classList.add('open')
+      this.menu.pages = this.getPages()
+      this.menuPanel.classList.add('open')
       this.overlay.classList.add('open')
     })
     this.addDivider()
@@ -30,15 +31,15 @@ export class Header extends HTMLElement {
     this.overlay = document.createElement('div')
     this.overlay.classList.add('overlay')
     this.shadowRoot.appendChild(this.overlay)
-    this.menu = document.createElement('div')
+    this.menuPanel = document.createElement('div')
-    this.menu.classList.add('menu')
+    this.menuPanel.classList.add('menu')
-    const menuContent = document.createElement('m-nav-menu')
+    this.menu = document.createElement('m-nav-menu')
-    this.menu.appendChild(menuContent)
+    this.menuPanel.appendChild(this.menu)
-    this.shadowRoot.appendChild(this.menu)
+    this.shadowRoot.appendChild(this.menuPanel)
     this.overlay.addEventListener('click', () => {
       this.overlay.classList.add('closing')
       this.overlay.classList.remove('open')
-      this.menu.classList.remove('open')
+      this.menuPanel.classList.remove('open')
       setTimeout(() => {
         this.overlay.classList.remove('closing')
       }, 250)
@@ -53,7 +54,7 @@ export class Header extends HTMLElement {
         background: #111;
         color: #ddd;
         display: flex;
-        direction: row;
+        flex-direction: row;
       }
       button {
         border: none;
@@ -97,4 +98,8 @@ export class Header extends HTMLElement {
     `
     this.shadowRoot.append(style)
   }
+
+  getPages() {
+    return Object.keys(localStorage).slice().sort()
+  }
 }