Now, as far as the CSS, let's navigate to wrappers.
We're looking for the dashboard JS.
And essentially we want to remove all of this logic.
And we'll start by targeting the dashboard.
So again.
Let's get on the same page.
We're talking about this class over here.
So this is going to be the parent pretty much for all of these components.
And we just want to set up a.
Grid layout, but it's basically going to be a.
One column layout, which technically is the default setup for the grid.
I just like this extra line of code because it clearly signals to me that eventually I'm going to be
setting up more columns.
So I'm going to go with grid template columns and I'll set it up as one fraction.
So notice now.
We have small sidebar nav bar and the admin one.
And of course once we get to the big screen, the deal is going to be the same.
The only difference is that instead of small sidebar, we'll have the big sidebar.
So all of them are in one column.
And when it comes to a dashboard page, this is where we have the outlet, right?
So first, let's Target.
This particular class and we want to add some width.
So we're going to go here with width.
We'll set it equal to 90% of the screen width.
We also want to place it in the center.
So we're going to go here with margin zero auto.
And then we want to add some padding that is going to be equal to two Rems, top bottom, and then left
and right, zero.
And now let's set up the logic for the big screen.
So once we get to the big screen, I actually want that big sidebar to be my first column.
And you know what?
I think it's going to be faster if I go with media here.
Let's go with min width and let's set it up as 992 pixels.
And then let's target both of these suckers over here because we'll use them.
We'll just change some values around.
So first of all, for the dashboard, once we get to 992, I want to go with auto.
So now.
The first column will have the width of the content.
So basically the first column is going to be the width of the big sidebar, whatever it is.
Because again, remember on a big screen we only display the big sidebar.
Now, when it comes to the dashboard page, we'll just change it around where it's not going to be 90%
of the screen width, it's going to be 90% of the content.
And when it comes to content, it's equal to one fraction.
So let's save it.
And again, I think it's going to be easier if I just showcase that.
So notice this is the look we have on a small screen.
We'll have the small sidebar.
Which eventually will have more logic.
At the moment we just see the text.
Then right below it we have the nav bar.
So technically this is our second column on a big screen.
And then once we get to the big screen, we'll have the big sidebar, which is going to be our first
column, and then the nav bar and admin is our second column.
And with this in place, we can move on to the next topic.