1
00:00:00,200 --> 00:00:00,590
All right.

2
00:00:00,590 --> 00:00:04,250
And once we have the big sidebar in place, now let's set up the CSS.

3
00:00:05,230 --> 00:00:10,060
Again, we're looking for rappers and in this case, big sidebar DJs.

4
00:00:10,300 --> 00:00:12,760
And the logic is going to be opposite.

5
00:00:13,000 --> 00:00:21,220
So since we want to hide the big sidebar on a small screen, we'll go right away with display none.

6
00:00:21,800 --> 00:00:26,450
So now we cannot see this particular sidebar on small screen.

7
00:00:26,810 --> 00:00:31,580
And then when it comes to rest of the styles, we'll set them up in a media query.

8
00:00:31,610 --> 00:00:33,310
Now, what is going to be the min width?

9
00:00:33,320 --> 00:00:39,260
Well, remember, we're hiding the small sidebar on 992.

10
00:00:39,290 --> 00:00:44,360
So, of course, all of the styles are going to be applied when we get to 992.

11
00:00:44,390 --> 00:00:45,530
Yep, that's correct.

12
00:00:45,530 --> 00:00:52,310
So we're going to go here with min width and we'll set it to 992 pixels over here.

13
00:00:52,790 --> 00:00:56,180
And we'll start by just saying display and block.

14
00:00:56,510 --> 00:00:57,380
Let's save that.

15
00:00:57,380 --> 00:00:59,630
And this is what we should see on the screen.

16
00:00:59,630 --> 00:01:07,910
Again, we won't be able to see anything once we get to the screen size, which is less than 992.

17
00:01:07,940 --> 00:01:13,160
Once it's 992, that's when we display the big sidebar.

18
00:01:13,370 --> 00:01:16,460
And essentially, let's just start with the box shadow.

19
00:01:16,490 --> 00:01:20,300
Now, in this case, we're not setting up the line in the bottom.

20
00:01:20,300 --> 00:01:22,320
We're setting it on the right hand side.

21
00:01:22,320 --> 00:01:27,660
So we're going to go here with box shadow one pixel zero.

22
00:01:28,630 --> 00:01:29,620
Pixels.

23
00:01:30,430 --> 00:01:33,250
Zero pixels over here.

24
00:01:33,670 --> 00:01:37,970
Then one more zero pixels, and then we have rgba.

25
00:01:39,590 --> 00:01:44,450
And we're going to set it to 0000.1.

26
00:01:44,870 --> 00:01:45,950
Let's save this.

27
00:01:46,070 --> 00:01:47,300
And then.

28
00:01:48,130 --> 00:01:53,570
Remember again, we have the parent, the sidebar container, and then we have the content.

29
00:01:53,590 --> 00:01:56,710
So we're going to go here with sidebar container.

30
00:01:57,280 --> 00:02:03,490
And for this one, we're going to go first with the background and we want to set it equal to X variable.

31
00:02:03,490 --> 00:02:08,830
And again, since we have that dark mode eventually coming up, we're going to go with background,

32
00:02:08,830 --> 00:02:11,290
secondary and then color.

33
00:02:12,100 --> 00:02:14,500
And then let's go with Min.

34
00:02:15,500 --> 00:02:16,000
Right.

35
00:02:16,300 --> 00:02:18,850
And let's set it equal to 100%.

36
00:02:19,180 --> 00:02:22,720
Now, also, we want to set up the height to be 100%.

37
00:02:23,540 --> 00:02:26,000
So set it right after that.

38
00:02:26,120 --> 00:02:29,270
Then let's go with the width and remember.

39
00:02:29,930 --> 00:02:30,710
On apparent.

40
00:02:30,710 --> 00:02:32,210
We're setting up that column layout.

41
00:02:32,210 --> 00:02:32,750
Correct.

42
00:02:32,750 --> 00:02:35,360
Remember it was auto and then one fraction.

43
00:02:35,360 --> 00:02:40,460
So in this case, we need to decide what is going to be the width and I'm going to go with 250 pixels.

44
00:02:40,610 --> 00:02:48,320
So now I can clearly see my big sidebar and then we want to hide it by default pretty much.

45
00:02:48,350 --> 00:02:52,550
Again, we're only going to show it if that show sidebar class is present.

46
00:02:52,550 --> 00:02:54,050
So what do we want to do?

47
00:02:54,740 --> 00:03:01,430
Well, we're going to go here with margin left and -250 pixels like so.

48
00:03:01,610 --> 00:03:03,680
Notice now, of course, it's going to be hidden.

49
00:03:03,680 --> 00:03:10,690
And yes, while I'm styling the big sidebar, unfortunately I'll have to toggle the screens in such

50
00:03:10,700 --> 00:03:12,110
way just so you can see.

51
00:03:12,140 --> 00:03:17,060
Now, of course, I'm not going to do it after every property that is going to be extremely annoying.

52
00:03:17,060 --> 00:03:20,030
But here and there, yes, I'll toggle it just to showcase.

