1
00:00:00,350 --> 00:00:04,660
And once we're done with the small sidebar, now let's set up the CSS.

2
00:00:04,670 --> 00:00:09,740
So we want to navigate to the assets wrappers we're looking for.

3
00:00:09,740 --> 00:00:11,720
Small sidebar over here.

4
00:00:12,670 --> 00:00:14,050
Let's delete everything.

5
00:00:15,920 --> 00:00:18,680
And let's set up everything from scratch.

6
00:00:19,070 --> 00:00:22,610
So once we remove the styles, this is what we're going to see on the screen.

7
00:00:22,790 --> 00:00:26,360
As far as the element, I use the aside.

8
00:00:27,130 --> 00:00:34,270
For the actual sidebar and right out of the gate I want to hide it once we get to 992.

9
00:00:34,300 --> 00:00:37,540
So essentially, the way we do that, we just go with media.

10
00:00:37,570 --> 00:00:45,070
Then in my case, I'm going to go with 992 because that's where all the changes are taking place.

11
00:00:45,070 --> 00:00:47,410
And we'll just say here, display none.

12
00:00:47,770 --> 00:00:49,210
Essentially, that's the logic.

13
00:00:49,210 --> 00:00:56,230
So now notice once we get to 992, we hide it and then we can see the big sidebar.

14
00:00:56,350 --> 00:00:59,480
And then pretty much we set up the styles for the small screen.

15
00:00:59,500 --> 00:01:01,000
Again, that's all we need to do.

16
00:01:01,000 --> 00:01:03,970
So this automatically hides the element.

17
00:01:04,940 --> 00:01:07,400
Once we get to 992.

18
00:01:07,910 --> 00:01:12,480
Now we'll just apply styles when we are on the small screen.

19
00:01:12,500 --> 00:01:16,520
Keep in mind that of course you can add this at the very end, but I just thought that it's going to

20
00:01:16,520 --> 00:01:21,620
be easier to understand the logic if we set it up right at the top.

21
00:01:21,860 --> 00:01:23,780
First, let's start with sidebar container.

22
00:01:23,780 --> 00:01:25,790
Remember, that's the parent.

23
00:01:26,960 --> 00:01:30,000
And we'll set it as position fixed.

24
00:01:30,020 --> 00:01:38,750
So essentially I just want to take it out of the normal flow and I want the sidebar to take up the entire

25
00:01:38,750 --> 00:01:39,530
screen.

26
00:01:39,740 --> 00:01:46,760
And in order to do that, we need to provide top left, right, as well as the bottom one zero.

27
00:01:46,790 --> 00:01:52,700
However, there's a nifty property called Inset, and if we set this equal to zero, then it pretty

28
00:01:52,700 --> 00:01:55,310
much does the same thing again behind the scenes.

29
00:01:55,310 --> 00:02:00,110
It sets the top, bottom left and right equals to zero.

30
00:02:00,110 --> 00:02:02,150
And as a result, the.

31
00:02:03,580 --> 00:02:06,370
Element is going to take up the entire screen.

32
00:02:06,760 --> 00:02:09,220
As far as the background, I'm going to go with the black one.

33
00:02:09,220 --> 00:02:13,840
So 000 and then 0.7.

34
00:02:13,840 --> 00:02:16,270
So black one with some kind of opacity.

35
00:02:16,300 --> 00:02:18,580
Again, this is that black overlay.

36
00:02:18,730 --> 00:02:26,830
And then the links and everything is going to be sitting in that content div Then we want to place the

37
00:02:26,830 --> 00:02:29,920
content div in the center, essentially our child.

38
00:02:29,920 --> 00:02:35,380
And therefore this one, the overlay will set up display flex.

39
00:02:35,710 --> 00:02:39,910
Remember we have justify content and we'll set it equal to center.

40
00:02:39,910 --> 00:02:43,990
So this sits horizontally and align items.

41
00:02:43,990 --> 00:02:45,580
We'll set it equal to center as well.

42
00:02:45,580 --> 00:02:47,410
So this will set it vertically.

43
00:02:47,560 --> 00:02:49,420
I do want to go with the Z index.

44
00:02:49,420 --> 00:02:56,530
And remember, we're using the class to show and hide the sidebar.

45
00:02:56,530 --> 00:02:57,190
Correct.

