This episode is for members only

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Get started
Already a member? Sign in to continue
19. Detecting and highlighting current pages


Your progress
  • Total: 5h 21m
  • Played: 0m
  • Remaining: 5h 21m
Join or sign in to track your progress


Okay, so we want to highlight when we are on, say, the profile information page, or the security page, or even the home or dashboard, that these are actually selected. At the moment we don't have any kind of selected states. Now this deserves its own episode, because typically what we would do
in an inertia application is go ahead and bind in a class like this, and say something like bgGray100 for example, and we'd set something to a value. That would highlight that because we've just passed true in, but what we would normally do is say something like page.url and then compare it to a URL. So for example, slash account. In this case that would be highlighted. Now if we do this
for the security one as well, this is going to work, but we will eventually come across a problem. So let's say security, and there we go. So when I click security now that's highlighted, profile information that's highlighted, this works as you'd expect, and we could do the same for home and dashboard as well. But I've found that using this can sometimes get us into a little bit of
trouble, particularly when we change over URLs. That's not often, but what we could do is lean on Ziggy to tell us what route we're currently on, or at least output this globally what current route name we're on, and we can compare these to route names instead. What do I mean by this? Well if we head over to handle inertial requests, we could just output what current route name that
we're on, and then use that to compare globally, and that would be a lot better because then we're dealing with route names and not URLs. So let's go ahead and create our Ziggy array in here, and we're going to say route name, and then in here we're going to use the route facade and say current route name. That will give us, as you would expect, the current route name. So let's go ahead and
just dump this out on the page somewhere. So we'll just put this inside of here, page, props, Ziggy, and current. Let's just see how we did that route name. You could call it current route name, but it's up to you, and you can see we've got account dot index. When we go over to security, of course that changes because the next inertial request gives us the current route name. So now we've got
a reference to the route name rather than the URL which can change, so we can now use this instead of the URL directly from the page that we're on to compare this. So we can say if this route name is account dot index, and we can say here if this account if this route name is account and security index. Let's go over and you can see it works in exactly the same way. So this
is a much better way to deal with this. So let's go over and do the same for home and dashboard just so we've got them done, and then we can use this anywhere else to highlight where we currently are. So let's go over to our navigation, and remember we need to do this for mobile as well. So let's start out with our top items here for home and dashboard. So let's bind in a class here,
and this class is going to be the border color. So we want the border to be say blue 500 when the route name is home, and let's go over to home. There we go, and we can do the same thing for our dashboard, and check when that equals dashboard. So now very easily we have these defined. Great. So we'll do the same for our mobile navigation really quickly,
and let's open this up, and for these let's go down to where these are defined. So let's find them, and we'll do the same thing in here as well. So we could maybe set a background. We could even set a border on the left hand side, and set the border to transparent, and then set the border like this. So let's just check this out. Border left, border transparent. We want this to be maybe
a bit thicker, and let's open this up, and yet we're on the dashboard. That's why it's not showing. So you can see we've got a border here now, and we can do the same thing for this, and then of course just grab this and swap that over to dashboard. So let's set that to dashboard, and now with this we get that blue border depending on which page we're on. Now we can
do the same thing for these items as well. I'm going to kind of skip that. You can add them in if you want, but at least now we have a really nice way to just reference these by route name, which is what we would usually prefer, and I've just noticed that these are still active on hover. So that's probably not a good thing. Let's go ahead and change that over now. So let's go over to our
main links here, and we want to get rid of hover when this is not active. So let's just be lazy here and set these to an important, so the hover won't take effect. So we'll do that for both of them, and there we go. So that's now looking nice, and of course under our account area this is highlighted as well. Great.
40 episodes5 hrs 21 mins


Let’s build our own Laravel starter kit with Inertia and include all the features you’d expect. We’ll implement authentication, email verification, profile photo uploads, two factor authentication, and more.

Fortify is a frontend agnostic authentication package for Laravel, meaning most of the work is done for us — we just need to build the frontend and make requests to the endpoints that Fortify registers.

Once you’re done, you’ll have a clean slate for building your next project, with the ability to control everything in your own starter kit.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!


No comments, yet. Be the first to leave a comment.