make sprite editor toggleable

Co-authored-by: Reimar <mail@reim.ar>

index.html

@@ -56,10 +56,6 @@
                     <div>
                         <button id="run-button">🏃 Run</button>
                     </div>
-
-                    <div>
-                        <button id="toggle-sprite-editor-button">🖼️ Toggle sprite editor</button>
-                    </div>
                 </div>
 
                 <section>
@@ -117,7 +113,11 @@ lib.startGameLoop(loop);
                 </section>
             </div>
 
-            <div class="column" id="sprite-editor-container">
+            <div class="column" id="sprite-editor-container" style="flex-grow: 0">
+                <div id="toggle-sprite-editor-button">
+                    &lsaquo;
+                </div>
+
                 <section id="sprite-editor">
                     <div class="section-header">
                         Sprite editor

src/index.js

@@ -177,10 +177,19 @@ saveKarlkoderButton.onclick = (ev) => {
 };
 
 toggleSpriteEditorButton.addEventListener("click", () => {
-    const cont = document.querySelector("#sprite-editor-container");
+    const container = document.querySelector("#sprite-editor-container");
-    if (cont.style.getPropertyValue("display") === "none") {
+    const editor = document.querySelector("#sprite-editor");
-        cont.style.removeProperty("display");
+    const button = document.querySelector("#toggle-sprite-editor-button");
+
+    if (getComputedStyle(editor).display === "none") {
+        editor.style.display = "block";
+        container.style.flexGrow = "1";
+        button.innerHTML = "›";
+        button.setAttribute("expanded", true);
     } else {
-        cont.style.setProperty("display", "none");
+        editor.style.display = "none";
+        container.style.flexGrow = "0";
+        button.innerHTML = "‹";
+        button.removeAttribute("expanded");
     }
 });

style.css

@@ -200,8 +200,30 @@ footer {
     left: 1px;
 }
 
-#sprite-editor-area {
+#toggle-sprite-editor-button {
-    line-height: 0;
+    color: white;
+    cursor: pointer;
+    font-size: 32px;
+    align-self: center;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+}
+
+#toggle-sprite-editor-button[expanded] {
+    background-color: #242424;
+    border-radius: 0.5rem 0 0 0.5rem;
+}
+
+#sprite-editor {
+    background-color: #242424;
+    display: none;
+}
+
+#sprite-editor-container {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0;
+    min-width: min-content;
 }
 
 #sprite-editor-preview {