Next up, we have context menus, and you've seen these countless times. Often it'll take the shape of something like this. You click on it, and then to the right, you'll see an additional set of menu items. Let's see if we can make that work. Here's my lesson setup. It's basically a box with three dots in the middle. Okay. Instead, though, I'm going to turn this into a custom Vue component called Dropdown. We haven't created it yet, but we'll do that in a minute. Now within here, we'll add a set of links that you'll commonly see.

We haven't created it yet, but we'll do that in a minute. Now within here, we'll add a set of links that you'll commonly see. Things like edit or delete. You get the basic idea. Maybe report. This is what I have at LaraCast. Okay. So we now have this list of links, but we don't yet have the trigger, or in other words, the button that will toggle the display of these items. Okay.

Okay. So we've now decided what we want it to look like. The next step is to create it. So within my components directory, I'm going to add a new one here. We'll call it, you know, anything you want. ContextMenu. It's basically still a dropdown, so I will use that, but name it anything you want here. Okay. So let's begin by wrapping it. Next, and we'll keep iterating on this, but we know that we'll have to display the trigger.

So let's begin by wrapping it. Next, and we'll keep iterating on this, but we know that we'll have to display the trigger. So once again, just to be clear, we're now saying this button here will go exactly where we defined this slot, and in a bit, we'll add some ARIA links to make that a bit more accessible. But next, we'll have another section for the links themselves, and I'll nest the default slot content there. All right. Still a lot to do, but we have the beginnings ready to go. So let's register a new global view component, and then import this.

Still a lot to do, but we have the beginnings ready to go. So let's register a new global view component, and then import this. Now I have my watcher running behind the scenes, so that should compile down. Let's now take a look. If I switch back to Chrome, this is what we see. Okay. But at the very least, I do see my context menu. It is clickable because we have a button here. But yeah, one issue is I'm seeing those links, and I shouldn't at the moment. So let's go back to phpStorm, visit our dropdown component, and it sounds like, by default,

But yeah, one issue is I'm seeing those links, and I shouldn't at the moment. So let's go back to phpStorm, visit our dropdown component, and it sounds like, by default, the state of the dropdown or the context menu is closed. So why don't we say, we'll call it isOpen, and by default, it's set to false. So now I can do things like this, where I say we'll only show this list of links if the state of the dropdown menu is open. Okay. So now if I come back, it should be hidden by default. Okay. The next step is when you click on this trigger, change the state to open.

Just kind of depends on what you're doing. Okay. But anyways, here, I could say, well, if you click anywhere here, then we'll set isOpen equal to not just true, but we want it to toggle. So it will be the opposite of what it currently is. Okay. Let's give that a shot. Refresh. I click on it, and now they show, and now they close. Okay.

This is just a simple explanation with no code.

Okay. So let's style this wrapper here. Now to start, you'll notice as I toggle this, it's moving the position, right? So we want these links to be absolutely positioned, so I'm going to add absolute there. Okay. And you'll see as I toggle it, it's not changing the flow of the document or the box. Okay. Next, let's give it a background color of black, and we want the text to be white. This will be kind of a fancy-looking one like that. Next, we want some padding, maybe all around, let's see, maybe px-4, something like that.

So that will at least get us started. So let's come back and add those in, and now if I come back, give it a refresh, run it, and we have the beginnings of our menu. Nice. Okay, but now I want to tweak the links themselves. It's a little too large. So very quickly, we could do text-small, maybe even text-xs. Now if I did set a background color of red, this is one thing to be aware of. Let's do 500. Anyways, you'll notice because we applied padding on the container, well that means

So if I switch back, and we go to our dropdown component, I'm going to wrap this whole thing within a view transition component, like so. And then I'm going to use a name here of pop out quick. And by the way, these types of transitions, they're all available on the web, so it's not like you have to figure them out. Often you can go to websites that'll just give you a bunch of different options you can copy and paste from. So here's an example of that. So you'll notice, based on this name, various classes will be applied during the transition, like when you enter or when you leave.

Okay, that's our next step. So if I return to our dropdown component, here's what we're going to do. I'm going to keep an eye on that isOpen data property. And we'll say when it is set to true, so when it is open, I want to add an event listener. So we'll say addEventListener, click, and then we're going to call a method here called closeIfClickedOutside. A little verbose, but that's okay. All right, so I'll say closeIfClickedOutside. We'll say, hi there. All right, so here's what's happening.

a parent, so let's make sure we named it. Yeah. So we're basically saying, if you clicked anywhere in here, try to get the closest parent that has a class of dropdown. And if, based on where you clicked, you could find a parent that was the dropdown, again, that means you clicked right in here. So in that case, don't do anything at all. However, if you did not find that, okay, in that case, we want to close the menu. So I could say at this point, this is open is false. I'll get rid of the alert.