WEBVTT

1
00:00:00.510 --> 00:00:02.190
Over the next few guides, we're going to start

2
00:00:02.190 --> 00:00:05.340
to build out our navigation bar styles.

3
00:00:05.340 --> 00:00:08.533
So here we are going to no longer just have kind

4
00:00:08.533 --> 00:00:10.800
of this default html styling.

5
00:00:10.800 --> 00:00:13.720
Instead, we're going to have really nice links

6
00:00:13.720 --> 00:00:16.950
and a styled logo that are also going

7
00:00:16.950 --> 00:00:19.670
to have some reactive behaviors.

8
00:00:19.670 --> 00:00:23.050
You're also going to be able to learn how you can work

9
00:00:23.050 --> 00:00:26.799
with active styles, which means that the links themselves

10
00:00:26.799 --> 00:00:29.864
can know what page they're on

11
00:00:29.864 --> 00:00:32.370
and they can have different styles because of that

12
00:00:32.370 --> 00:00:35.280
and so we're going to stretch this out into a few guides.

13
00:00:35.280 --> 00:00:39.410
Now when we were building out our portfolio item layout

14
00:00:39.410 --> 00:00:41.979
and styles, we started writing the styles

15
00:00:41.979 --> 00:00:46.030
and then we implemented those directly into the jsx code

16
00:00:46.030 --> 00:00:48.661
and that's definitely one approach to take

17
00:00:48.661 --> 00:00:50.478
when you're building out your style

18
00:00:50.478 --> 00:00:52.410
and design implementation.

19
00:00:52.410 --> 00:00:55.390
In this set of guides and for our nav bar,

20
00:00:55.390 --> 00:00:57.337
I want to take the exact opposite approach,

21
00:00:57.337 --> 00:01:00.398
just so you can start to see different ways

22
00:01:00.398 --> 00:01:04.183
of implementing styles, so that you can decide on what

23
00:01:04.183 --> 00:01:07.700
you like the most and what's going to work best for you.

24
00:01:07.700 --> 00:01:09.640
So in this guide, what we're going to do

25
00:01:09.640 --> 00:01:12.320
is we're not going to write any style code,

26
00:01:12.320 --> 00:01:16.100
but instead we're going to create the jsx,

27
00:01:16.100 --> 00:01:19.033
which is going to look a lot like our HTML structure

28
00:01:19.033 --> 00:01:21.600
and then in the next guide, we're going to start

29
00:01:21.600 --> 00:01:23.200
to create the styles for it.

30
00:01:23.200 --> 00:01:25.280
So let's get started.

31
00:01:25.280 --> 00:01:28.239
If you open up Visual Studio Code,

32
00:01:28.239 --> 00:01:33.239
open up your nav bar component and here's where we're going

33
00:01:33.620 --> 00:01:36.703
to start writing that structure.

34
00:01:36.703 --> 00:01:40.600
So for right now, all we have is a basic div

35
00:01:40.600 --> 00:01:43.490
and then we have all of our elements listed out.

36
00:01:43.490 --> 00:01:45.910
What we're going to do is we're going to extend

37
00:01:45.910 --> 00:01:49.290
this a little bit and we're going to wrap up each one

38
00:01:49.290 --> 00:01:52.876
of these elements in a way that our styles are going

39
00:01:52.876 --> 00:01:56.773
to be able to select them and then position them properly

40
00:01:56.773 --> 00:01:58.100
on the page.

41
00:01:58.100 --> 00:01:59.940
So we're not really going to see a lot of changes

42
00:01:59.940 --> 00:02:03.638
on the page after this video, but after the next one,

43
00:02:03.638 --> 00:02:05.960
you're going to see all of that happening.

44
00:02:05.960 --> 00:02:07.920
So let's get started here.

45
00:02:07.920 --> 00:02:12.190
We're going to at the very root, so at this div

46
00:02:12.190 --> 00:02:13.950
that wraps everything up,

47
00:02:13.950 --> 00:02:16.780
we are going to create a class named here.

48
00:02:16.780 --> 00:02:21.384
We're going to call a class name here called nav-wrapper.

49
00:02:21.384 --> 00:02:25.380
So this is going to be a wrapper component

50
00:02:25.380 --> 00:02:28.280
or wrapper container really, that we're going to be able

51
00:02:28.280 --> 00:02:31.930
to select and then we're going to say all of the things,

52
00:02:31.930 --> 00:02:35.180
the links, the logos, all of those elements are going

53
00:02:35.180 --> 00:02:38.642
to be wrapped up inside of this nav wrapper.

