add menu icon to in-app-menu

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)"
 									});
 								}
 							},

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("refreshMenu", true);
+		});
 	});
-
-	function setMenuVisibility(value) {
-		visible = value;
-		win.webContents.send("refreshMenu", visible);
-	}
 };

plugins/in-app-menu/front.js

@@ -7,6 +7,7 @@ function $(selector) { return document.querySelector(selector); }
 module.exports = (options) => {
 	let visible = !config.get("options.hideMenu");
 	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,
@@ -15,19 +16,28 @@ module.exports = (options) => {
 	bar.updateTitle(" ");
 	document.title = "Youtube Music";
 
-	const hideIcon = hide => $('.cet-window-icon').style.display = hide ? 'none' : 'flex';
+	const icon = $('.cet-window-icon');
 
-	if (options.hideIcon) hideIcon(true);
+	icon.style.webkitAppRegion = 'no-drag';
 
-	ipcRenderer.on("refreshMenu", (_, showMenu) => {
-		if (showMenu === undefined && !visible) return;
-		if (showMenu === false) {
+	icon.firstChild.style.webkitUserDrag = 'none';
+	icon.firstChild.style.filter = 'invert(50%)';
+
+	const updateMenu = () => {
+		if (visible) {
 			bar.updateMenu(null);
 			visible = false;
 		} else {
 			bar.refreshMenu();
 			visible = true;
 		}
+	};
+
+	icon.addEventListener('click', updateMenu);
+
+	ipcRenderer.on("refreshMenu", (_, fromBack) => {
+		if (fromBack === undefined && !visible) return;
+		updateMenu();
 	});
 
 	if (isEnabled("picture-in-picture")) {
@@ -36,8 +46,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/menu.js

@@ -1,14 +0,0 @@
-const { setOptions } = require("../../config/plugins");
-
-module.exports = (win, options) => [
-    {
-        label: "Hide Icon",
-        type: "checkbox",
-        checked: options.hideIcon,
-        click: (item) => {
-            win.webContents.send("hideIcon", item.checked);
-            options.hideIcon = item.checked;
-            setOptions("in-app-menu", options);
-        },
-    }
-];