46
00:02:57,370 --> 00:03:04,130
So not only we're hiding at 992, but also in here we have this class of show sidebar.

47
00:03:04,610 --> 00:03:07,580
And if it's present, then we display it.

48
00:03:07,580 --> 00:03:14,600
So the way we'll do that, we'll hide the sidebar container by default, and only if that class is present,

49
00:03:14,600 --> 00:03:15,710
then we'll display it.

50
00:03:15,710 --> 00:03:18,410
And therefore in here we'll go with negative one.

51
00:03:18,410 --> 00:03:20,480
So again, by default, it's going to be hidden.

52
00:03:20,660 --> 00:03:23,570
Opacity is going to be equal to zero.

53
00:03:23,840 --> 00:03:27,320
So once I save notice, we won't be able to see anything.

54
00:03:27,440 --> 00:03:29,570
Then we'll add the transition.

55
00:03:29,570 --> 00:03:32,150
Since I want this change to happen over time.

56
00:03:32,150 --> 00:03:40,760
And for this I'll use my transition variable over here and then at the very end we'll go with visibility.

57
00:03:41,490 --> 00:03:43,860
And we'll set it equal to hidden.

58
00:03:44,250 --> 00:03:45,260
Let's save.

59
00:03:45,270 --> 00:03:47,310
And now we want to create that class.

60
00:03:47,310 --> 00:03:50,340
The show one The show sidebar class.

61
00:03:50,340 --> 00:03:52,370
So show, sidebar.

62
00:03:52,380 --> 00:03:59,310
And essentially we want to take these values, the Z indexes, the opacity and visibility and set it

63
00:03:59,310 --> 00:04:00,450
to the opposite.

64
00:04:00,480 --> 00:04:03,060
So first, let me remove this transition.

65
00:04:03,830 --> 00:04:04,910
We don't need it.

66
00:04:05,060 --> 00:04:08,420
Zindex is going to be equal to 99.

67
00:04:08,840 --> 00:04:14,120
Opacity is going to be equal to one and visibility is going to be equal to visible.

68
00:04:14,120 --> 00:04:16,160
So let's save and check it out.

69
00:04:16,339 --> 00:04:22,340
Since we have the show sidebar class present now again, we display it.

70
00:04:22,460 --> 00:04:23,600
Hopefully it's clear.

71
00:04:23,600 --> 00:04:28,910
And now let's start working on the content where all of the elements are sitting.

72
00:04:29,030 --> 00:04:35,360
So we're going to go over here with class then As far as the background, again, same deal.

73
00:04:35,390 --> 00:04:40,190
We're going to go with Var and we'll use one of the CSS variables.

74
00:04:40,190 --> 00:04:42,350
So we're going to look for background.

75
00:04:43,040 --> 00:04:46,040
Secondary and color.

76
00:04:46,610 --> 00:04:47,810
That's number one.

77
00:04:47,810 --> 00:04:50,870
And then the width is going to be the fluid width.

78
00:04:50,960 --> 00:04:52,940
So var hyphen.

79
00:04:52,940 --> 00:04:54,620
Hyphen fluid.

80
00:04:55,410 --> 00:04:57,060
And hyphen width.

81
00:04:57,240 --> 00:04:58,290
Let's save.

82
00:04:58,650 --> 00:04:59,250
Check it out.

83
00:04:59,260 --> 00:05:07,590
Now we have a white background and we have some kind of width for our content as far as the height.

84
00:05:08,640 --> 00:05:12,620
Let's set it equal to 95 units.

85
00:05:13,290 --> 00:05:15,430
And also, let's add the border radius.

86
00:05:15,430 --> 00:05:20,760
So border radius and we'll set it equal to CSS variable.

87
00:05:20,760 --> 00:05:23,460
So var hyphen hyphen border.

88
00:05:25,010 --> 00:05:25,880
Radius.

89
00:05:27,480 --> 00:05:28,250
Let's see.

90
00:05:28,260 --> 00:05:28,890
Yep.

91
00:05:29,250 --> 00:05:31,380
We should have the rounded edges.

92
00:05:31,410 --> 00:05:32,940
Let's add some padding here.

93
00:05:33,790 --> 00:05:37,840
So in my case, I'm going to go with four rims and then two rims.

94
00:05:39,380 --> 00:05:46,850
After that, let's set up position relative because the close button is going to be position absolute