54
00:02:38.642 --> 00:02:42.250
Now next what we're going to do is, we are going

55
00:02:42.250 --> 00:02:47.250
to have our logo, our name and then the links here.

56
00:02:47.400 --> 00:02:51.110
We want those all on the left hand side of the screen.

57
00:02:51.110 --> 00:02:54.330
So the next thing I'm going to do is under nav wrapper,

58
00:02:54.330 --> 00:02:57.700
I'm going to create a new div, a new nested div here

59
00:02:57.700 --> 00:03:02.700
and I'm going to wrap up the logo, the name and those links

60
00:03:03.160 --> 00:03:07.876
all in that div, hit save and now inside of this,

61
00:03:07.876 --> 00:03:10.436
I'm going to create a class name

62
00:03:10.436 --> 00:03:15.436
and I'm going to call this left-side.

63
00:03:15.560 --> 00:03:18.470
So this is going to contain all of the elements

64
00:03:18.470 --> 00:03:20.380
on the left hand side of the screen.

65
00:03:20.380 --> 00:03:22.481
What you're going to see in the next guide

66
00:03:22.481 --> 00:03:25.855
where we actually implement the styles themselves,

67
00:03:25.855 --> 00:03:30.200
what we're going to do is we are going to use Flexbox

68
00:03:30.200 --> 00:03:33.400
to be able to say all of the elements on the left hand side,

69
00:03:33.400 --> 00:03:36.570
we want to stay there and then we want to move any elements

70
00:03:36.570 --> 00:03:39.030
on the right hand side, which in this case is just going to

71
00:03:39.030 --> 00:03:42.421
be our is logged in and our logout link there.

72
00:03:42.421 --> 00:03:45.510
Then we want those on the right hand side.

73
00:03:45.510 --> 00:03:47.100
So that's our left side.

74
00:03:47.100 --> 00:03:51.720
And then I'm going to add a class name to our image here.

75
00:03:51.720 --> 00:03:54.570
So this image, I'm going to give a class directly

76
00:03:54.570 --> 00:03:58.617
to the image tag here and I'm going to call this nav-logo

77
00:03:59.599 --> 00:04:04.599
and then, for our name, I'm going to give this a class name

78
00:04:04.820 --> 00:04:06.718
of just name, just like this.

79
00:04:06.718 --> 00:04:10.050
Then after that what we're going to do is each one

80
00:04:10.050 --> 00:04:11.720
of these links is going

81
00:04:11.720 --> 00:04:15.600
to have its own dedicated style wrapper.

82
00:04:15.600 --> 00:04:17.700
Now, I'm not going to add the class name

83
00:04:17.700 --> 00:04:19.440
to the link tag itself.

84
00:04:19.440 --> 00:04:22.440
Instead, I'm going to wrap up each one of the links

85
00:04:22.440 --> 00:04:26.170
in its own nav link wrapper class.

86
00:04:26.170 --> 00:04:29.360
And you're gonna see why I'm doing this here

87
00:04:29.360 --> 00:04:31.930
in a little bit, especially in the next guide.

88
00:04:31.930 --> 00:04:33.898
So here I'm going to create a div.

89
00:04:33.898 --> 00:04:38.898
I'm going to wrap up the link in this div and I'm going

90
00:04:38.940 --> 00:04:43.350
to give this a class name of nav-link-wrapper.

91
00:04:44.600 --> 00:04:48.600
I'll hit save and then I'm going to apply this to each one

92
00:04:48.600 --> 00:04:50.460
of these other links.

93
00:04:50.460 --> 00:04:53.850
So we're going to apply it to the about and then

94
00:04:53.850 --> 00:04:54.821
to the blog.

95
00:04:54.821 --> 00:04:59.602
And then I'll hit save, so each one of these items,

96
00:04:59.602 --> 00:05:02.080
so the home link, the about in the blog,

97
00:05:02.080 --> 00:05:04.540
they're each going to get their own wrapper.

98
00:05:04.540 --> 00:05:07.050
Now the reason for this and you're not going to get

99
00:05:07.050 --> 00:05:09.821
to see it right now, but the reason for this is,

100
00:05:09.821 --> 00:05:13.640
once these elements are here, lined up right next

101
00:05:13.640 --> 00:05:17.130
to each other, what I'd like to do is when we hover

102
00:05:17.130 --> 00:05:20.543
over the element, I want to have a bottom border

103
00:05:20.543 --> 00:05:25.221
of the entire div that is added.

