Resize chart on menu toggle

css/main.css

@@ -301,19 +301,18 @@ label[for=user] {
 }
 
 #bottom {
-  position: absolute;
+  position: relative;
   z-index: 10000;
   display: none;
 }
 
 #chart {
   font-family: "Open Sans", Verdana, sans-serif;
-  position: fixed;
+  position: absolute;
   right: 0;
   bottom: -15px;
   left: 0;
   height: 200px;
-  margin-right: 165px;
   padding: 0 10px;
   opacity: 0.8;
   background-color: white;
@@ -321,9 +320,9 @@ label[for=user] {
 
 #chart-close {
   font-size: 0.8em;
-  position: fixed;
+  position: absolute;
   z-index: 10001;
-  right: 175px;
+  right: 15px;
   bottom: 160px;
   cursor: pointer;
   color: #5070af;

js/src/chartviewmodel.js

@@ -43,7 +43,8 @@ export default class ChartViewModel extends ViewModel {
       pointSelected: null,
       chartVisible: false,
       buttonVisible: false,
-      onChartToggle: null
+      onChartToggle: null,
+      onMenuToggle: null
     });
     this.state = state;
     /** @type {PlotData} */
@@ -123,6 +124,9 @@ export default class ChartViewModel extends ViewModel {
     this.model.onChartToggle = () => {
       this.model.chartVisible = !this.model.chartVisible;
     };
+    this.model.onMenuToggle = () => {
+      this.chart.update();
+    };
   }
 
   /**

js/src/trackviewmodel.js

@@ -310,11 +310,17 @@ export default class TrackViewModel extends ViewModel {
     this.model.autoReload = false;
   }
 
+  /**
+   * @param {HTMLElement} el
+   * @param {boolean} visible
+   */
   static setMenuVisible(el, visible) {
-    if (visible) {
-      el.classList.remove('menu-hidden');
-    } else {
-      el.classList.add('menu-hidden');
+    if (el) {
+      if (visible) {
+        el.classList.remove('menu-hidden');
+      } else {
+        el.classList.add('menu-hidden');
+      }
     }
   }
 

js/src/userviewmodel.js

@@ -131,11 +131,17 @@ export default class UserViewModel extends ViewModel {
     }
   }
 
+  /**
+   * @param {HTMLElement} el
+   * @param {boolean} visible
+   */
   static setMenuVisible(el, visible) {
-    if (visible) {
-      el.classList.remove('menu-hidden');
-    } else {
-      el.classList.add('menu-hidden');
+    if (el) {
+      if (visible) {
+        el.classList.remove('menu-hidden');
+      } else {
+        el.classList.add('menu-hidden');
+      }
     }
   }