53
00:03:20,060 --> 00:03:23,030
Now, as far as transition, I want to be very specific.

54
00:03:23,030 --> 00:03:25,730
I only want transition for my.

55
00:03:26,630 --> 00:03:33,380
Margin left and therefore I'm going to go with margin left, 0.3 seconds, ease in and out.

56
00:03:33,560 --> 00:03:35,870
Then let's go with the content.

57
00:03:35,870 --> 00:03:41,360
And since I want to display the sidebar when there's more content.

58
00:03:41,390 --> 00:03:48,590
For example, all the jobs I need to keep this content as position sticky.

59
00:03:48,620 --> 00:03:53,750
Now, since I'm using render, it just takes a little bit of time for the server to wake up.

60
00:03:53,750 --> 00:03:55,340
So I'll showcase that in a second.

61
00:03:55,340 --> 00:03:57,950
So let me set up the styles first.

62
00:03:58,190 --> 00:04:00,770
We're going to go here with Position Sticky.

63
00:04:00,770 --> 00:04:06,110
And again, I cannot showcase that in our current project since we don't have any content and we want

64
00:04:06,110 --> 00:04:09,950
to go with top zero just like we did in the nav bar.

65
00:04:09,950 --> 00:04:12,950
And then remember, we also have this show.

66
00:04:13,780 --> 00:04:19,870
Sidebar and this one, we want to set up margin left and we want to set it equal to zero.

67
00:04:19,870 --> 00:04:24,400
So by default, we hide it -250.

68
00:04:24,400 --> 00:04:29,380
And then if the show sidebar class is present, then we go back to the zero.

69
00:04:29,380 --> 00:04:32,170
So notice these are all the jobs, right?

70
00:04:32,170 --> 00:04:38,470
And when we start scrolling, not only the nav bar stays on the page, but also the sidebar.

71
00:04:38,470 --> 00:04:41,980
That's why we went with the content and sticky.

72
00:04:42,730 --> 00:04:43,480
Okay, good.

73
00:04:43,510 --> 00:04:45,940
Then remember, we have the header one.

74
00:04:46,780 --> 00:04:49,480
That's where we have the logo.

75
00:04:49,810 --> 00:04:54,600
Let's just go here with height and six rims.

76
00:04:54,790 --> 00:04:57,730
After that, we want to go with display flex.

77
00:04:58,150 --> 00:04:59,980
We want to align everything in the center.

78
00:04:59,980 --> 00:05:05,830
So align items center and then padding left is going to be.

79
00:05:07,080 --> 00:05:07,980
2.5.

80
00:05:08,340 --> 00:05:12,390
So batting left and let's go with 2.5.

81
00:05:13,190 --> 00:05:14,020
Rims.

82
00:05:14,240 --> 00:05:16,100
Then we also have the nav links.

83
00:05:16,100 --> 00:05:23,210
And remember, we have the classes in there in the component, the nav links class and the nav link.

84
00:05:23,210 --> 00:05:29,330
And again, what's super, super cool with styled components, we can style them differently because

85
00:05:29,330 --> 00:05:31,280
we need to keep in mind that of course.

86
00:05:31,950 --> 00:05:35,160
There's a difference between big sidebar and a small sidebar.

87
00:05:35,370 --> 00:05:40,860
So on a big sidebar, I want to style my nav links, let's say, differently.

88
00:05:40,860 --> 00:05:47,130
But what's really awesome is that we already have the classes there and we can nicely access them and

89
00:05:47,370 --> 00:05:53,250
whatever styles I apply over here are going to be only applied to the links that are located in the

90
00:05:53,250 --> 00:05:54,380
big sidebar.

91
00:05:54,390 --> 00:05:55,350
Hopefully that is clear.

92
00:05:55,350 --> 00:05:56,370
So padding.

93
00:05:57,180 --> 00:05:59,820
Top and we're going to go here with two rams.

94
00:05:59,850 --> 00:06:03,630
Then we want to go with Display Flex.

95
00:06:03,780 --> 00:06:06,570
After that, we want to go with flex direction.

96
00:06:07,390 --> 00:06:10,360
And we want to set it equal to a column one.

97
00:06:10,390 --> 00:06:12,610
Then when it comes to a NAV link.

98
00:06:12,640 --> 00:06:13,810
Same deal.

99
00:06:14,110 --> 00:06:19,480
It's going to be display flex since there is an icon as well as the.

100
00:06:20,460 --> 00:06:20,880
Text.

101
00:06:20,880 --> 00:06:26,100
So we'll go here with display flex, then align.

102
00:06:26,830 --> 00:06:27,910
Items center.

103
00:06:27,910 --> 00:06:30,410
So we just set them up vertically in the center.

104
00:06:30,430 --> 00:06:34,300
Color in this case is going to be equal to text.

105
00:06:35,010 --> 00:06:37,320
Secondary and color.

106
00:06:38,300 --> 00:06:39,170
Beautiful.

