Let's do another one. Here you can see I've set up a basic header with a logo and a drop-down menu. And we created that menu a couple episodes ago. If I go to my layout file, yeah, this is what we worked on in the drop-down lesson. Cool. So we have our header. But you know what? In phpStorm, I have the ability to very quickly extract a partial. So we'll put that in a partials directory and then call it header. That's a relatively good practice.

So we'll put that in a partials directory and then call it header. That's a relatively good practice. And now we can edit the header individually. Okay. So you'll see on this header, I have a display: flex with justify-content: space-between, which means if I have a nav here, it should be centered. So we'll say this is the homepage, and maybe we'll do four. That's the about. Maybe testimonials. And then finally, contact.

Maybe testimonials. And then finally, contact. All right, let's have a look in the browser. Give it a refresh, and there you go. But they're all jumbled next to each other. So why don't we say, give them all a class of maybe px-6. Let's have a look. Yeah, a little better. But now maybe when you hover over them, they should be underlined. So hover, underline.

But yeah, one issue that everyone runs into is figuring out how to indicate the currently active link. So here you can see I'm on the testimonials page. We should provide some indication that you're on this page, right? So this should default to blue with an underline in this case, and it's not. So I'll show you some options, and I'm sure you've done this yourself. So right here, I could say, well, if the request is, and then I provide a regular expression here, or it could just be the path. So if the request is testimonials, then we could set the text to blue, otherwise nothing. So if we give that a shot, sure enough, it works.

Okay, this is fine. But why don't we see if we can simplify this a little bit. I'm going to create a new component. And we'll call it, what do you want, NavLink. And I'll paste it in. Okay, so now I can remove all of these and replace them like so, home, about, testimonials, and contact. And now if I switch back, of course, we just need to make this dynamic. So this would be the default slot you provide there. And of course, I've done it again, haven't I?

So this would be the default slot you provide there. And of course, I've done it again, haven't I? Okay, but anyways, we'll get to this in just a moment. But if we try it out, sure enough, it works. So now we've isolated this class duplication into a single Blade component. Okay, but now how do we make this dynamic? Because we're no longer providing the correct active state. You'll see it's set everywhere here. And that's because we're doing this check for any URL that starts with a forward slash. So everything.

And that's because we're doing this check for any URL that starts with a forward slash. So everything. Now, I'll show you a couple of options. You could say, well, if the request is, and then let's look into the attributes and find the href. So again, we're not providing one. So if we set it like this, and this is an option, this gets a little bit tricky. Because you need to know whether you're comparing against relative URLs or absolute URLs, or named routes and things like that. And that's why the specifics will probably be very unique to your own app.

named routes and things like that. And that's why the specifics will probably be very unique to your own app. So now we have an href for all of them. And we're going to look into that. And we're going to see, well, if the request matches that, but it's not quite going to work the way you think. Yes, it works for the homepage. If we go to about though, nope. If we go to contact, nope, it's not working. And this is because we're actually checking if the request effectively is something like

If we go to contact, nope, it's not working. And this is because we're actually checking if the request effectively is something like this, contact. So notice here, the contact link should highlight, right? But it doesn't. You would actually want to do this. And then it works. Okay, so then you go down the rabbit hole, or you think, well, maybe just trim it off, say attributes, href, and trim a forward slash if there is one on the left side. That's why we use ltrim.

say attributes, href, and trim a forward slash if there is one on the left side. That's why we use ltrim. And that should work. So let's go to contact, about, I'm doing this manually because we haven't hooked up the href yet. But yeah, that would do the trick. But then you go back to the homepage. And now that one doesn't work. And that's because, well, the home URL is a forward slash, but we just trimmed that off.

It's only a few extra characters, and it can save you from a lot of annoyances. Okay, so why don't we switch over to that approach, which is what I would prefer. So instead, why don't we get rid of this entirely? That would allow us to say, well, if the request, look at the current route, and check if it matches what we provide. So it sounds like I need some kind of named route provided to this component. And we'll accept it. So remember, anything not declared as a prop will be thrown into the attribute bag that we will ultimately merge in. Rather than href, I'll use route.

we will ultimately merge in. Rather than href, I'll use route. We're going to force it. And this is my home route. This is my about route. This is testimonials, and this is contact. So now in our component, we have that route that represents the name for a path. And we're just going to check, is the current request, does it match that route? If so, make the text blue. Give it a refresh, and it works.

So let's finish up by cleaning up our component, and then merging in your attributes. Now as we did in the last episode, let's extract some of this CSS stuff to a variable that we can spit out. So we'll say the classes, and we're basically going to reproduce what we had here. So if the route matches that request, then our classes will be text-blue, and underline otherwise, maybe we could say hover:text-blue, because that's going to be specific to an inactive state. So I can get rid of all of this, and then spit out the classes, like so. Now we're throwing an error here, but that's just because phpStorm doesn't recognize that we do have access to a route variable there.

Now we're throwing an error here, but that's just because phpStorm doesn't recognize that we do have access to a route variable there. So we can ignore it. But yeah, if we try it, it should still work. Okay, now let's merge in the attributes. We have our class. I'm sorry, I doubled up on the href, didn't I? But yeah, right here, we will merge in the defaults. So class, like so. Let's get rid of all of that, and paste it in.

So class, like so. Let's get rid of all of that, and paste it in. And then what I'll do here is just concatenate. Is that right? It always takes a moment, doesn't it? Let's see. about, testimonials, contact, but yeah, now if I hover over about, sure enough, the title attribute was, in fact, merged in, which is what we want. All right, so I will let you take a look at this. Maybe we can tweak this a little bit, keep it all on one line, actually.