00:10
and using it for both our login and register pages. So the first thing that we're going to want to do is create a file for our layout. Now you could create your layouts inside of your components, but what I like to do in
00:19
this case is to create a separate folder altogether called layouts with my layouts inside of it directly off of Inertia. So I'm going to create a new file here.
00:26
We'll call this folder layouts and then we'll do auth layout dot view for the actual layout file. For right now, all that we need is a template.
00:34
Go ahead and wrap everything in a div and then we'll have a header with a nav inside of it.
00:39
And then on this nav we'll do flex items center justify between with a padding of six and an lg px of eight.
00:47
Inside of it we'll do an extra div class flex lg flex one with a link component inside of it with an href pointing to the home page.
00:55
And on this we'll have a class of negative margin 1.5 and a padding of 1.5 as well. Then we'll end that link.
01:03
Inside of here we'll do a span class sr only and put out a label for our application of plot my course.
01:10
And then we'll grab an SVG here in a minute to plop in as our actual icon. So I'll just put a comment there for right now.
01:17
And then beside the div inside of our navigation, we'll do another div with the class flex flex one justify end and a gap of four.
01:27
Inside of here we'll put another link component with an href pointing to slash register and
01:31
a class of text small font semi bold leading six and text slate 900. Go ahead and end that link component.
01:40
Keeps wanting to do divs for that. I don't know why. And write out register inside of there. We can go ahead and give that link a copy and a paste and switch the anchor to log in
01:49
instead of register and the text to log in instead of register as well. Cool. So we have ourselves a little header here for our off layout. Then we need the actual page contents.
01:58
So let's do another div class and let's apply a padding of six there. And then LG will do a padding of eight. Then we'll do our actual page contents.
02:07
However, from our login page, we want to take this div and now move it out to our layout so we can get rid of it inside of our login page. Just kind of cut it out there. Go ahead and give that a save.
02:16
Jump back into our off layout and paste it in. Inside of this div, we'll just do a slot so that any contents that we place inside of
02:23
our actual page components gets rendered out in this slot right here. Oh, forgot about our SVG icon. Let's go and grab that real quick. So let's open up our browser. This is just coming from Lucid.
02:33
So lucid with an E dot dev. It might be pronounced Lucide. I'm not quite sure. Go into view all icons and we're just using the routes icon right here. So we can go ahead and give that a click.
02:43
Go down to the download SVG, click on a caret and copy the SVG. You can close that out for now and hide our browser. Go to where we have our SVG placeholder and just paste it in.
02:53
Give it a save so that it formats. Scroll back over to the left. We do want to switch up the class a little bit. So we'll do a height of eight and a width of auto on it. And we can give that a save.
03:03
All right. So your first inclination for using this layout may be to jump into your pages, go into the template and then try to use your off layout like so.
03:11
Wrapping all of your page contents inside of that off layout. And then since that's not inside of our components directory, we would need to import it to register it.
03:19
So off layout from, we can do tilde slash layouts slash off layout dot view. Give that a save. And while this will physically work, we can jump back into our browser and we'll see everything
03:29
kind of go back. Oh, one blank less refresh. There we go. We can see everything kind of go back to how we had it for the page contents. And then we also have our header right up here.
03:37
The downside here is as we click from page to page that we don't have it on our register page, but assume that we did, it would re-render all of the layouts contents for each link that it goes to.
03:46
Whereas it would be preferable if it shared and doesn't actually try to re-render everything as that could result in a flash as it re-renders.
03:54
So what we want is to use the layout outside of our page level in between the inertia component and our page component.
04:01
So we want to elevate this up to our application level instead of using it inside of our individual pages. So let's go ahead and undo what we did here inside of our logout page.
04:11
Let's go ahead and just remove the registration of our auth layout and remove its usage altogether. And let's jump into our app.ts file. If you remember inside of this file, we have a resolve method that's in charge of resolving
04:20
out each of our page components as we attempt to render them. Now we can make use of that by intercepting and grabbing a reference to that component.
04:28
So for example, we could do const page equals resolve component, and then down at the bottom of this method, return that page. And now we have the actual page component that we can work with and use to our advantage
04:38
to add a layout into it. Now, the app component from inertia actually accepts and will read from a layout property
04:45
on our page components and then wrap our page in that layout that we provide. For example, if we go ahead and import our auth layout here.
04:53
So import auth layout from, we'll do tilde slash layouts, auth layout dot view there.
05:00
We have reference to our page, so we can do page dot default dot layout to attach a layout property onto that default export equals auth layout. Okay.
05:10
So one more thing here, default does have a red squiggly on it. It is because resolve page component is a promise.
05:16
So we need to await it and then switch our resolve function to async as well, which gets everything being back to happy. And now we need to inform our server side app about this as well so that we don't get
05:26
a hydration mismatch. So let's jump into our SSR app and do the exact same thing. So import our auth layout from tilde slash layouts slash auth layout.
05:36
And then here too, we are using our resolve method to resolve out all of our pages rather than just one and then finding the applicable page and returning it back.
05:44
So rather than returning back, just like we did within our app, we want to save this into a variable. Now we already have page being provided into this render function up here.
05:53
So what we want to do instead is maybe resolved page or something of the sort.
05:58
And then just like we did within our app, we can do resolved page dot default dot layout equals and then apply our auth layout to that property.
06:07
We'll want to return back that resolve page as well and give that a save. Now if we jump back into our browser, you'll see that everything looks the exact same here for our login page.
06:16
We can give it a refresh for sanity's sake and it looks the same. Now our register page never had the layout applied to it. But if we click over to it now, it does because it's being picked up from our actual application
06:26
shell now and being applied by the inertia app component that resides between the inertia component and our page component.
06:33
So if we inspect, jump into the view dev tools, we can see the root of our application, the inertia component, and then the auth layout now wrapping our actual page component here.
06:43
And this layout is now being provided by default. We don't need to do anything inside of our actual page to add it in.
06:50
It will just automatically take hold because we've added it at the application level.
