Show space

components/header.js

@@ -50,11 +50,12 @@ export class Header extends HTMLElement {
     this.appBar = document.createElement('div')
     this.appBar.classList.add('app-bar')
     this.shadowRoot.appendChild(this.appBar)
-    this.addButton(this.icons.menu, 'nav', () => {
-      this.menu.pages = this.getPages()
-      this.menuPanel.classList.add('open')
-      this.overlay.classList.add('open')
-    }).classList.add('left-end')
+    const navBtn = this.addButton(
+      this.icons.menu,
+      'nav',
+      () => this.openNav(),
+    )
+    navBtn.classList.add('left-end')
     this.addButton(this.icons.add, 'add', () => {
       this.addPage()
     })
@@ -194,6 +195,13 @@ export class Header extends HTMLElement {
     this.shadowRoot.appendChild(this.pageMenu)
   }
 
+  openNav() {
+    this.menu.pages = this.getPages()
+    this.menu.storageUse = this.getStorageUse()
+    this.menuPanel.classList.add('open')
+    this.overlay.classList.add('open')
+  }
+
   close() {
     this.overlay.classList.add('closing')
     this.overlay.classList.remove('open')
@@ -211,6 +219,16 @@ export class Header extends HTMLElement {
     )
   }
 
+  getStorageUse() {
+    let bytes = 0
+    const entries = Object.entries(localStorage)
+    for (const [k, v] of entries) {
+      bytes += k.length
+      bytes += v.length
+    }
+    return bytes / 10000000
+  }
+
   set editing(value) {
     this._editing = value
     if (this.editBtn) {

components/nav-menu.js

@@ -1,4 +1,17 @@
 export class NavMenu extends HTMLElement {
+  textByLang = {
+    en: {
+      pages: 'Pages',
+      localStorage: 'Local storage',
+      full: 'full',
+    },
+    es: {
+      pages: 'Páginas',
+      localStorage: 'Almacenamiento local',
+      full: 'lleno',
+    },
+  }
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
@@ -14,6 +27,7 @@ export class NavMenu extends HTMLElement {
         display: flex;
         flex-direction: column;
         color: #000;
+        height: 100dvh;
         max-height: 100dvh;
       }
       h1 {
@@ -32,15 +46,22 @@ export class NavMenu extends HTMLElement {
         display: block;
         margin: 8px 10px;
       }
+      .footer {
+        padding: 3px 5px;
+      }
     `
     this.shadowRoot.append(style)
     this.header = document.createElement('h1')
-    this.header.innerText = this.pagesText
+    this.header.innerText = this.text.pages
     this.shadowRoot.append(this.header)
     this.pageList = document.createElement('div')
     this.pageList.classList.add('page-list')
     this.shadowRoot.append(this.pageList)
     this.renderPageList()
+    this.footer = document.createElement('div')
+    this.footer.classList.add('footer')
+    this.shadowRoot.append(this.footer)
+    this.renderFooter()
     this.shadowRoot.addEventListener('click', e => {
       if (e.target.classList.contains('page')) {
         if (this.handleLinks) {
@@ -63,16 +84,15 @@ export class NavMenu extends HTMLElement {
 
   set language(language) {
     this._language = language
+    this.text = this.textByLang[
+      this.langEs ? 'es' : 'en'
+    ]
   }
 
   get langEs() {
     return /^es\b/.test(this.language)
   }
 
-  get pagesText() {
-    return this.langEs ? 'Páginas' : 'Pages'
-  }
-
   set pages(pages) {
     this._pages = pages
     if (this.pageList) {
@@ -94,4 +114,35 @@ export class NavMenu extends HTMLElement {
     })
     this.pageList.replaceChildren(...els)
   }
+
+  set storageUse(n) {
+    this._storageUse = n
+    if (this.footer) {
+      this.renderFooter()
+    }
+  }
+
+  get storageUse() {
+    return this._storageUse
+  }
+
+  renderFooter() {
+    if (this.storageUse !== undefined) {
+      const fmt = new Intl.NumberFormat(
+        this.language,
+        {
+          style: 'percent',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        },
+      )
+      this.footer.innerText = (
+        this.text.localStorage + ' ' +
+        fmt.format(
+          this.storageUse
+        ).replaceAll(/\s+/g, '') + ' ' +
+        this.text.full
+      )
+    }
+  }
 }