Layouts

[00:00:00]
>> So the next thing we're gonna talk about is a topic that comes up a lot as our app starts to grow and scale. Which is you can imagine that over time as your app has different pages and stuff, you're probably gonna have different ways to format it, right?

[00:00:14]
And so your first instinct when you're doing that is to probably add different style classes to different pages, but at some point, you're going to end up with this weird thing where like some pages need this layout. Some people pages needs this layout. And there's only so many V ifs you can do and your app dot view before is just like spaghetti code.

[00:00:32]
So there's got to be a better way, right. And yes, there is when we asked you this question, if there wasn't but nothing came up with a very intuitive way of working on this. And that is with as you would probably have guessed, the layouts folder once again, I keep accidentally creating it on the root, but it should belong inside of our directory.

[00:00:49]
And what the layout component is, if you think about it is we talked before we're apt is at the pinnacle is at the top of everything so once you included an app, it drops down everything. Think of layouts as like that middle layer between the pages and app.view.

[00:01:03]
And so the first thing you're gonna wanna create when you create your layouts is there's default.view. And as you might have guessed this is the default layer that everything inherits. So if there's nothing in here nothing will happen but for now just for the sake of argument we're just gonna go ahead and we're just gonna make sure we have a class title is primary for example, it's a default layout.

[00:01:28]
So just by having this layout in here, we'll notice nothing's really changing. And the reason for that is if you look at our default view page, there's nowhere for the patient actually dropped its content. Remember we did that the same thing when next page, like how do we tell Knucks we need to drop content in.

[00:01:44]
Well, we've had a lot of practice with this at this point. Okay, and what we need is we need to give it a slot. Because that's how we know like, hey for the content using this default layout, drop it in this particular area. So now that it has a slot here, it should look better going forward.

[00:02:02]
But I wonder if it's gonna crash. No, that's good. Layouts default. Yep, yep, yep. That should be it. So let me go ahead and check something real quick. We're gonna go inside the pages index. And let's go ahead and actually define the layout real quick and go like this.

[00:02:32]
So now if we go home, there you go, that is much better. Okay, so it looks like by default without actually wrapping anything in the next layout component, it will actually skip the layouts directory at this time. But the moment you wanna actually use the layout, you can just wrap it here and this is the default one will apply as we saw with default layout.

[00:02:53]
But obviously, we're here to talk about custom layouts, and it was just the one we really wouldn't need this solution at all. So let's say for example, we want a specific display layout, then we can basically do a display dot view. And similarly, I'll just copy the default one here, just so that it's a little bit easier.

[00:03:10]
We can definitely say this is going to be the display layout. And the way you do this is that what we can do is go inside of display and so any page that we wanna use this specific layout, we can basically wrap the display. So in this case, we're gonna do it inside of here.

[00:03:25]
We can wrap it with this native next layout. Component just like we saw earlier, but the difference being is that we do name=display. And now you see this is the default layout. Photo wait hold up there you go. Now this is the display layout, home and display. And so it's basically just a simple technique to be an intermediary Between your app to your pages, that's how you should see layouts.

[00:03:56]
Otherwise they're honestly fairly straightforward. There's not much more complexity beyond that. They act like normal components, so you can customize the nav bar to that specific page if you have like specific call to actions, that kind of stuff. That's basically all it's there for and it's one of those things where you'll probably grow into the problem.

[00:04:12]
You don't need to necessarily, anticipate it in advance. So as your site grows, you start to notice the layout starts to shift, then you can go ahead and start using this. So just a high level technique that I want you all to be aware of.