Build Modern Laravel Apps Using Inertia.js - Ep 9, Layout Files

okay we can finally move on to layout files so if i switch back i want you to notice how all of our pages at the moment are manually importing the nav and then adding it here so it's in home it's in settings and it's also in users as well so if i end up with 20 different pages that's 20 different times i have to pull in the navigation and render it where it needs to go clearly you already know this that's not quite right so instead let's prepare a layout file and i'll add it to my shared directory so the very first thing i'll do here is pull in our nav and then of course i need to import it all right and then register it as a component all right so now our nav will exclusively live within this layout file okay so now for example if i go back to home let's swap this out with our layout and then we'll wrap it up here all right and then put everything in except the navigation of course okay but this still isn't quite right if i switch back to firefox and give this a refresh i've lost the main contents of the home page and that would make sense we've added a layout here and we've added some content there but at no point do we make use of that so again right now i'm just going to put it below the nav all right that recompiles and if i give it a refresh we get what we had before but again now the nav exclusively lives within this layout so next while we're here maybe we'll have a header and we'll have our main app name my app and maybe we want this to render like a typical navigation bar that you've seen a million times so right up here it's it's a different background color the heading is on the left or the title and then the navigation is inline on the right okay well first i'm going to make this maybe font bold and text large next the header itself will have a display of flex and then while we're here in the nav section the unordered list should also be a display of flex and then the nav why don't we push that away from the header so maybe margin left and i'm just throwing out numbers here maybe six all right we give it a refresh we're good in there but this is too close uh we don't yet have a background color and then the navigation bullets are on top of each other so for the bullets we either remove them completely or there's a couple things we could do first we could use this tail one class called spacex and then we give it a figure like four i really like this one it will automatically add margin where necessary to the direct children of the elements that you apply it to so notice you have margin if we scroll down here you have margin on that second list item and the last list item but not on the first which would be correct okay but again the bullets are still not quite right so there's also what is it list style position and we can set that to inside so again that's just expanding to this css property list style position inside and again that's a little bit closer to what we want so let's come on back and paste that in okay next we did say that we want a background color so for example if we end up very very basic with a very light background of gray it's closed but now we have this huge white border and that's because you'll remember on our main blade layout file we added a section with a bunch of padding so it sounds like that's probably not quite what we want anymore so if i remove that yes everything extends to the edges of the window but of course we will manually need to re-apply it so what i usually do is add sections for this so my section represents the thing that adds the padding that pushes it away from the edge of the window so if i did something like that and again i'm just throwing out a number here padding six well then i could add our background color there and then for our slot maybe that also is a section and right now i'm just duplicating that padding which is fine if you want you could also extract something like an app section component and that would contain your default padding maybe it even has a container within it but i'm gonna hold off on that for now okay so now i have a section for my header and a section for my main content the last step i think is let's just get rid of that section entirely and uh let's check in come back to firefox give it a refresh and we're a little bit closer there i think we could probably reduce this font size a bit but other than that we're not trying to build anything specific here we just want it to somewhat resemble a site you might build so here maybe our header is 2xl and that's not horrid maybe three and get rid of the bold but now one quick thing notice if i zoom out all the way to simulate a wide screen device everything's up against the left edge and you may want your main content to be centered so you may want to wrap your slot in a div give that a reformat and maybe we'll set a maximum width of i don't know 2xl that's 42 rems if you want to calculate that in pixels multiply that by your root font size which is 16 and that gives us 672 which is still fairly narrow but it's probably fine for what we're building why don't we give it one more 48 rams 48 times 16 is 768. that's fine and then i'll set the margin to auto to center it on the page and that's what we get or if i reset it we get something like this so yeah if it helps right here background of gray and you kind of get the idea your main website would go there okay so with that in mind why don't we return to our header and let's say justify between i've changed my mind here let's push the navigation to the right edge so i will remove that margin left and there you go all right so excuse that tiny bit of design but i do want to get back to inertia here so i want you to notice now our layout file typically contains anything that should be repeated from page to page so your header the wrapper around your main content if you have a site footer you would probably do it down here as well and then all of your pages would effectively extend from it like you can see in our home component all right so now i'm going to update settings as well and because it's the same process i'm going to speed this up like so so now users extends from layout settings does as well and home does a third time so come back to firefox give it a good refresh and now as i click between the pages i'll need to adjust the font size there but nonetheless everything is working like it did before but now we are using layout files

Channel: Laracasts

Views: 1,086

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: O7y3vdwXukM

Length: 7min 22sec (442 seconds)

Published: Fri Oct 15 2021