95
00:05:46,850 --> 00:05:50,750
and in order to control it, we need to set the parent to be position relative.

96
00:05:50,780 --> 00:05:58,720
With that said, rest of them, I want to set up in one column and for that I'm going to use the Flexbox.

97
00:05:58,730 --> 00:06:01,150
So first, let's start with position relative.

98
00:06:01,160 --> 00:06:02,600
Again, this is for.

99
00:06:03,560 --> 00:06:04,970
The close button.

100
00:06:05,330 --> 00:06:07,760
And then we want to go with display.

101
00:06:08,840 --> 00:06:13,340
Let's set it equal to flex, then align items.

102
00:06:13,340 --> 00:06:14,660
Let's set it to center.

103
00:06:14,660 --> 00:06:21,020
But the flex direction is going to be column like so.

104
00:06:21,610 --> 00:06:27,190
And once we have the flex styles in place, let's go with close hyphen BTN.

105
00:06:27,370 --> 00:06:30,460
In here, like I said, we want to go with position.

106
00:06:30,460 --> 00:06:31,510
Absolute.

107
00:06:32,490 --> 00:06:36,120
And since, again, we need to provide the coordinates.

108
00:06:36,210 --> 00:06:40,710
I'm going to go with top ten pixels and left ten pixels.

109
00:06:40,710 --> 00:06:44,500
So ten pixels from the top and ten pixels from the left.

110
00:06:44,520 --> 00:06:49,680
Since it's a button, I'm going to add background transparent.

111
00:06:51,090 --> 00:06:54,390
And also we want to do the same thing with border color.

112
00:06:55,570 --> 00:06:58,390
And also we'll set it to Transparent.

113
00:06:59,470 --> 00:07:06,130
And then we'll increase the font size and we'll set it equal to two rems like so.

114
00:07:06,340 --> 00:07:08,570
And let's also add the color.

115
00:07:08,590 --> 00:07:16,120
So we're going to set color Var and this is going to be equal to red dark, one of the CSS variables.

116
00:07:16,240 --> 00:07:20,530
And as far as the cursor, I'm going to set it equal to a pointer one.

117
00:07:20,800 --> 00:07:23,170
Then we have the nav links.

118
00:07:23,200 --> 00:07:26,470
So essentially we don't need to do anything with the logo.

119
00:07:26,500 --> 00:07:27,730
It's just going to stay over there.

120
00:07:27,730 --> 00:07:30,190
But we do want to style the nav links.

121
00:07:30,310 --> 00:07:34,210
Remember we added the class of NAV links.

122
00:07:34,300 --> 00:07:35,650
That was our div.

123
00:07:35,650 --> 00:07:41,890
And here we first want to start with padding and you know it's going to be padding top and we'll set

124
00:07:41,890 --> 00:07:43,570
it equal to two rems.

125
00:07:44,280 --> 00:07:45,420
Okay, Awesome.

126
00:07:45,630 --> 00:07:49,020
And for some reason, we have some kind of bug over here.

127
00:07:49,530 --> 00:07:50,070
Let me try.

128
00:07:50,100 --> 00:07:50,610
Yep.

129
00:07:50,640 --> 00:07:52,020
Everything works right now.

130
00:07:52,470 --> 00:07:57,510
And we want to again go with display, flex and flex direction column.

131
00:07:57,780 --> 00:08:00,000
So display, flex.

132
00:08:00,030 --> 00:08:02,460
Flex direction.

133
00:08:03,230 --> 00:08:05,260
And we're going to set it equal to column.

134
00:08:05,270 --> 00:08:10,040
If you're familiar, you know that the flex direction row is the default one.

135
00:08:10,040 --> 00:08:16,130
But since I want to stack them one on top of the other one, that's why we'll go with flex direction

136
00:08:16,130 --> 00:08:16,960
and column.

137
00:08:17,030 --> 00:08:20,900
Now, when it comes to the nav link, since we have.

138
00:08:21,650 --> 00:08:23,780
A icon as well as the text.

139
00:08:23,820 --> 00:08:26,810
We'll set this one as a flex parent as well.

140
00:08:26,810 --> 00:08:29,810
So we're going to be looking for NAV link class.

141
00:08:30,340 --> 00:08:32,799
First, let's start with display flex.

142
00:08:32,929 --> 00:08:34,450
Again, let's save.

