Add button, dialog positioning

components/dialog.js

@@ -32,7 +32,7 @@ export class Dialog extends HTMLElement {
     style.textContent = `
       dialog {
         margin-top: 120px;
-        min-width: 80%;
+        min-width: 200px;
         border: 1px solid rgba(0, 0, 0, 0.3);
         border-radius: 6px;
         box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);

components/layout.js

@@ -4,7 +4,6 @@ export class Layout extends HTMLElement {
     this.attachShadow({mode: 'open'})
     this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
     this.header = document.createElement('m-header')
-    this.editing = false
   }
 
   connectedCallback() {
@@ -45,14 +44,19 @@ export class Layout extends HTMLElement {
   }
 
   get path() {
-    return new URL(
+    const hash = (
-      window.location.hash.slice(1) || '/',
+      window.location.hash.slice(1) || '/'
+    )
+    return hash.startsWith('/') ? new URL(
+      hash,
       window.location
-    ).pathname.replace(/^%23/, '#')
+    ).pathname : hash
   }
 
   set editing(value) {
-    this._editing = value
+    sessionStorage.setItem(
+      'editing', value ? 'true' : 'false'
+    )
     this.header.editing = this.editing
     if (this.page) {
       this.page.editing = this.editing
@@ -60,6 +64,12 @@ export class Layout extends HTMLElement {
   }
 
   get editing() {
-    return this._editing
+    try {
+      return (
+        sessionStorage.getItem('editing') === 'true'
+      )
+    } catch (e) {
+      return false
+    }
   }
 }

components/nav-menu.js

@@ -29,7 +29,7 @@ export class NavMenu extends HTMLElement {
       }
       a {
         display: block;
-        margin: 5px 10px;
+        margin: 8px 10px;
       }
     `
     this.shadowRoot.append(style)
@@ -79,7 +79,7 @@ export class NavMenu extends HTMLElement {
   renderPageList() {
     const els = this.pages.map(page => {
       const el = document.createElement('a')
-      el.href = `#${page}`
+      el.href = `#${page.replace(/^#/, '%23')}`
       el.innerText = page
       el.classList.add('page')
       return el

components/page.js

@@ -154,6 +154,7 @@ export class Page extends HTMLElement {
       if (this.editing) {
         classes.add('editing')
         classes.remove('viewing')
+        this.textArea.focus()
       } else {
         classes.add('viewing')
         classes.remove('editing')