[in-app-menu] add toggle menu icon

menu.js

@@ -163,7 +163,7 @@ const mainMenuTemplate = (win) => {
 								if (item.checked && !config.get("options.hideMenuWarned")) {
 									dialog.showMessageBox(win, {
 										type: 'info', title: 'Hide Menu Enabled',
-										message: "Menu will be hidden on next launch, use 'Alt' to show it (or 'Escape' if using in-app-menu)"
+										message: "Menu will be hidden on next launch, use [Alt] to show it (or backtick [`] if using in-app-menu)"
 									});
 								}
 							},

package.json

@@ -117,7 +117,7 @@
 		"butterchurn-presets": "^2.4.7",
 		"chokidar": "^3.5.3",
 		"custom-electron-prompt": "^1.5.1",
-		"custom-electron-titlebar": "^4.1.5",
+		"custom-electron-titlebar": "^4.1.6",
 		"electron-better-web-request": "^1.0.1",
 		"electron-debug": "^3.2.0",
 		"electron-is": "^3.0.0",

plugins/in-app-menu/back.js

@@ -2,14 +2,12 @@ const path = require("path");
 
 const electronLocalshortcut = require("electron-localshortcut");
 
-const config = require("../../config");
 const { injectCSS } = require("../utils");
 
 const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
 setupTitlebar();
 
 //tracks menu visibility
-let visible = !config.get("options.hideMenu");
 
 module.exports = (win) => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
@@ -18,16 +16,8 @@ module.exports = (win) => {
 	win.once("ready-to-show", () => {
 		attachTitlebarToWindow(win);
 
-		//register keyboard shortcut && hide menu if hideMenu is enabled
-		if (config.get("options.hideMenu")) {
-			electronLocalshortcut.register(win, "Esc", () => {
-				setMenuVisibility(!visible);
-			});
-		}
+		electronLocalshortcut.register(win, "`", () => {
+			win.webContents.send("toggleMenu");
+		});
 	});
-
-	function setMenuVisibility(value) {
-		visible = value;
-		win.webContents.send("refreshMenu", visible);
-	}
 };

plugins/in-app-menu/front.js

