add option in menu to toggle sidebar

main.js

@@ -38,6 +38,13 @@ const menuTemplate = [
     label: 'View',
     submenu: [
       { role: 'togglefullscreen' },
+      {
+        label: 'Toggle Sidebar',
+        id: 'toggleSidebar',
+        click(menuItem, window, event) {
+          mainWindow.webContents.send('toggleSidebar');
+        },
+      },
       { type: 'separator' },
       {
         label: 'Arrangement 1',
@@ -144,7 +151,7 @@ const menuTemplate = [
 const windowMac = {
   width: 1500,
   height: 900,
-  titleBarStyle: 'hiddenInset',
+  titleBarStyle: 'customButtonsOnHover',
   transparent: false,
   frame: false,
   show: false,

preload.js

@@ -155,6 +155,10 @@ ipcRenderer.on('clearSavedData', (event, message) => {
   SAVESLOTS.clearSavedData();
 });
 
+ipcRenderer.on('toggleSidebar', (event, message) => {
+  document.getElementById('main').classList.toggle('sidebar-hidden');
+});
+
 ipcRenderer.on('loadSlot', (event, slot) => {
   if (slot) {
     SAVESLOTS.loadSlot(slot);

src/assets/css/index.css

@@ -31,6 +31,14 @@ a {
   float: right;
 }
 
+#main.sidebar-hidden {
+  grid-template-columns: auto;
+}
+
+#main.sidebar-hidden > #device-list-col {
+  display: none;
+}
+
 #main {
   box-sizing: border-box;
   display: grid;