Build a Starter Kit With Inertia and Fortify

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

19. Detecting and highlighting current pages

Episodes

0%

Your progress

Total: 5h 21m
Played: 0m
Remaining: 5h 21m

Join or sign in to track your progress

01. Setting up

01. Introduction and demo

02. Installing Inertia from scratch

03. Installing Tailwind

04. Layout and navigation

05. Installing Fortify

06. Exposing routes with Ziggy

07. Global modals

02. Authentication

08. Registering users

09. Sharing the authenticated user globally

11. Signing out

12. Redirecting to the intended location

03. Feature management

13. Adding feature management checks

14. Client-side feature management

04. Building a toast feature

15. Basic flash messages with Inertia

16. Building a toast plugin

17. Styling and transitioning the toast

05. Profile management

18. Creating an account layout

19. Detecting and highlighting current pages

20. Updating profile details

21. Profile photo output and swapping

22. Storing a profile photo

23. Changing user passwords

24. Account feature toggling

06. Password confirmation

25. Using a modal for password confirmation

26. Confirming user passwords

07. Two factor authentication

27. Building the two factor modal

28. Showing a QR code

29. Enabling two factor authentication

30. Disabling two factor authentication

31. Showing recovery codes

32. Fixing password confirm redirect

33. Fixing password confirm flow when enabling

34. Challenging the user when signing in

08. Email verification

35. Mail setup and forcing email verification

36. Adding a verification notice

37. Resending the verification email

09. Account recovery

38. Sending a recovery email

39. Setting a new password

10. Fixes and improvements

40. Closing the user navigation on click

Transcript

00:00

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

00:15

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

00:44

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

01:06

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

01:31

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

01:57

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

02:21

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

02:53

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,

03:14

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,

03:46

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

04:17

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

04:41

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

05:00

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.

Episode overview

In this episode, we tackle a super common UI problem: how to highlight the current page in your navigation so users know exactly where they are. Right now, none of our navigation items show which one is active, and that's not ideal.

First, we try a basic approach: conditionally adding a class to a nav item when the current URL matches, for example, /account or /security. This works okay, but if your URLs change or get more dynamic, this method can get messy and break.

To make things more reliable, we tap into Ziggy to globally expose the current route name. By outputting the current route name (like account.index or security.index), we can match our nav items against these stable identifiers instead of fragile URLs. This is way better since route names rarely change compared to URLs.

We update both our desktop and mobile navigation to use this new approach, adding visual cues (like borders or background colors) whenever a nav item matches the current route name. We also make sure to handle styles, so when an item is active, hover effects don’t override it.

By the end of this episode, we've got a solid, DRY way to highlight the current page using route names, making our navigation much more robust and user-friendly!

Episode discussion

No comments, yet. Be the first!