@@ -5,28 +5,31 @@ const { isEnabled } = require("../../config/plugins");
 function $(selector) { return document.querySelector(selector); }
 
 module.exports = (options) => {
-	let visible = !config.get("options.hideMenu");
+	let visible = () => !!$('.cet-menubar').firstChild;
 	const bar = new Titlebar({
+		icon: "https://cdn-icons-png.flaticon.com/512/5358/5358672.png",
 		backgroundColor: Color.fromHex("#050505"),
 		itemBackgroundColor: Color.fromHex("#1d1d1d"),
 		svgColor: Color.WHITE,
-		menu: visible ? undefined : null
+		menu: config.get("options.hideMenu") ? null : undefined
 	});
 	bar.updateTitle(" ");
 	document.title = "Youtube Music";
 
-	const hideIcon = hide => $('.cet-window-icon').style.display = hide ? 'none' : 'flex';
-
-	if (options.hideIcon) hideIcon(true);
-
-	ipcRenderer.on("refreshMenu", (_, showMenu) => {
-		if (showMenu === undefined && !visible) return;
-		if (showMenu === false) {
+	const toggleMenu = () => {
+		if (visible()) {
 			bar.updateMenu(null);
-			visible = false;
 		} else {
 			bar.refreshMenu();
-			visible = true;
+		}
+	};
+
+	$('.cet-window-icon').addEventListener('click', toggleMenu);
+	ipcRenderer.on("toggleMenu", toggleMenu);
+
+	ipcRenderer.on("refreshMenu", () => {
+		if (visible()) {
+			bar.refreshMenu();
 		}
 	});
 
@@ -36,8 +39,6 @@ module.exports = (options) => {
 		});
 	}
 
-	ipcRenderer.on("hideIcon", (_, hide) => hideIcon(hide));
-
 	// Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
 	document.addEventListener('apiLoaded', () => {
 		setNavbarMargin();

plugins/in-app-menu/style.css

@@ -46,7 +46,7 @@ yt-page-navigation-progress,
 	top: 30px !important;
 }
 
-/* Custom scrollbar */
+/* custom scrollbar */
 ::-webkit-scrollbar {
 	width: 12px;
 	background-color: #030303;
@@ -59,7 +59,7 @@ yt-page-navigation-progress,
 	background-color: rgba(15, 15, 15, 0.699);
 }
 
-/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+/* the scrollbar 'thumb' ...that marque oval shape in a scrollbar */
 ::-webkit-scrollbar-thumb:vertical {
 	border: 2px solid rgba(0, 0, 0, 0);
 
@@ -70,7 +70,7 @@ yt-page-navigation-progress,
 	-webkit-border-radius: 100px;
 }
 ::-webkit-scrollbar-thumb:vertical:active {
-	background: #4d4c4c; /* Some darker color when you click it */
+	background: #4d4c4c; /* some darker color when you click it */
 	border-radius: 100px;
 	-moz-border-radius: 100px;
 	-webkit-border-radius: 100px;
@@ -80,6 +80,17 @@ yt-page-navigation-progress,
 	background-color: inherit
 }
 
+/** hideMenu toggler **/
+.cet-window-icon {
+	-webkit-app-region: no-drag;
+}
+
+.cet-window-icon img {
+	-webkit-user-drag: none;
+    filter: invert(50%);
+}
+
+/** make navbar draggable **/
 #nav-bar-background {
     -webkit-app-region: drag;
 }

readme.md

@@ -118,7 +118,7 @@ winget install th-ch.YouTubeMusic
 
 - **Auto confirm when paused** (Always Enabled): disable the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) popup that pause music after a certain time
 
-> If using `Hide Menu` option - you can show the menu with the `alt` key (or `escape` if using the in-app-menu plugin)
+> If `Hide Menu` option is on - you can show the menu with the <kbd>alt</kbd> key (or <kbd>\`</kbd> [backtick] if using the in-app-menu plugin)
 
 ## Themes
 

yarn.lock

@@ -2434,7 +2434,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"custom-electron-titlebar@npm:^4.1.5":
+"custom-electron-titlebar@npm:^4.1.6":
   version: 4.1.6
   resolution: "custom-electron-titlebar@npm:4.1.6"
   peerDependencies:
@@ -3060,15 +3060,15 @@ __metadata:
   linkType: hard
 
 "electron@npm:^22.0.2":
-  version: 22.2.0
-  resolution: "electron@npm:22.2.0"
+  version: 22.2.1
+  resolution: "electron@npm:22.2.1"
   dependencies:
     "@electron/get": ^2.0.0
     "@types/node": ^16.11.26
     extract-zip: ^2.0.1
   bin:
     electron: cli.js
-  checksum: 096434fe95408928c86de4782e87fcad8b933043a9a7b5447e87964c6c597352584d413157cca43a9f1fd4bf669d2e344d6604ff5c499367e3ca6f1008e2fd5f
+  checksum: d7331f1e4fbdaf7cb2e5093c3636cb2b64bd437a31b4664f67d4353caf1d021ab582f88584dd2e170a282ebf11158b17cc2f6846432beae3a4b5bc371555fd6d
   languageName: node
   linkType: hard
 
@@ -4184,7 +4184,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3":
+"get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.1, get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0":
   version: 1.2.0
   resolution: "get-intrinsic@npm:1.2.0"
   dependencies:
@@ -4818,13 +4818,13 @@ __metadata:
   linkType: hard
 
 "internal-slot@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "internal-slot@npm:1.0.4"
+  version: 1.0.5
+  resolution: "internal-slot@npm:1.0.5"
   dependencies:
-    get-intrinsic: ^1.1.3
+    get-intrinsic: ^1.2.0
     has: ^1.0.3
     side-channel: ^1.0.4
-  checksum: 8974588d06bab4f675573a3b52975370facf6486df51bc0567a982c7024fa29495f10b76c0d4dc742dd951d1b72024fdc1e31bb0bedf1678dc7aacacaf5a4f73
+  checksum: 97e84046bf9e7574d0956bd98d7162313ce7057883b6db6c5c7b5e5f05688864b0978ba07610c726d15d66544ffe4b1050107d93f8a39ebc59b15d8b429b497a
   languageName: node
   linkType: hard
 
@@ -5723,11 +5723,11 @@ __metadata:
   linkType: hard
 
 "locate-path@npm:^7.1.0":
-  version: 7.1.1
-  resolution: "locate-path@npm:7.1.1"
+  version: 7.2.0
+  resolution: "locate-path@npm:7.2.0"
   dependencies:
     p-locate: ^6.0.0
-  checksum: 1d88af5b512d6e6398026252e17382907126683ab09ae5d6b8918d0bc72ca2642e1ad6e2fe635c5920840e369618e5d748c08deb57ba537fdd3f78e87ca993e0
+  checksum: c1b653bdf29beaecb3d307dfb7c44d98a2a98a02ebe353c9ad055d1ac45d6ed4e1142563d222df9b9efebc2bcb7d4c792b507fad9e7150a04c29530b7db570f8
   languageName: node
   linkType: hard
 
@@ -8392,9 +8392,9 @@ __metadata:
   linkType: hard
 
 "type-fest@npm:^3.1.0":
-  version: 3.5.6
-  resolution: "type-fest@npm:3.5.6"
-  checksum: ce80d778c35280e967796b99989b796a75f8c2b6c8f1b88eb62990107f5fa90c30fdb1826fe5e2ab192e5c1eef7de6f29d133b443e80c753cbc020b01a32487a
+  version: 3.5.7
+  resolution: "type-fest@npm:3.5.7"
+  checksum: 06358352daa706d6f582d2041945e629fdd236c3c94678c4d87efb5d2e77bab78740337449f44bbd09a736c966e70570e901e2e2576b59b369891ffc1bf87bb6
   languageName: node
   linkType: hard
 
@@ -9010,7 +9010,7 @@ __metadata:
     butterchurn-presets: ^2.4.7
     chokidar: ^3.5.3
     custom-electron-prompt: ^1.5.1
-    custom-electron-titlebar: ^4.1.5
+    custom-electron-titlebar: ^4.1.6
     del-cli: ^5.0.0
     electron: ^22.0.2
     electron-better-web-request: ^1.0.1