Figuring out the forum layout: Build a Forum with Inertia and Laravel

00:21

panel. And this will be shared between the forum index and the discussion page. And of course, any other pages that you create as well. So what we're actually going to do is create an entirely new layout here. So if we head over to the layout section, let's create a new file here and call this forum layout. That kind of makes sense. So if we go ahead and build out our

00:40

template in here, how do we want this to look? Well, we actually want this to kind of extend the base authenticated layout. So let's go ahead and create our script section in here, and we'll go ahead and import the authenticated layout from our authenticated layout just here. And let's go ahead and just use this directly inside of here, like so. And we can just start

01:03

to add stuff in here like we normally would. So let's really basically scaffold this out. And for this, we're going to have an outer container, which pretty much looks like this. So we're going to keep that padding on the y-axis as 12, just so it sits away from the top bar here. But what we're going to do with this is go ahead and set a max width to this of 7xl.

01:26

We're pretty much doing here everything that we see in here, just combining it into one thing. So for this, we're going to have a margin on the x-axis of auto, so it sits in the center. We'll set a space y of 6 between any components we add in here. And on a medium viewport art, we're going to set the space y to 0 just because, and we'll go through this in a second,

01:48

we're going to have a grid here. So when we go down to a smaller viewport, we want these things to kind of sit underneath each other. We're not going to fully make this responsive, but we're at least going to work on the containers. So we have a good start. So on a medium viewport, meaning on a viewport like I have at the moment,

02:05

we want that to be a grid layout. And with Intel Wind, we can set how many columns we want within that grid. And that will be vertical columns going all the way across just here. So now that we've got that, let's go ahead and just create out two containers in here, left and right. And let's choose the width of each of these containers within that grid.

02:28

So for this, we're going to set a colspan of 2. So that's going to take up 2 out of 7 of the grid columns that we have. And on the right hand side, of course, this needs to add up to 7. So it's going to be 6 or 5, sorry. So what we're going to now do is use this new authenticated layout

02:46

with a main slot inside of the right section just to check this is working. So to do this, we're going to head over to the index page. And let's go and just get rid or change this over to the forum layout. And we should be good. Let's change this end tag as well.

03:02

That should have auto imported that as well, which it has for us. We can get rid of the authenticated layout here now. And if we just head over, you can see we've now got left and right. So you can see that the right hand side is a little bit bigger than the left hand side.

03:15

Still got a couple of things to do, but we should be good. So over in the forum layout, let's have a look at what else we might need to do here. Let's go ahead and set a background color on these actually just to check that these are working background black.

03:30

And yeah, so we can add a gap in here. So the gap of six that will just set the spacing between each of these. And you can see at the moment, it's just taking out basically the full width of the page. Let's set some padding on the X axis to six that will be on a small viewport.

03:47

And as we get bigger, maybe on a large viewport, we'll set the padding on the X axis to eight. That pretty much matches this up to what we already had with that main container. It just, of course, is a completely different container. Now we've just added this all into one rather than having these all split up.

04:06

OK, great. So now that we've got that, we can get rid of these backgrounds. We know exactly what's going on here. And now we can just start to slot content in.

04:14

Now, if we look on the index page here, we've used this forum layout. This is our main slot content. So we can just add that into the template using slot. And if we head over now, you can see that that container has now been added in there,

04:29

which is great. Now we can get rid of the padding on the Y of 12, because that's already added to here. And we can get rid of the max width 7XL as well. And we should see something that resembles what we saw in the introduction,

04:44

where we're going to add our search bar and our list of topics. Now, on the left hand side here, as you know, we're going to have this different between different pages, but we need to figure out how to slot in this content specifically.

04:57

So we're going to use a named slot here and we're going to call this side. Now, nothing's going to happen at the moment because we're not choosing any content to add into here. We can either do this down here or above.

05:09

And we just want to create a template here with hash and side. And then any content inside of here will be placed over in this sidebar. So what we'll do just for now, so it doesn't look too odd, we will grab out from the index this container

05:26

and we will put that in there with side in there, just so we have something to at least work with. OK, so there's a couple of more issues here with the spacing of this. So let's just have a look.

05:38

We've got padding on the X of 6. So, yeah, I think we can actually get rid of all of that. Because we already have that gap in there. Yeah, that looks a lot better.

05:48

And yeah, that's fine. So there we go. We've got our side, our main panel at the top here. And then, of course, below here are going to be all of our discussions.

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion