Next up is active links. So notice if I click around to the navigation here, at the moment, on the link itself, there's no visual indication that it's currently active. And of course, this is something we should offer. So let's see what we can do here. I'm going to visit my navigation component, and on the homepage itself, why don't we set a conditional class? For example, let's make the link bold and underlined if some condition happens to be true. For now, I'm going to force it, and that'll reformat.

true. For now, I'm going to force it, and that'll reformat. All right, so not quite right, but if I switch back, ideally, this is how we want it to look. If I'm on the homepage, it's bold and underlined. But yeah, at the moment, as soon as I click away, it doesn't update. So in Inertia, we have access to this page property. And actually, if you want to take a look at it, let's open up Vue DevTools, and you can find it here, the initial page. Now I want to point your attention to two properties here. First up is the currentUrl, and second is the currentPageComponent that we're on.

Now I want to point your attention to two properties here. First up is the current URL, and second is the current page component that we're on. OK, we're going to leverage both of those to set these active links. So what if I said, check to see if the page URL is the homepage? Only on that condition should we make it bold and underlined. So now if I go to the homepage, it works. But if I click away to users or settings, it turns off. This is what we want. OK, so yeah, of course, I could select all of this and duplicate it here and update the link to users, and then one more to, what is it, settings.

Think about it. So if I bring this back, now instead of basic string matching, I could say, check to see if the component is users, and I bet that'll do the trick now. So if I come back and try it again, we click on users with a full query string, but it is still bold, because now we're matching not against the current URI, we're matching against the currently active page component, and that page component, just to make sure we're clear, is the users page component. OK, so yeah, if we wanted to take that approach, we would say something like, if the page component is home, and then down here, check to see if the page component is settings. And that would work as well.

is home, and then down here, check to see if the page component is settings. And that would work as well. Come back, refresh, and we have our active links. OK, so that mostly does it, but real quick before we wrap up, what we have here I think is perfectly fine. I don't personally have an issue with it. But if you'd like to remove a little of this duplication, again, there's nothing preventing you from extracting any number of components to wrap things up. So for example, maybe you want to set up a NavLink component. That is a wrapper around the link, which is a wrapper around the anchor tag.

So for example, maybe you want to set up a NavLink component. That is a wrapper around the link, which is a wrapper around the anchor tag. You can wrap this up as many times as you want, if it makes you feel better. And then you could even add custom attributes like, I don't know, active, and that will determine whether or not we make it bold. So the logic would be here. So if we do things right, we want this to be identical to this. All right, so let's see if we can make it work. I'm going to add a new view component here called NavLink, and I'll paste in what we have there.

I'm going to add a new view component here called NavLink, and I'll paste in what we have there. Next we'll declare our props, and we know one is active. That'll be a boolean. And then, of course, I also have to import my Link component. So I'll do that here, and then register it. Finally, I can replace this hardcoded conditional with whatever active evaluates to. Okay, last thing, the href is going to be passed through automatically, because the component will inherit any attributes you send through that are not registered as props. So I can end up with something like this, and then I'll turn this into a slot.

component will inherit any attributes you send through that are not registered as props. So I can end up with something like this, and then I'll turn this into a slot. All right, I think that'll do the trick. So now, if we come back up, the only remaining thing I need to do is set the text here, so home. All right, so let's get rid of that and give it a reformat, and then I'll do the exact same thing to these as well. This will return to /users, and we'll set that. All right, and then finally, one more for the settings page. This is now settings, check for settings, update the text, and whoops, update that as

All right, and then finally, one more for the settings page. This is now settings, check for settings, update the text, and whoops, update that as well. And yeah, here's what we get. So notice we have cleaned it up a little bit, and we have removed some of that class duplication. The only remaining step is to import the NavLink component. Import NavLink, and then update the component reference. All right, and then finally, this old link. We don't need anymore. All right, let's give it a shot.

We don't need anymore. All right, let's give it a shot. Refresh, and we get the same thing as we had before. So that's just a slight refactor, if and only if you think it's worth it.