Add File List Toggle Button (#120)

walshyb · web-flow · commit 2b03251b9dda · 2025-11-27T11:09:00.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -188,6 +188,28 @@ canvas {
   white-space: nowrap;
 }
 
+.menubar li#hamburger-container {
+  margin-top: -2px;
+  padding-top: 0;
+}
+
+.menubar li#hamburger-container:active {
+  background-color: var(--selectedfile-background);
+}
+
+.menubar li#hamburger-container:hover {
+  cursor: pointer;
+  background-color: default;
+}
+
+.menubar li#hamburger-container .hamburger {
+  display: block;
+  font-size: 16px;
+  transform: scale(1.5);
+  position: relative;
+  top: 1px;
+}
+
 .menubar li ul {
   display: none;
   position: absolute;
@@ -201,7 +223,8 @@ canvas {
 .menubar li ul li:last-child {
   border-bottom: 1px solid var(--background-alt);
 }
-.menubar ul li:hover {
+.menubar ul li:hover,
+.filelist-open li#hamburger-container {
   background-color: var(--background-alt);
 }
 .menubar li:hover ul,
@@ -291,15 +314,23 @@ canvas {
   grid-column: 1 / 4;
   grid-row: 1;
 }
-.sidebar {
-  grid-column: 1;
+
+.editor {
+  grid-column-start: 1;
+  grid-column-end: 3;
   grid-row: 2;
-  overflow: auto;
 }
-.editor {
+
+.filelist-open .editor {
   grid-column: 2;
+}
+
+.sidebar {
+  grid-column: 1;
   grid-row: 2;
+  overflow: auto;
 }
+
 .emulator {
   grid-column: 3;
   grid-row: 2 / 4;
diff --git a/index.html b/index.html
@@ -13,9 +13,10 @@
   </head>
 
   <body>
-    <div class="container">
+    <div class="container filelist-open">
       <div class="menubar">
         <ul>
+          <li id="hamburger-container"><span class="hamburger">&#9776;</span></li>
           <li>
             File
             <ul>
diff --git a/js/main.js b/js/main.js
@@ -353,6 +353,9 @@ export function init(event) {
     updateFileList();
     updateCpuState();
   };
+  document.getElementById('hamburger-container').onclick = function () {
+    document.querySelector('body .container:first-child').classList.toggle('filelist-open');
+  };
   document.getElementById('newfile').onclick = function () {
     document.getElementById('newfiledialog').style.display = 'block';
   };
