From d45ca960b4de8d5b685462c96105b5cca29bf3d4 Mon Sep 17 00:00:00 2001
From: JellyBrick <shlee1503@naver.com>
Date: Sat, 7 Oct 2023 22:16:54 +0900
Subject: [PATCH] feat(in-app-menu): add toggle-menu

---
 assets/menu.svg                   |  3 +++
 assets/youtube-music.svg          | 19 ++++++-------------
 plugins/in-app-menu/front.ts      | 23 ++++++++++++++++++++++-
 plugins/in-app-menu/menu/panel.ts |  8 ++++----
 4 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 assets/menu.svg

diff --git a/assets/menu.svg b/assets/menu.svg
new file mode 100644
index 00000000..49e40477
--- /dev/null
+++ b/assets/menu.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 17h12a1 1 0 0 1 .117 1.993L15 19H3a1 1 0 0 1-.117-1.993L3 17h12H3Zm0-6h18a1 1 0 0 1 .117 1.993L21 13H3a1 1 0 0 1-.117-1.993L3 11h18H3Zm0-6h15a1 1 0 0 1 .117 1.993L18 7H3a1 1 0 0 1-.117-1.993L3 5h15H3Z" fill="#ffffff"/>
+</svg>
diff --git a/assets/youtube-music.svg b/assets/youtube-music.svg
index ae721786..ea40b336 100644
--- a/assets/youtube-music.svg
+++ b/assets/youtube-music.svg
@@ -1,13 +1,6 @@
-<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 176 176" enable-background="new 0 0 176 176" xml:space="preserve">
-<metadata>
-	<sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/">
-		<slices/>
-		<sliceSourceBounds bottomLeftOrigin="true" height="176" width="176" x="8" y="-184"/>
-	</sfw>
-</metadata>
-<g id="XMLID_167_">
-	<circle id="XMLID_791_" fill="#FF0000" cx="88" cy="88" r="88"/>
-	<path id="XMLID_42_" fill="#FFFFFF" d="M88,46c23.1,0,42,18.8,42,42s-18.8,42-42,42s-42-18.8-42-42S64.9,46,88,46 M88,42   c-25.4,0-46,20.6-46,46s20.6,46,46,46s46-20.6,46-46S113.4,42,88,42L88,42z"/>
-	<polygon id="XMLID_274_" fill="#FFFFFF" points="72,111 111,87 72,65  "/>
-</g>
-</svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 176" width="32" height="32">
+	<circle fill="red" cx="88" cy="88" r="88"/>
+	<path fill="#FFF"
+		  d="M88 46c23.1 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42 18.9-42 42-42m0-4c-25.4 0-46 20.6-46 46s20.6 46 46 46 46-20.6 46-46-20.6-46-46-46z"/>
+	<path fill="#FFF" d="M72 111l39-24-39-22z"/>
+</svg>
diff --git a/plugins/in-app-menu/front.ts b/plugins/in-app-menu/front.ts
index 84f02d8e..2be654a9 100644
--- a/plugins/in-app-menu/front.ts
+++ b/plugins/in-app-menu/front.ts
@@ -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();
diff --git a/plugins/in-app-menu/menu/panel.ts b/plugins/in-app-menu/menu/panel.ts
index feffb33b..1dd2ea16 100644
--- a/plugins/in-app-menu/menu/panel.ts
+++ b/plugins/in-app-menu/menu/panel.ts
@@ -29,7 +29,7 @@ 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})`;
     }
   };
@@ -37,7 +37,7 @@ export const createPanel = (
   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]);
     }