Actualizar 'components/header.js'

components/header.js

@@ -59,8 +59,29 @@ export class Header extends HTMLElement {
   }
 
   addPageMenu() {
+    this.pageMenu = document.createElement('m-page-menu')
+    this.pageMenu.add('download', () => {
+      const text = localStorage.getItem(this.path)
+      const sp = this.path.split('/')
+      const filename = sp[sp.length - 1]
+      const el = document.createElement('a')
+      el.setAttribute(
+        'href',
+        'data:text/plain;charset=utf-8,' +
+        encodeURIComponent(text)
+      )
+      el.setAttribute('download', filename)
+      el.style.display = 'none'
+      this.shadowRoot.appendChild(el)
+      el.click()
+      this.shadowRoot.removeChild(el)
+    })
+    this.pageMenu.addEventListener('close', () => {
+      this.close()
+    })
     this.pageMenuPanel = document.createElement('div')
-    this.pageMenuPanel.classList.add('pageMenu')
+    this.pageMenuPanel.appendChild(this.pageMenu)
+    this.pageMenuPanel.classList.add('page-menu')
     this.shadowRoot.appendChild(this.pageMenuPanel)
   }
 
@@ -68,6 +89,7 @@ export class Header extends HTMLElement {
     this.overlay.classList.add('closing')
     this.overlay.classList.remove('open')
     this.menuPanel.classList.remove('open')
+    this.pageMenuPanel.classList.remove('open')
     setTimeout(() => {
       this.overlay.classList.remove('closing')
     }, 250)
@@ -122,15 +144,19 @@ export class Header extends HTMLElement {
         left: 0;
         opacity: 15%;
       }
-      button.pageButton {
+      button.page {
         position: relative;
       }
-      div.pageMenuPanel {
-        bottom: 0px:
-        right: 0px;
+      div.page-menu {
+        position: fixed;
+        top: 28px;
+        right: 0;
+        display: flex;
+        align-items: flex-end;
+        margin-right: 0;
         display: none;
       }
-      div.pageMenuPanel.open {
+      div.page-menu.open {
         display: block;
       }
     `