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
40. Closing the user navigation on click
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
So I promised we'd come back to this issue with our user navigation, where when we click on something like account or security, sure enough,
00:08
we get forwarded over to the right page. But this doesn't close the menu. Now, let's just take a look at what we were doing before here. Before, we had a V on mouse up, which
00:18
did work to actually invoke that close function within our menu item in headless UI. But this prevented the behavior of the link with going through to a new inertia page
00:29
and re-rendering everything. So let's just remind ourselves that that did work to close the menu, but it didn't let us progress any further.
00:37
Now, with inertia, links are pretty much just router requests. They work in exactly the same way. And we've looked at tons of router requests
00:46
where we've posted through or get something, and then we've used an on success callback. So let's just remind ourselves one of the places that we've done that.
00:55
And that was, for example, in our two factor where we enabled this when we, let's just have a look here, went ahead and posted through without form, which is the same as a router request.
01:07
On success, we did something. Now, because a link's working exactly the same way, we can actually do the same thing. So we can bind in an on success, so
01:17
when this request to this new page was successful, we can do something. So this is the correct way to hook into an event when a link successfully goes through.
01:27
So we bind in on success, and we just invoke close. So that should work nicely. Let's head over and just try this out. So I'm going to go ahead and hit account.
01:36
Sure enough, we go through to the right place. And because that router request was successful, it invokes close, and it closes the menu. So really, what we need to do now
01:46
is just take this and do it for the security link here as well, do exactly the same thing. And that should nicely close this off too. For log out, slightly different,
01:57
because this redirects us anyway, but that should be good. Let's just make sure we're not missing anything else. I think these should work nicely.
02:04
And there we go. We have successfully fixed up the issue with that navigation not closing when we go through to new pages.
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.