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
Playing
19. Detecting and highlighting current pages
Episodes
01. Setting up
02. Authentication
03. Feature management
04. Building a toast feature
05. Profile management
06. Password confirmation
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
09. Account recovery
10. Fixes and improvements
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.
40 episodes•5 hrs 21 mins•8 months ago
Overview
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
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.