Custom Application Menus

[00:00:00]
>> There's one last little thing that we'll do here, just kinda show how it works, and we'll visit this in other iterations is, out of the box, you get a fairly okay menu, right? This does a lot of what you need it to do. And in a lot of cases, this might be all that you want.

[00:00:23]
But if you want to build your own application menu, like, if you look in VS code, like, clearly. They're not using the stock menu. If I go over to the GitHub app, they are clearly not using the stock menu. If you can also have full control over the menu, and the nice part is to no one's particular shock, both it is relatively easy, but you do have to do a little bit of massaging for the various OSs and how you want it to behave.

[00:00:55]
And so we can pull this in. There's another module called menu. And menu's good for two things, making an application menu as we've seen, and context menus, you also create custom context menus when they right click and stuff along those lines, that is also an option as well.

[00:01:17]
We will talk about the context menus in a later section. Let's look at the application menu right now if you want to build your own application menu. I will say that that is something that is a decision worth making because you get a relatively good default application menu out of the box if you want to have a custom application menu.

[00:01:41]
When I say you're kind of on your own, that's not totally true as we'll see. There's a lot of like things to help you, but you are somewhat on your own, right? You are now responsible for making an application menu. There are some niceties that we will see as we go along though.

[00:01:59]
So menu. There's also a menu item class. You can literally handcraft a series of menu items and add them to the menu one by one. However, there is also a relatively helpful tool. If we do the menu, there is a built from template, right, which lets you use JavaScript niceties like arrays and objects instead of like instantiating a butch of menu items one by one with a certain number of arguments.

[00:02:29]
You can pass an array of objects as long as they adhere to the shape of a menu item It will then build the menu out of that template. So generally speaking that is almost always what you want unless you already have an existing menu that you're trying to append stuff on to, stuff along those lines.

[00:02:49]
So what we can do in this case is we can say const template. And I'm just gonna like because I've got TypeScript. I'm gonna say that is an array of menu constructor options, right? If you're not using TypeScript then you don't need to worry about that. But I'm just saying like, hey, TypeScript, could you be a friend and as I'm working on this if I make a boo boo, put a red squiggly line of anger that lets me know that I made a boo boo.

[00:03:17]
So I don't have to embarrass myself in front of my friends after I go and start up the app to find out that my menu won't compile. So menu is an array. If it's MacOS, it's gonna be that menu bar along the top. If it's Windows or Linux, you've seen it before, it's the one built into the window, right?

[00:03:35]
It's an array, the first is that top level set of menus. You can have sub menus, arguably, to your heart's content. I'm sure that there's a maximum depth either enforced by the OS or electron. I have not personally sought to find it, but I assure that one can take sub menus too far if one wanted to.

[00:03:55]
So for instance let's say we wanna just start with a file menu, so you put an object we can label it file and then really there's initially like you could have, yeah, you have a sub menu let's do that. And here we'll do a label of open, right?

[00:04:15]
And we got that in place and we'll start there, right? Actually, you know what we'll do click. We're gonna say do that show open dialogue. With this one, we'll get the focused window in this case. TypeScript's very upset, like what if we don't have one? Okay, fine. And if there's no browser window.

[00:04:45]
We could literally call, create window in this point and then point it there, which might be useful for Mac OS. So actually let's do that. Let's be better people than we want to be. The one thing I need to check is, does the create window that Electron Forge gave me out of the box return the window.

[00:05:09]
It does not. This is a change I make every single time if I'm using the template in there, which is sometimes I'd like that window. If thank you for making it, I would like it, cool. So then we'll say that browser window. If there's no browser window, then we'll say, we can go get all the Windows.

[00:05:29]
Let's go create one. Although, we'll get the reference immediately. Cool, and then we'll pass the browser window in there. Awesome, so if we have a browser window, it'll get the focused one. you could also, as you saw, there was a get all windows. We can get the first one from the array.

[00:05:55]
So I guess there's a world where the app has a browser window that's not focused. Otherwise, I'm gonna say, if we don't have one, just go ahead and create me one and show me it. So what you would expect to see, and this is gonna be where we have fun time depending on what OS you're using, but generally speaking, we'll have a little bit of a different outcome depending on what OS you're using, right?

[00:06:28]
And so for my friends who are using Windows or Linux, everything's gonna go great. Everything's gonna be amazing. I'm gonna wait for the app. Do we need for the app to be ready? I don't know, we'll find out together. I think I don't need to wait for the app to be ready.

[00:06:46]
But we'll say menu, setApplicationMenu to tha one that we just made from the template. And so what you expect to see is a file menu with an open, right? And if you are on Windows or Linux that is what you see. And if you are on Mac OS you don't.

[00:07:05]
Because Mac OS the size of the first menu is always the name of the app. Right? So you end up with a does the thing that you expect it is the correct thing under the hood it should be called file but Mac OS has a slightly odd behavior where it expects that the first one is named after the app regardless of what you've named it.

[00:07:27]
So that is one tiny thing that you need to do, which is, if process platform is Darwin and you could theoretically make a function called is Mac, which just does that for you if you never wanna think about that again. You do the template and then you unshift.

[00:07:47]
Unshift, which is yeah, no pop quiz on this one unshift, put something on the front of the array, something you'd never wanted to do until like today, right? And so we have the app name. We'll start with that for now. And we'll get that in place. Cool, so now we've got that Mac OS specific tweak there, template.

[00:08:10]
Cuz turns out the order in which you modify arrays is important. If you use the array and then mutate it, it didn't matter. Awesome, so we've got file, we've got electron, there's no menu there. But a fun fact is I can't copy that. I can't copy any text in here.

[00:08:36]
Why?
>> Because we haven't told it how hotkeys work.
>> I don't have a copy. I don't have an edit menu anymore. That has Command C. So I can't copy. I can't paste. I can't select all. I can't do anything, because all of those menu items are gone, right?