107
00:06:39,200 --> 00:06:41,570
And then let's also add some padding here.

108
00:06:41,660 --> 00:06:44,930
We're going to go with one REM and then zero.

109
00:06:45,170 --> 00:06:46,790
Then same deal.

110
00:06:46,790 --> 00:06:51,640
We'll go with padding left and we'll go to 2.5 REM.

111
00:06:51,680 --> 00:06:54,510
So we'll just add some padding on left and side.

112
00:06:54,530 --> 00:07:00,320
So padding, hyphen left and that is going to be equal to 2.5 rems.

113
00:07:00,500 --> 00:07:02,180
Text, transform, capitalize.

114
00:07:02,360 --> 00:07:04,700
And then let's also add the transition.

115
00:07:04,700 --> 00:07:11,360
So whenever we will hover over the links, I want to push them a little bit more to the right.

116
00:07:11,750 --> 00:07:15,800
And essentially, the way we do that, we just add this padding to the left, to all of the links.

117
00:07:15,800 --> 00:07:20,120
And then notice when we hover, we just increase a little bit that padding.

118
00:07:20,120 --> 00:07:20,780
That's it.

119
00:07:20,810 --> 00:07:22,740
That's all the logic to it.

120
00:07:22,760 --> 00:07:25,850
So for that, we want to go here with transition.

121
00:07:26,240 --> 00:07:28,880
We want to set up padding left.

122
00:07:29,680 --> 00:07:34,560
0.3 seconds, ease in and out.

123
00:07:34,570 --> 00:07:36,570
And then when we hover, what do we want to do?

124
00:07:36,580 --> 00:07:43,750
Well, like I said, we will increase that padding a little bit, so we'll go with nav link hover padding

125
00:07:43,750 --> 00:07:47,170
left is going to be three rems, so a little bit more.

126
00:07:48,150 --> 00:07:51,930
And also I want to add the color primary.

127
00:07:53,430 --> 00:07:54,690
Effectively.

128
00:07:54,690 --> 00:07:56,700
Let's set it up over here.

129
00:07:56,910 --> 00:08:03,660
We're going to go with color and let's try out primary 500.

130
00:08:04,110 --> 00:08:11,070
Then let's style the icon and active and let's see, maybe we'll need to add a little bit more styles.

131
00:08:11,070 --> 00:08:13,620
So for now, let's just go here with Icon.

132
00:08:14,280 --> 00:08:18,840
We'll go with font size and that is equal to 1.5 Rems.

133
00:08:18,870 --> 00:08:22,560
Then we're going to go with margin, right?

134
00:08:23,760 --> 00:08:26,430
So this is going to be equal to one Rmse.

135
00:08:26,580 --> 00:08:27,710
Let's check it out.

136
00:08:28,620 --> 00:08:29,130
Yep.

137
00:08:29,460 --> 00:08:31,500
This is how they look like.

138
00:08:31,530 --> 00:08:32,940
Okay, Awesome.

139
00:08:33,030 --> 00:08:34,049
And then.

140
00:08:34,909 --> 00:08:39,380
We also want to set up over here display grid.

141
00:08:41,210 --> 00:08:42,919
And place items in the center.

142
00:08:42,919 --> 00:08:46,370
So place items and we'll set it equal to center.

143
00:08:46,520 --> 00:08:47,210
And you know what?

144
00:08:47,210 --> 00:08:53,150
I'm noticing that the text and icon are changing the color instantly.

145
00:08:53,150 --> 00:08:53,810
So you know what?

146
00:08:53,810 --> 00:08:56,810
We can actually go over here as well with the transition.

147
00:08:57,020 --> 00:09:04,570
So when we hover over, there's going to be a transition and that is going to be equal to my CSS variable.

148
00:09:04,580 --> 00:09:06,080
So let's save it over here.

149
00:09:06,080 --> 00:09:12,350
And now this should take some time before we flip the color on the icon as well as the text.

150
00:09:12,350 --> 00:09:13,690
And that's what I wanted.

151
00:09:13,700 --> 00:09:19,100
And at the very, very, very, very, very end, we want to go with active class again, same deal.

152
00:09:19,130 --> 00:09:22,820
I'm not going to repeat the whole spiel.

153
00:09:23,000 --> 00:09:27,890
So essentially we get that active class and I just want to add the color and that is going to be equal

154
00:09:27,890 --> 00:09:29,000
to 500.

155
00:09:29,000 --> 00:09:31,340
So let me find it somewhere here.

156
00:09:31,340 --> 00:09:31,790
Yep.

157
00:09:31,790 --> 00:09:35,570
So over here I'm just going to grab this value so it's a little bit faster.

158
00:09:35,570 --> 00:09:41,160
So copy and paste and for the last time I'll toggle the screen and notice since we're located on stats

159
00:09:41,160 --> 00:09:48,480
page, these are the styles that we have in the big sidebar a job, all jobs and rest of the pages.

160
00:09:48,480 --> 00:09:52,260
And with this in place, we are ready to move on to the next step.