Actualizar 'components/header.js'

components/header.js

@@ -11,19 +11,24 @@ export class Header extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
-    this.addButton(this.icons.menu, () => {
+    this.addButton(this.icons.menu, 'nav', () => {
       this.menu.pages = this.getPages()
       this.menuPanel.classList.add('open')
       this.overlay.classList.add('open')
     })
     this.addDivider()
-    this.addButton(this.icons.dot)
+    this.addButton(this.icons.dot, 'page', () => {
+      this.pageMenuPanel.classList.add('open')
+      this.overlay.classList.add('open')
+    })
     this.addMenu()
+    this.addPageMenu()
   }
 
-  addButton(html, onClick) {
+  addButton(html, cls, onClick) {
     const b = document.createElement('button')
     b.innerHTML = html
+    b.classList.add(cls)
     this.shadowRoot.appendChild(b)
     if (onClick) {
       b.addEventListener('click', onClick)
@@ -53,6 +58,12 @@ export class Header extends HTMLElement {
     })
   }
 
+  addPageMenu() {
+    this.pageMenuPanel = document.createElement('div')
+    this.pageMenuPanel.classList.add('pageMenu')
+    this.shadowRoot.appendChild(this.pageMenuPanel)
+  }
+
   close() {
     this.overlay.classList.add('closing')
     this.overlay.classList.remove('open')
@@ -111,6 +122,17 @@ export class Header extends HTMLElement {
         left: 0;
         opacity: 15%;
       }
+      button.pageButton {
+        position: relative;
+      }
+      div.pageMenuPanel {
+        bottom: 0px:
+        right: 0px;
+        display: none;
+      }
+      div.pageMenuPanel.open {
+        display: block;
+      }
     `
     this.shadowRoot.append(style)
   }