Allow the sidebar to be hidden

macrovision.css

@@ -79,6 +79,7 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
 }
 
 #options {
+    position: relative;
     min-width: 120pt;
     flex: 1 0 15vw;
     display: flex;
@@ -91,6 +92,11 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     scrollbar-color: #e1e1e1 #888;
 }
 
+#options.hidden {
+    min-width: 0pt;
+    flex: 0 1 0vw;
+}
+
 #options-attribution {
     display: none;
 }
@@ -581,4 +587,15 @@ body.toggle-height-bars .height-bar,
 
 body.toggle-bottom-cover .bottom-cover {
     display: inline-block;
+}
+
+.transitions {
+    transition: 0.2s all;
+}
+.rotate-forward {
+    transform: rotate(-90deg);
+}
+
+.rotate-backward {
+    transform: rotate(90deg);
 }

macrovision.html

@@ -59,6 +59,10 @@
   </div>
   <div id="menubar">
     <span class="menubar-group">
+      <button id="menu-toggle-sidebar">
+        <i class="fas fa-chevron-circle-down rotate-backward transitions"></i>
+        <span class="sr-only">Toggle Sidebar</span>
+      </button>
       <button id="menu-fullscreen">
         <i class="fas fa-compress" ></i>
         <span class="sr-only">Fullscreen</span>
@@ -115,7 +119,7 @@
     </span>
   </div>
   <div id="main-area">
-    <div id="options">
+    <div id="options" class="">
       <div class="options-header">World options</div>
       <span id="options-world">
         <div class="options-label">
@@ -227,7 +231,6 @@
         </span>
       </span>
       <a href="https://docs.google.com/forms/d/e/1FAIpQLScRC-okDZ3FtzDTkbqSrpj5_OGD-1Vl-VYizOK3QM6quus11g/viewform?usp=sf_link" class="options-banner">Submit your<br>character!</a>
-      
     </div>
     <div id="world">
       <input type="range" step="0.001" min="0" max="2" value="1" class="floating-slider" id="slider-scale"/>

macrovision.js

@@ -1003,6 +1003,21 @@ function toggleFullScreen() {
 document.addEventListener("DOMContentLoaded", () => {
     prepareEntities();
 
+    document.querySelector("#menu-toggle-sidebar").addEventListener("click", e => {
+        const sidebar = document.querySelector("#options");
+        if (sidebar.classList.contains("hidden")) {
+            sidebar.classList.remove("hidden");
+            e.target.classList.remove("rotate-forward");
+            e.target.classList.add("rotate-backward");
+            updateSizes();
+        } else {
+            sidebar.classList.add("hidden");
+            e.target.classList.add("rotate-forward");
+            e.target.classList.remove("rotate-backward");
+            updateSizes();
+        }
+    });
+
     document.querySelector("#menu-fullscreen").addEventListener("click", toggleFullScreen);
 
     document.querySelector("#options-show-extra").addEventListener("input", e => {