104
00:05:25.221 --> 00:05:29.650
I think this really clean looking bottom border

105
00:05:29.650 --> 00:05:31.900
is going to appear and then when you hover away,

106
00:05:31.900 --> 00:05:33.530
it's going to disappear.

107
00:05:33.530 --> 00:05:37.360
Now, we could use underlines, just like we have right here

108
00:05:37.360 --> 00:05:39.099
with the default HTML styling,

109
00:05:39.099 --> 00:05:41.930
but I think it actually looks kind of cool,

110
00:05:41.930 --> 00:05:44.530
instead of using the default underline

111
00:05:44.530 --> 00:05:47.830
to add a bottom border with some padding.

112
00:05:47.830 --> 00:05:49.860
So it's just something that looks,

113
00:05:49.860 --> 00:05:51.640
I think a little bit more professional.

114
00:05:51.640 --> 00:05:53.670
You can personally use anything you want

115
00:05:53.670 --> 00:05:55.680
because it is your portfolio.

116
00:05:55.680 --> 00:05:58.480
So, those are all of the elements we need

117
00:05:58.480 --> 00:05:59.800
for those nav links.

118
00:05:59.800 --> 00:06:02.610
And then the last thing we're going to do is

119
00:06:02.610 --> 00:06:05.017
at the very bottom here, I'm going to wrap up

120
00:06:05.017 --> 00:06:09.043
our logout button here with a div.

121
00:06:09.043 --> 00:06:14.043
I'm going to give it a class name of right-side

122
00:06:15.150 --> 00:06:18.424
and then at the very end of the A tag,

123
00:06:18.424 --> 00:06:21.270
I'm going to close out the div.

124
00:06:21.270 --> 00:06:23.420
And then hit save and you can see the way

125
00:06:23.420 --> 00:06:25.924
that prettier lines everything for me.

126
00:06:25.924 --> 00:06:27.850
So this is our structure.

127
00:06:27.850 --> 00:06:31.580
Just to kind of review, we have a nav wrapper class

128
00:06:31.580 --> 00:06:34.730
that's going to wrap up all of the elements.

129
00:06:34.730 --> 00:06:36.910
Everything from the logo, all the way

130
00:06:36.910 --> 00:06:38.760
through the logout button.

131
00:06:38.760 --> 00:06:41.810
From there, we are going to split the items

132
00:06:41.810 --> 00:06:44.160
into the elements on the left hand side

133
00:06:44.160 --> 00:06:45.730
and then on the right hand side,

134
00:06:45.730 --> 00:06:47.410
so that's the structure we're using there

135
00:06:47.410 --> 00:06:49.430
and we're going to use Flexbox to be able

136
00:06:49.430 --> 00:06:50.910
to create that layout.

137
00:06:50.910 --> 00:06:54.100
Then from there, we're simply adding these class names,

138
00:06:54.100 --> 00:06:55.970
so that we have something to select.

139
00:06:55.970 --> 00:06:58.130
I want to be able to select the nav logo,

140
00:06:58.130 --> 00:07:02.570
so that we can customize the sizing of the logo directly

141
00:07:02.570 --> 00:07:04.020
in our SAS files.

142
00:07:04.020 --> 00:07:06.058
Then I went to customize the name.

143
00:07:06.058 --> 00:07:09.230
Then I'm going to apply the same exact style

144
00:07:09.230 --> 00:07:11.865
to our nav link wrapper elements here.

145
00:07:11.865 --> 00:07:15.270
And then the right hand side, our logout button,

146
00:07:15.270 --> 00:07:18.059
I want that to be placed all the way to the right hand side

147
00:07:18.059 --> 00:07:19.290
of the screen.

148
00:07:19.290 --> 00:07:21.050
So this is our jsx code.

149
00:07:21.050 --> 00:07:23.920
This is taking a different approach

150
00:07:23.920 --> 00:07:26.900
where we're kind of writing code that hasn't actually...

151
00:07:26.900 --> 00:07:29.501
We're writing style code that has actually changed the style

152
00:07:29.501 --> 00:07:31.210
or the layout yet.

153
00:07:31.210 --> 00:07:34.090
But we've added all of the selector elements

154
00:07:34.090 --> 00:07:36.037
that we're going to need and in the next guide,

155
00:07:36.037 --> 00:07:38.938
we're going to write the actual style implementation,

156
00:07:38.938 --> 00:07:42.090
so that is going to grab each one of these elements

157
00:07:42.090 --> 00:07:45.563
and it's going to position them on the pages properly.

Resources

• Source code