Okay, so let's work on this. It sounds like I don't want to see these navigation links for my mobile layout. So let's go back to my header. And yeah, right here, I could begin by just saying, well, by default, it's hidden. And remember, if we're thinking mobile up, so we start with our mobile layout, and then we build up from there, well, that will give us this. However, if I go to desktop, I don't see it anymore. So let's say maybe around a medium breakpoint, that's sort of like an iPad layout. Maybe there, we bring the display back to flex. So for mobile, it's hidden.

So let's wrap the whole thing within a button, like so, let's get rid of that, and bring that up. And now, if I hover over it, we get a cursor, but when I click on it, nothing happens. Okay. Let's use Alpine like we did before. So you'll remember, we already have it available, or pull in Vue, whatever you like. I'm going to declare on my header, x-data, and we'll say, should it be open? Set that to false. Okay. So now on our wrapping button, I could say, well, when you click on this button, just

Okay. So now on our wrappingButton, I could say, well, when you click on this button, just make open equal to the opposite of what it currently is. Toggle it. And then on the SVG, we could say, well, show this hamburgerMenu if the menu is not open. But if it is open, then we want a closeButton. Let's see. How about that one? All right. Copy that.

active link. So yet again, we think, well, we got to go back to this. If the request is the homepage, then what do we want to do? text-blue? We did in the last episode. Let's have a look. Oh, I'm sorry. Yeah. Or maybe, for a mobile layout, you want a background-color. So maybe here, you would say background-blue-500.

What's wrong with that? So now I come back, we can steal some of this just so I don't have to retype it. But then, yeah, of course, if I come back to our header, scroll down to the bottom, here's our basic styling. So if the route is selected, we have background of blue, otherwise that, and then finally, all of this would be block, and then padding 2, and then rounded. Yeah, I think that should do it. We'll give it a shot. So now we have xMobileNavLink, and yet again, we can reuse that route name. All right, so let's get rid of that.

So now we have xMobileNavLink, and yet again, we can reuse that route name. All right, so let's get rid of that. Duplicate this a few times, and I'll update these quickly. And there you go. Let's give it a shot. Give this a refresh, open up our nav link, there's Home, About, let's go to the Contact page, and that works as well. Simple enough. But of course, as I extend this, well, the hamburger stays, doesn't it? We don't want that.

Not too difficult. And here's our end result.