All right.
Up next, let's work on the layout for our dashboard page, which is going to be somewhat complex because
there are a lot of moving pieces.
And let's start with our main goal.
So effectively, this is the look we'll have on a small screen where we have a nav bar on top and then
the page content below it.
And then once I click, I display the small sidebar.
So notice how the small sidebar is only going to be.
Visible on a small screen and we'll do that using the CSS.
And once we get to the big screen, we'll actually have a two column layout.
So this is going to be the big sidebar, which only is rendered on a big screen.
And right next to it we'll have the same nav bar and right below it we'll have the page content.
So let's start working on that.
We're going to go to components.
We'll start with big sidebar, and since we have some CSS that already controls when the actual element
is displayed, let's also right away import the wrapper for the big sidebar.
And yes, of course we'll work on that CSS, so I'll show you how we can do that.
But.
Definitely import it because it's going to be easier to see what's happening.
So we're looking for the wrapper and not the landing page.
We actually want to go over here and we're looking for the big sidebar and then it doesn't really matter
what you return.
Make sure that you set up the wrapper because again, there is some CSS which right away hides it on
the small screen.
And after that we want to go to components.
So let me open this one up as well.
And we're looking for small sidebar, JSX again.
Let's set up some kind of div and let's repeat where we want to grab the wrapper and we'll do I think
the same thing for NAV bar as well.
So copy and paste.
Not the big sidebar.
Let's remove.
And we're looking for the small one.
And again, we just want to place the wrapper.
Okay.
Awesome.
At the very end, let's also create a nav bar.
Same deal.
Let's create the component.
Now, this one is probably not that important since there's always going to be a nav bar displayed on
a page.
But still, you know what?
Let's stay consistent.
Let's also grab.
The rapper.
For our nav bar as well.
So let's see.
Yep.
So we're here.
So let me add it.
In return, and we're good to go.
Now we just want to go to the index.
And essentially copy and paste.
So one, two, three, and let's change these values around.
So we're looking for a big sidebar first.
Then we also want to set up the small sidebar.
At the very end.
We want to go here and we want to add the nav bar.
We have all of these in place.
So now let's navigate to a dashboard layout.
And again, let's grab the wrapper.
And in this case, we're looking for the dashboard one.
So let's remove not the dashboard form page.
This is going to be a little bit different.
We're looking for the dashboard one.
We'll start with a wrapper.
So we are returning that one.
And as far as the structure we want to go with Main and the class will be Dashboard.
Then inside of the main, we'll set up the small sidebar.
As well as the big one.
And notice how nicely the auto imports work.
And then right below them we'll have Div in there.
We'll have the nav bar.
And another div.
With a class of dashboard page.
And inside of this div, this is where finally we'll have the outlet.
So let me just save this.
And notice the look.
So effectively we have the main with the class of dashboard.
Inside of it.
We'll have the small sidebar and big sidebar.
And using the CSS, I only display one of those components based on the screen size.
So big sidebar is hidden by default on the big screen.
We can only see it on the small screen and it's probably going to be easier to see over here.
So notice this is my big sidebar.
Once we get to the big screen and this is going to be the small sidebar.
So we're toggling that using CSS and yes, of course, I'll cover the entire setup.
Then we have the div.
So this is the second column and the nav bar is always going to be there regardless of the screen size.
And then right below it we have the dashboard page and this is where we have the entire content.
And up next I want to set up the CSS, so if you're interested, don't skip that video and you'll see
how we set up the column layout for our dashboard page.