143
00:08:35,059 --> 00:08:41,870
And we're going to align both of them in the center vertically, and therefore we'll set up align items

144
00:08:41,870 --> 00:08:43,549
and equal to center.

145
00:08:44,760 --> 00:08:46,800
And essentially we want to.

146
00:08:48,150 --> 00:08:51,060
The color and this is going to be equal to.

147
00:08:51,740 --> 00:08:52,970
Our variables.

148
00:08:52,970 --> 00:08:55,880
So text secondary.

149
00:08:56,480 --> 00:08:57,140
Color.

150
00:08:57,820 --> 00:09:03,850
And then let's also add a padding of one REM top, bottom and zero left and right.

151
00:09:04,150 --> 00:09:04,960
Okay, good.

152
00:09:04,990 --> 00:09:07,030
And then let's capitalize the text.

153
00:09:07,030 --> 00:09:09,790
So text transform.

154
00:09:09,800 --> 00:09:12,370
And this is going to be equal to capitalize.

155
00:09:12,700 --> 00:09:17,000
And then let's also add the transition since there's going to be a hover effect.

156
00:09:17,020 --> 00:09:23,800
So for this one, we're going to go with transition and we'll set it equal to variable transition.

157
00:09:24,970 --> 00:09:27,820
Now let's target the nav link when we hover.

158
00:09:27,820 --> 00:09:29,050
So nav link.

159
00:09:29,990 --> 00:09:30,620
Hover.

160
00:09:31,470 --> 00:09:33,870
And effectively I just want to change the color.

161
00:09:33,960 --> 00:09:37,230
So this is not going to be equal to the secondary one.

162
00:09:38,250 --> 00:09:41,130
We're actually going to go with primary 500.

163
00:09:41,400 --> 00:09:48,030
So effectively, when we hover over the link notice, we'll get this primary color.

164
00:09:48,060 --> 00:09:50,970
Then we want to style the icon.

165
00:09:52,830 --> 00:09:53,400
For that.

166
00:09:53,400 --> 00:09:54,750
We have the class, I believe.

167
00:09:54,750 --> 00:09:55,830
Let me double check.

168
00:09:57,020 --> 00:09:58,020
Let's navigate back.

169
00:09:58,040 --> 00:09:58,480
Yep.

170
00:09:58,490 --> 00:10:03,860
Notice the span as the class of icon and we'll increase the font size.

171
00:10:04,040 --> 00:10:07,280
We'll set it equal to 1.5 rems.

172
00:10:08,090 --> 00:10:10,490
Then we'll go with margin.

173
00:10:11,690 --> 00:10:12,410
Right.

174
00:10:12,710 --> 00:10:14,970
We'll set that one equal to one REM.

175
00:10:16,280 --> 00:10:21,980
We'll go display grid and we'll place the items in the center because, again, same deal.

176
00:10:22,310 --> 00:10:28,790
Since we have the icon inside of the span in order to place it exactly in the center, we need to do

177
00:10:29,420 --> 00:10:31,370
a little bit of acrobatics, I should say.

178
00:10:31,370 --> 00:10:36,430
So we'll go here with place items and let's set it equal to center.

179
00:10:36,440 --> 00:10:39,550
So now the icons are exactly in the center.

180
00:10:39,560 --> 00:10:44,060
We do want to add some transition since there's going to be a hover effect and all that.

181
00:10:44,240 --> 00:10:46,550
And once the icon is exactly in the center.

182
00:10:46,550 --> 00:10:48,800
Now let's discuss the active class.

183
00:10:48,830 --> 00:10:52,370
Remember in the previous video I showcased that.

184
00:10:52,900 --> 00:11:00,460
When we use the nav link component, the link which represents the active page gets the active class

185
00:11:00,700 --> 00:11:04,540
and I'm not going to open up the dev tools to show that one more time.

186
00:11:05,260 --> 00:11:07,750
In this case, we simply want to add some styles.

187
00:11:07,750 --> 00:11:13,540
So I want to say the active class is also going to get the primary 500.

188
00:11:13,660 --> 00:11:17,480
And since I already have the color over here, I can just copy and paste and now check it out.

189
00:11:17,500 --> 00:11:18,460
Not only.

190
00:11:19,150 --> 00:11:25,990
We have this primary color when we hover over the link, but also we nicely display what is the current

191
00:11:25,990 --> 00:11:27,070
active page.