‫So, let's now build
‫our overall application layout.
‫And we're going to build it completely from scratch,
‫and even write all the styles.
‫And so, let's quickly get started.
‫Now this app layout doesn't really belong
‫into any of these features here,
‫and so let's create the new component right here
‫in the UI app folder.
‫So AppLayout.jsx once again.
‫And for now,
‫let's just add some very bare bones content here,
‫like APP LAYOUT like this,
‫and then let's use this right here in our router definition.
‫So, remember that the way we setup a layout route
‫is by placing all the routes that should be rendered
‫inside the layout as child routes of the layout route.
‫So we have done that at least two times before I believe,
‫and so this is nothing new, at this point.
‫So basically, we just set up another route.
‫And here, the element will be the app layout
‫that we just created.
‫And then here, instead of immediately closing the route,
‫we will place, again, all the routes that should be rendered
‫inside the layout, here inside the route.
‫And those are all the routes, except these last two.
‫So the login page will be a completely different page
‫and will not be inside the layout.
‫And the same here for page not found.
‫So let's grab all of these, place them in here.
‫And so then, immediately we get the APP LAYOUT text
‫that we have right here.
‫And now, do you remember how we actually display
‫those child routes in here?
‫So, right now for example, how do we actually make it
‫so this account component will be rendered
‫inside the layout?
‫Well, for that we use again, the outlet component.
‫And so, there it is.
‫So all of this is basically the outlet,
‫and in here is the paragraph that is always part
‫of the account.
‫So if we remove this, then we go to the dashboard.
‫But of course, we still have everything around it
‫from the layout.
‫So in this case, only this paragraph.
‫But if we go now to the login page,
‫then that will be outside.
‫So this one here has nothing to do
‫with the app layout anymore,
‫and that's because this is not a child route
‫of our layout route here.
‫And remember that this is called a layout route
‫because it doesn't have the path prop.
‫Okay, but now let's actually build this layout here.
‫So for some reason, oh.
‫So here, the app layout is back.
‫So as I was saying, let's actually build this layout.
‫And we are going to do a very classic
‫web application layout with a sidebar on the left side,
‫and then on the right side, we will have a header bar
‫at the top, and below that, the content itself.
‫So let's actually create some components for those.
‫So we will have...
‫The header,
‫and we will have, also the sidebar here,
‫as separate components.
‫Because otherwise, our app layout
‫would become a bit too big.
‫So here, let's use an aside element.
‫And here, for now, I will simply write,
‫basically what they are.
‫And here let's use the header, HTML element,
‫and then let's bring them in here.
‫So first, the sidebar, let's say.
‫And then, the header.
‫And actually, let's make it this way,
‫and so there they are.
‫All right, then next up, let's place this outlet
‫inside like, a main component.
‫And so, the reason for that is that then,
‫we can have all these pages, basically with the same style.
‫Because later we will style this element here,
‫and then, whatever content is gonna come here
‫from the pages, so which is going to be this,
‫will simply be placed all inside the main.
‫So that is the reason why, for example here,
‫in the account component, we are returning this fragment,
‫because we then want all of these elements here
‫to be placed directly into the main element.
‫So let's actually see that in action.
‫So here, in our DOM, we have,
‫so this one here is the app layout,
‫and then we have header, aside, main,
‫and then directly in the main,
‫we have everything that is in there.
‫While, if we then head here, another div,
‫this might then mess up our styling.
‫So then we would have main, and in there,
‫just a div which doesn't really have like, any function.
‫And so the rule is basically, to only return one element,
‫or a fragment, so not a div.
‫All right, so.
‫Not really a hard rule, but it's just a convention
‫that we create in this application
‫to keep our styling consistent.
‫All right, and now let's have some fun styling all of this.
‫So we're going to use our knowledge about style components
‫and format this stuff.
‫So let's create a main component here,
‫using styled.main.
‫And so this will then replace this main, right here.
‫So just to see initially, whenever we build some layouts,
‫I always like to start by giving them some random colors.
‫Let's also add some padding here.
‫And so what I came up with while building this app
‫for the first time, was this kind of padding right here.
‫So four rem at the top, then 4.8 at left and right,
‫and 6.4 at the bottom.
‫And so, now we can replace this with this main,
‫and beautiful.
‫Well not literally, but it's beautiful that it worked.
‫Next up, let's then style the header, and the sidebars.
‫And so, what we're gonna do is this trick,
‫or this convention that I mentioned earlier.
‫So we're going to call this the styled header,
‫because we cannot again,
‫create a new component called header,
‫because we already have that.
‫So we call this one simply, StyledHeader.
‫And so this will then be again, styled.
‫And this time the header, HTML element.
‫Again, starting with some background color,
‫and some padding here,
‫1.2 rem, and let's say 4.8 rem on the sides.
‫And here, we will also place a very subtle border
‫at the bottom.
‫So one pixel solid, and then var color grey 100.
‫So this one won't be really visible initially,
‫but as we move all the colors, then we will see it.
‫So StyledHeader right here, and then all we have to do
‫is something similar in the sidebar.
‫So const StyledSidebar is styled.aside.
‫So again, repeating that HTML element,
‫that we are about to replace,
‫let's here, start with this blue color.
‫Then again, some padding.
‫And of course, if you were building this for the first time,
‫then you would experiment around with these values.
‫And then also, border-right, similar to the one
‫that we had in the header.
‫So one pixel solid, and then let's use
‫our color gray 100 again.
‫All right, let's place that here.
‫And this color is not really visible,
‫so that's a bit nicer.
‫And here is our gray border.
‫All right, but this doesn't really look like
‫any kind of layout yet, right?
‫And so, let's do what I said initially,
‫which is to position this sidebar on the left,
‫and then on the right, we will have the header
‫and this main part.
‫And so for that, we are going to use CSS grid.
‫So, what we need to do is to basically style
‫this element right here.
‫So this is what's going to become the grid container.
‫And so, once again, let's follow that convention
‫of StyledAppLayout.
‫So this is just a regular div.
‫And so...
‫Display, grid, which won't make any change yet.
‫But let's also make the height of this 100 viewport heights,
‫and then, well more importantly than that,
‫let's define our grid template columns.
‫So more like this.
‫So, let's have the first column,
‫which will contain the sidebar with a fixed width
‫of 26 rem, and then the rest will be flexible.
‫So just one fractional unit there.
‫And so with this, we should see some change.
‫At least after we actually apply it here.
‫All right, so this is starting to look like something.
‫I like just to make sure also,
‫add our rows, and the first one should be basically,
‫the size of the content itself.
‫And then the rest, again, occupying the rest of the page.
‫So one F-R.
‫Cool, and so what we need to do next,
‫is to just have this sidebar here, so this right here,
‫actually span all the way from the first row
‫to the last row.
‫And so, let's come here, which is now a grid item.
‫And so, on the grid item, we can say grid, row,
‫not frid row.
‫And then we want to span it from the first row,
‫all the way to the last one.
‫Which is always just called minus one.
‫And there we go.
‫This is exactly the layout that we were looking for.
‫So this one keeps the fixed width.
‫And then, as we change our page,
‫then this side here expands.
‫And so all of this, so these two parts right here,
‫will always stay the same.
‫So that's why they are part of the static layout,
‫and this here is the outlet.
‫And so now we can finally get rid of these colors,
‫and use the actual colors that we want here.
‫And so, that is going to be color, gray, zero,
‫which is white at this point.
‫But later, for dark mode, we will then have this color here
‫being the darkest one.
‫And therefore, we cannot just leave
‫this background color off.
‫So everything needs to have a background color,
‫so that we can then invert the colors later.
‫So basically, we will have the sidebar and the header
‫as white, and then the main part here,
‫we'll have a very, very subtle gray,
‫which will give this whole application a really nice
‫and modern touch.
‫So let's just copy this, place the same thing in the header,
‫just like this, so that's also the reason why we then have
‫these very subtle borders here.
‫So...
‫Where is that?
‫Ah, I already finished that.
‫And so all we have to do, is to also do it in the main.
‫But here, we want our color gray 50.
‫So for that very subtle gray that I was talking about.
‫So, this is starting to look like something.
‫But of course, now what we're missing,
‫is some links so that we can actually jump
‫between the different pages.
‫And so usually, those kinds of links are what appear
‫here in an application sidebar.
‫And so, in the next lecture, let's build our main navigation
‫right here in the sidebar.