ui: hide delete-account behind a header hamburger menu

static/app.js

@@ -230,8 +230,14 @@ function showPlayOverlay(v) {
     lo.style.display = ""; lo.onclick = async () => {
       await fetch(BASE + "logout", {method: "POST"}); location.href = BASE + "login";
     };
+    const mb = document.getElementById("menubox");
+    mb.style.display = "";
+    document.getElementById("menu").onclick = e => {
+      e.stopPropagation(); mb.classList.toggle("open");
+    };
+    document.addEventListener("click", () => mb.classList.remove("open"));
     const da = document.getElementById("delacct");
-    da.style.display = ""; da.onclick = async () => {
+    da.onclick = async () => {
       if (!confirm("Delete your account and watch history?")) return;
       await fetch(BASE + "account/delete", {method: "POST"}); location.href = BASE + "login";
     };

static/index.html

@@ -14,7 +14,12 @@
   </form>
   <span id="me" class="muted"></span>
   <button id="logout" class="tiny" style="display:none">logout</button>
-  <button id="delacct" class="tiny danger" style="display:none">delete</button>
+  <div id="menubox" style="display:none">
+    <button id="menu" class="tiny" aria-label="menu" aria-haspopup="true">☰</button>
+    <div id="menu-items">
+      <button id="delacct" class="tiny danger">delete account</button>
+    </div>
+  </div>
 </header>
 <main id="main"><p class="muted">Search for an anime to get started.</p></main>
 <script src="hls.min.js"></script>

static/style.css

@@ -9,6 +9,12 @@ header form { flex: 1; max-width: 420px; }
 button.tiny { padding: .2rem .55rem; font-size: .8rem; border-radius: 6px;
   border: 1px solid var(--bd); background: var(--card); color: var(--fg); cursor: pointer; }
 button.tiny.danger { border-color: #7f1d1d; color: #f87171; }
+#menubox { position: relative; }
+#menu-items { display: none; position: absolute; right: 0; top: calc(100% + 4px);
+  background: var(--card); border: 1px solid var(--bd); border-radius: 8px;
+  padding: .35rem; min-width: 160px; z-index: 2; }
+#menubox.open #menu-items { display: block; }
+#menu-items button { display: block; width: 100%; text-align: left; margin-top: .15rem; }
 header #me { margin-left: auto; }
 #q { width: 100%; padding: 0.5rem 0.8rem; border-radius: 8px; border: 1px solid var(--bd);
   background: var(--card); color: var(--fg); }