*: Added media queries to make it less awful on mobile.

2018-11-01 20:56:24 +01:00
parent b57873091b
commit a8f4d68f1e
19 changed files with 93 additions and 13 deletions
@@ -3,9 +3,14 @@ module.exports = class {
    this.state = {
      loggingIn: false,
      loggingOut: false,
+      enabled: false,
    }
  }

+  toggleEnabled() {
+    this.state.enabled = !this.state.enabled
+  }
+
  loginClicked() {
    this.state.loggingIn = true
  }
@@ -1,5 +1,7 @@
-<div class="menu">
+<div class=["menu", state.enabled ? "enabled" : "disabled"]>
  <div class="menu-body">
+    <menu-link icon=(state.enabled ? "<" : ">") on-click("toggleEnabled") class="showhide">${state.enabled ? "Hide Menu" : "Show Menu"}</menu-link>
+    <menu-gap class="showhide" />
    <include(input.renderBody) />
  </div>
  <if(input.user != null)>
@@ -12,4 +12,28 @@
  user-select: none;
  overflow-x: hidden;
  overflow-y: auto;
+
+  .showhide {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .menu.disabled {
+    .menu-link, .menu-header, .menu-blurb, .menu-gap {
+      display: none;
+    }
+  }
+
+  .showhide {
+    display: block !important;
+  }
+
+  .menu {
+    position: static;
+    width: 100%;
+    box-sizing: border-box;
+    margin-left: -0.25ch;
+    font-size: 1.25em;
+  }
 }