canvas size option, menu collapsed by default

src/index.html

@@ -8,7 +8,26 @@
     <div id="container">
       <sidebar>
         <div class="menu-row">
-          <h2> Cell Properties</h2>
+          <h2>General Properties</h2>
+          <div class="menu-row-content">
+            <form>
+              <div class="form-field">
+                <label for="live">Canvas Resolution</label>
+              </div>
+              <div class="form-field">
+                <input name="canvasWidth" type="number" id="canvasWidth" value="1280"/>
+              </div>
+              <div class="form-field">
+                <input name="canvasHeight" type="number" id="canvasHeight" value="1024"/>
+              </div>
+              <div class="form-field">
+                <input type="button" name="canvasRefresh" id="canvasRefresh" value="refresh"/>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="menu-row">
+          <h2>Cell Properties</h2>
           <div class="menu-row-content">
             <form>
               <div class="form-field">

src/js/main.js

@@ -14,10 +14,12 @@ const live = document.querySelector('#live');
 const cellSize = document.querySelector('#cellSize');
 const startBtn = document.querySelector('#start');
 const startBtn2d = document.querySelector('#start2d');
+const canvasRefreshBtn = document.querySelector('#canvasRefresh');
 const resetBtn = document.querySelectorAll('.reset');
 const stopBtn = document.querySelectorAll('.stop');
 // const loop = document.querySelector('#loop');
 const menuRow = document.querySelectorAll('.menu-row');
+const menuRowContent = document.querySelectorAll('.menu-row-content');
 
 function drawCanvas(board, props) {
   board.map((row, y) => {
@@ -136,6 +138,13 @@ stopBtn.forEach((elem) => {
   });
 });
 
+canvasRefreshBtn.addEventListener('click', () => {
+  const width = document.querySelector('#canvasWidth').value;
+  const height = document.querySelector('#canvasWidth').value;
+  canvas.width = width;
+  canvas.height = height;
+});
+
 menuRow.forEach((elem) => {
   elem.querySelector('h2').addEventListener('click', async (e) => {
     const parent = e.currentTarget.parentNode;
@@ -147,8 +156,11 @@ menuRow.forEach((elem) => {
 
 window.addEventListener('load', () => {
   resizeCanvas();
+  menuRowContent.forEach((elem) => {
+    elem.style.setProperty('display', 'none');
+  });
 });
 
 window.addEventListener('resize', () => {
-  resizeCanvas();
+//  resizeCanvas();
 });

src/style.css

@@ -32,8 +32,8 @@ h1 {
 }
 
 sidebar {
-    flex: auto;
     padding: 0 10px;
+    width: fit-content;
 }
 
 input[type="button"] {