feat(in-app-menu): add toggle-menu

Author: JellyBrick

assets/menu.svg

@@ -2,8 +2,9 @@ import { ipcRenderer, Menu } from 'electron';
 
 import { createPanel } from './menu/panel';
 
-import logo from '../../assets/youtube-music.svg';
+import logo from '../../assets/menu.svg';
 import { isEnabled } from '../../config/plugins';
+import config from '../../config';
 
 function $<E extends Element = Element>(selector: string) {
   return document.querySelector<E>(selector);
@@ -12,11 +13,28 @@ function $<E extends Element = Element>(selector: string) {
 const isMacOS = navigator.userAgent.includes('Macintosh');
 
 export default () => {
+  let hideMenu = config.get('options.hideMenu');
   const titleBar = document.createElement('title-bar');
   const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
   if (isMacOS) titleBar.style.setProperty('--offset-left', '70px');
 
   logo.classList.add('title-bar-icon');
+  const logoClick = () => {
+    hideMenu = !hideMenu;
+    let visibilityStyle: string;
+    if (hideMenu) {
+      visibilityStyle = 'hidden';
+    } else {
+      visibilityStyle = 'visible';
+    }
+    const menus = document.querySelectorAll<HTMLElement>('menu-button');
+    menus.forEach((menu) => {
+      menu.style.visibility = visibilityStyle;
+    });
+  };
+  logo.onclick = logoClick;
+
+  ipcRenderer.on('toggleMenu', logoClick);
 
   if (!isMacOS) titleBar.appendChild(logo);
   document.body.appendChild(titleBar);
@@ -47,6 +65,9 @@ export default () => {
 
       menu.append(menuItem.label);
       titleBar.appendChild(menu);
+      if (hideMenu) {
+        menu.style.visibility = 'hidden';
+      }
     });
   };
   updateMenu();

assets/youtube-music.svg

@@ -29,15 +29,15 @@ export const createPanel = (
     } else {
       const nativeImageIcon = typeof item.icon === 'string' ? nativeImage.createFromPath(item.icon) : item.icon;
       const iconURL = nativeImageIcon?.toDataURL();
-      
+
       if (iconURL) iconWrapper.style.background = `url(${iconURL})`;
     }
   };
 
   const radioGroups: [MenuItem, HTMLElement][] = [];
   items.map((item) => {
     if (item.type === 'separator') return panel.appendChild(document.createElement('menu-separator'));
-    
+
     const menu = document.createElement('menu-item');
     const iconWrapper = document.createElement('menu-icon');
 
@@ -48,7 +48,7 @@ export const createPanel = (
     menu.addEventListener('click', async () => {
       await ipcRenderer.invoke('menu-event', item.commandId);
       const menuItem = await ipcRenderer.invoke('get-menu-by-id', item.commandId) as MenuItem | null;
-      
+
       if (menuItem) {
         updateIconState(iconWrapper, menuItem);
 
@@ -64,7 +64,7 @@ export const createPanel = (
         }
       }
     });
-  
+
     if (item.type === 'radio') {
       radioGroups.push([item, iconWrapper]);
     }