1
00:00:00,110 --> 00:00:04,100
Now, as far as the CSS, let's navigate to wrappers.

2
00:00:04,370 --> 00:00:06,550
We're looking for the dashboard JS.

3
00:00:06,590 --> 00:00:10,220
And essentially we want to remove all of this logic.

4
00:00:10,490 --> 00:00:13,730
And we'll start by targeting the dashboard.

5
00:00:13,820 --> 00:00:14,930
So again.

6
00:00:15,900 --> 00:00:17,500
Let's get on the same page.

7
00:00:17,520 --> 00:00:19,740
We're talking about this class over here.

8
00:00:20,010 --> 00:00:25,260
So this is going to be the parent pretty much for all of these components.

9
00:00:25,560 --> 00:00:27,870
And we just want to set up a.

10
00:00:28,770 --> 00:00:33,330
Grid layout, but it's basically going to be a.

11
00:00:34,150 --> 00:00:39,460
One column layout, which technically is the default setup for the grid.

12
00:00:39,520 --> 00:00:45,250
I just like this extra line of code because it clearly signals to me that eventually I'm going to be

13
00:00:45,250 --> 00:00:46,450
setting up more columns.

14
00:00:46,450 --> 00:00:50,530
So I'm going to go with grid template columns and I'll set it up as one fraction.

15
00:00:50,530 --> 00:00:51,760
So notice now.

16
00:00:52,360 --> 00:00:55,320
We have small sidebar nav bar and the admin one.

17
00:00:55,330 --> 00:00:59,680
And of course once we get to the big screen, the deal is going to be the same.

18
00:00:59,680 --> 00:01:04,269
The only difference is that instead of small sidebar, we'll have the big sidebar.

19
00:01:04,269 --> 00:01:06,940
So all of them are in one column.

20
00:01:07,240 --> 00:01:11,650
And when it comes to a dashboard page, this is where we have the outlet, right?

21
00:01:12,380 --> 00:01:14,060
So first, let's Target.

22
00:01:14,820 --> 00:01:17,930
This particular class and we want to add some width.

23
00:01:17,940 --> 00:01:20,100
So we're going to go here with width.

24
00:01:20,280 --> 00:01:23,250
We'll set it equal to 90% of the screen width.

25
00:01:23,250 --> 00:01:25,740
We also want to place it in the center.

26
00:01:25,740 --> 00:01:29,310
So we're going to go here with margin zero auto.

27
00:01:29,310 --> 00:01:34,890
And then we want to add some padding that is going to be equal to two Rems, top bottom, and then left

28
00:01:34,890 --> 00:01:36,240
and right, zero.

29
00:01:36,690 --> 00:01:39,570
And now let's set up the logic for the big screen.

30
00:01:39,570 --> 00:01:45,450
So once we get to the big screen, I actually want that big sidebar to be my first column.

31
00:01:45,900 --> 00:01:46,500
And you know what?

32
00:01:46,500 --> 00:01:49,920
I think it's going to be faster if I go with media here.

33
00:01:51,070 --> 00:01:56,830
Let's go with min width and let's set it up as 992 pixels.

34
00:01:57,070 --> 00:02:01,690
And then let's target both of these suckers over here because we'll use them.

35
00:02:01,720 --> 00:02:03,530
We'll just change some values around.

36
00:02:03,550 --> 00:02:08,500
So first of all, for the dashboard, once we get to 992, I want to go with auto.

37
00:02:08,530 --> 00:02:09,970
So now.

38
00:02:10,639 --> 00:02:15,290
The first column will have the width of the content.

39
00:02:15,600 --> 00:02:22,640
So basically the first column is going to be the width of the big sidebar, whatever it is.

40
00:02:22,640 --> 00:02:27,770
Because again, remember on a big screen we only display the big sidebar.

41
00:02:27,800 --> 00:02:33,590
Now, when it comes to the dashboard page, we'll just change it around where it's not going to be 90%

42
00:02:33,590 --> 00:02:38,660
of the screen width, it's going to be 90% of the content.

43
00:02:38,660 --> 00:02:42,430
And when it comes to content, it's equal to one fraction.

44
00:02:42,440 --> 00:02:43,520
So let's save it.

45
00:02:43,520 --> 00:02:47,050
And again, I think it's going to be easier if I just showcase that.

46
00:02:47,060 --> 00:02:50,450
So notice this is the look we have on a small screen.

47
00:02:51,080 --> 00:02:52,820
We'll have the small sidebar.

48
00:02:53,610 --> 00:02:56,640
Which eventually will have more logic.

49
00:02:56,670 --> 00:02:58,720
At the moment we just see the text.

50
00:02:58,740 --> 00:03:01,020
Then right below it we have the nav bar.

51
00:03:01,200 --> 00:03:04,710
So technically this is our second column on a big screen.

52
00:03:04,710 --> 00:03:10,140
And then once we get to the big screen, we'll have the big sidebar, which is going to be our first

53
00:03:10,140 --> 00:03:15,610
column, and then the nav bar and admin is our second column.

54
00:03:15,630 --> 00:03:19,410
And with this in place, we can move on to the next topic.