one here. So this will be for colors, and then I'll repeat this. Okay, so this will be colors, but of course, we want to update this. So I will do Logosymbol, and then colors. Okay, next, if we go into our main/app.php file, and we scroll down to all of our links, where are they? Here we go. And actually, right up here. Okay, so there's our Home. We'll do Logosymbol, and then colors.

Okay, so now you can see I have all eight components. They all repeat the same basic structure. Then within my routes file, I've added routing for all of these. Now if you want, we could even make this dynamic. So we could set up a lookup table and then generate all of these, but I don't think it's worth it. And then finally, in our app.blade.php file, I've updated all of my links to point to the correct locations. So that will give us this. Colors, Typography, Mascot, Illustrations, Letters, and Wallpapers.

So that will give us this. Colors, Typography, Mascot, Illustrations, Letters, and Wallpapers. Okay, great. Next, I want to give the User some indication as to which page they're on. So if we're on this page here, at the very least, we need it to be bold. It's kind of what we want for each page that you select. Okay, how would we do that? Well, take a look. If I select a page and then I inspect it, you'll see the active link automatically gets this class.

If I select a page and then I inspect it, you'll see the active link automatically gets this class. RouterLinkExactActive, we'll talk about that exact keyword in a minute. But also RouterLinkActive. So you'll see it's only applied there and nowhere else. And if I select a different one, now the Wallpapers page will have that. Which means, if you wanted to, you could add a CSS class for that, or you could override it. So let's do an example for all of these. Let's select two.

So let's do an example for all of these. Let's select two. And I'll set the active class to FontBold. So yeah, we could do that. And now if I come back and refresh, if I select these, you'll see they toggle on and off. But you'll notice one issue there. No matter what the homepage, which is this one, Logo is considered the homepage, at least right now. We may change that. But yeah, we can see anything that's the home route is active no matter what.

We may change that. But yeah, we can see anything that's the home route is active no matter what. And that's because when we apply this class, it is considered inclusive by default. So as long as it begins with whatever you typed there, in this case, a forward slash, then anything's going to match. You can fix this by adding the exact attribute. This means, nope, not anything that begins with a slash. We want exactly /, or homepage. So now if I give it a refresh, it will only select that if you are on the homepage. So that was pretty easy.

So now if I give it a refresh, it will only select that if you are on the homepage. So that was pretty easy. And this is fine. I don't love this. If you want, you can override it at the routing level. Let me show you how. I'm going to select all of these and delete them. Instead, I will visit our routes.js file, and this will be the constructor. So just real quick to refresh your memory. In our app.js file, we instantiate the view router, and then this routes object is passed.

So just real quick to refresh your memory. In our app.js file, we instantiate the view router, and then this routes object is passed to the constructor. So any overrides or configuration can be specified there. So one of the options, if you review the documentation, is linkActiveClass. This will be the class name that's applied to any active links. So I'm just going to set that to font-bold, but you might even want to be more specific. Whatever you want. Okay, so now if I come back and refresh it, it still works without having to add that active class attribute to every single link.