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

marko/components/content-list-item/style.less

@@ -7,6 +7,11 @@ tr.content-list-item {
     text-align: center;
     width: 2.5ch;
     outline: 0.05px solid;
+
+    @media screen and (max-width: 700px) {
+      width: 1.25ch;
+      font-size: 1.5em;
+    }    
   }
 
   > td.content {

marko/components/menu-gap/index.marko

@@ -1 +1 @@
-<div class="menu-gap"></div>
+<div class=["menu-gap", input.class]></div>

marko/components/menu-link/component.js

@@ -6,7 +6,7 @@ module.exports = class {
   }
 
   onInput(input) {
-    this.state.classes = ["menu-link", "color-menu"]
+    this.state.classes = ["menu-link", "color-menu"].concat(input.class)
 
     if (input.dark) {
       this.state.classes.push(input)

marko/components/menu/component.js

@@ -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
   }

marko/components/menu/index.marko

@@ -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)>

marko/components/menu/style.less

@@ -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;
+  }
 }