Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,330 --> 00:00:07,310
OK, now that we have our menu item and our shop page, what we're going to build is our header.
2
00:00:07,800 --> 00:00:14,400
We need an easier way to navigate between our pages and we want to build this component in such a way
3
00:00:14,400 --> 00:00:21,120
so that it's always present, no matter what page we navigate to now, we want to do it in such a way
4
00:00:21,120 --> 00:00:25,470
that we don't have to put header on every single page component that we have.
5
00:00:25,770 --> 00:00:28,680
But that's really easy with react router Dom.
6
00:00:29,520 --> 00:00:33,390
Now, before I show you that, let's just build the header component.
7
00:00:33,600 --> 00:00:35,370
Now, let's go back to our application.
8
00:00:36,420 --> 00:00:39,210
And let's create a header component.
9
00:00:40,710 --> 00:00:47,140
And in our had our component, we are going to have the usual suspects, we need a header component,
10
00:00:47,140 --> 00:00:53,520
Dutch RSX and a header style DOT SAS.
11
00:00:54,840 --> 00:00:57,480
And in our head, our component, we're going to import.
12
00:00:58,620 --> 00:01:00,330
React from react.
13
00:01:01,510 --> 00:01:03,700
And we're going to import our stylesheet in.
14
00:01:08,940 --> 00:01:13,680
Our head, our component is going to be a functional component.
15
00:01:14,880 --> 00:01:18,630
And it's going to have a div that contains our header code.
16
00:01:19,500 --> 00:01:27,090
And this code is going to resemble pretty much exactly what we see, so it's just going to be an outer
17
00:01:27,090 --> 00:01:36,060
container, this group of option links that we have over here that will be contained in that group option
18
00:01:36,060 --> 00:01:38,760
link container and then a logo.
19
00:01:39,630 --> 00:01:44,340
So what we're going to add here is a class name of heter.
20
00:01:46,000 --> 00:01:55,780
And then we are going to create our logo, so our logo will link to the homepage when you click it and
21
00:01:55,780 --> 00:02:01,240
the way we do that is we import in link.
22
00:02:02,130 --> 00:02:03,840
From React router dom.
23
00:02:06,720 --> 00:02:08,940
And then we will just put Lincoln.
24
00:02:09,830 --> 00:02:14,240
With the two pointing to our homepage route.
25
00:02:17,060 --> 00:02:28,250
And we do want to use our actual icon, but I've provided that for us in the format of an SPG and C.G.
26
00:02:28,250 --> 00:02:35,810
icons are essentially scalable vector graphics, which are really small, really performant, but look
27
00:02:35,810 --> 00:02:39,550
the same no matter how large or how small that image is expanded.
28
00:02:40,010 --> 00:02:40,960
And that's really great.
29
00:02:42,300 --> 00:02:49,830
And I have that for us right here, so you can just copy it from the file that I have provided in this
30
00:02:49,830 --> 00:02:50,190
lesson.
31
00:02:53,610 --> 00:02:58,080
Now, what we're going to do is we're going make a new folder in our source called Assets.
32
00:02:59,110 --> 00:03:02,650
And in it, we are just going to paste, OK?
33
00:03:03,600 --> 00:03:09,570
And you'll see a bunch of code that actually represents the Crown SVG, but in our header, we're just
34
00:03:09,570 --> 00:03:14,790
going to import this into our component and we're going to import from.
35
00:03:16,500 --> 00:03:23,880
Assets around us and what we're going to write is react component as logo.
36
00:03:24,900 --> 00:03:30,750
Because it's not a sex file, we don't actually set the import, we're just importing in this SEVGI
37
00:03:30,870 --> 00:03:35,490
as this Riak component keyword, but we're setting it to the logo here.
38
00:03:36,420 --> 00:03:40,830
And by doing this, we are now able to place it right here.
39
00:03:43,220 --> 00:03:46,340
And we can also give it the class name of logo.
40
00:03:47,620 --> 00:03:55,330
And our class name for our link will be logo container, because we want that container to have some
41
00:03:55,330 --> 00:03:56,280
style on it as well.
42
00:03:57,850 --> 00:04:04,000
Now our options will be held in their own individual options container.
43
00:04:05,920 --> 00:04:07,720
And they will also be Linc's.
44
00:04:10,210 --> 00:04:13,660
And they will point to our shop.
45
00:04:15,230 --> 00:04:17,000
And have the class name.
46
00:04:19,149 --> 00:04:22,870
And inside this first one will be our shop.
47
00:04:23,900 --> 00:04:27,710
And then our second one will be content.
48
00:04:30,310 --> 00:04:32,020
And then we just export it out.
49
00:04:33,450 --> 00:04:36,970
And we just bring this into our ABC's.
50
00:04:41,330 --> 00:04:43,400
Once we import this in.
51
00:04:46,070 --> 00:04:47,930
Opponents header header component.
52
00:04:48,880 --> 00:04:54,160
All we have to do is just place this header outside of the switch.
53
00:04:55,200 --> 00:05:04,380
And the routes that contain all of our page components because by doing this are header is always present
54
00:05:04,380 --> 00:05:12,390
and rendered despite whatever react router, switch component and root components decide to render onto
55
00:05:12,390 --> 00:05:12,900
the page.
56
00:05:13,680 --> 00:05:22,560
And this is really great because if we had, say, pop ups or overlays or footers that we were always
57
00:05:22,560 --> 00:05:29,130
wanting to display in our application or at least be on the page, regardless of what path the user
58
00:05:29,130 --> 00:05:31,830
is on, we would just do it like this.
59
00:05:31,830 --> 00:05:37,310
And this is really, really awesome because this makes our app very intuitive.
60
00:05:37,320 --> 00:05:38,520
It looks very composable.
61
00:05:39,620 --> 00:05:45,020
Because we know all of our pages exist here and our header exists outside of this switch.
62
00:05:46,060 --> 00:05:52,480
OK, now if we go to our application, we'll see that we have what looks like the header, just no styling
63
00:05:52,480 --> 00:05:52,600
it.
64
00:05:53,350 --> 00:05:55,970
So let's write the styles.
65
00:05:56,320 --> 00:05:59,380
Now, I do have them actually written already.
66
00:06:02,690 --> 00:06:08,330
Our header, which is the containing d'Hiv, has a width of one hundred percent and a height of seventy
67
00:06:08,330 --> 00:06:08,850
pixels.
68
00:06:09,470 --> 00:06:16,820
We set a display flex so that when we put justify content space between the children inside of this
69
00:06:16,820 --> 00:06:17,260
parent.
70
00:06:17,840 --> 00:06:24,740
So our logo container and the options will be pushed apart as far as possible with any remaining space
71
00:06:24,740 --> 00:06:29,030
that they don't themselves don't take up as far as the width is concerned.
72
00:06:30,240 --> 00:06:35,940
So there's a margin bottom that pushes our pages twenty five pixels down from anything below the header
73
00:06:36,660 --> 00:06:42,570
and then our logo container just has a width of 70 pixels, whereas our options.
74
00:06:43,760 --> 00:06:52,280
Has a width of 50 percent, so it always takes a 50 percent of whatever with the header is and they
75
00:06:52,280 --> 00:06:53,630
align everything centered.
76
00:06:54,700 --> 00:07:00,010
And they're always on the flex and so justify constant flux and means that we want to always set them
77
00:07:00,010 --> 00:07:04,480
so that they are on the right side of the component.
78
00:07:04,480 --> 00:07:08,110
So they're on the end of the actual flex box.
79
00:07:09,300 --> 00:07:15,240
And then our options have some minor padding so that they are not so grouped together and now we look
80
00:07:15,240 --> 00:07:23,160
at our code, we see that our crown takes us to the home, our shop takes us to the shop.
81
00:07:23,670 --> 00:07:28,070
And we have a very basic version of our header setup.
82
00:07:28,530 --> 00:07:31,860
We have an out of the contact page at, but we will do that at the very end.
83
00:07:32,280 --> 00:07:39,750
What we should do, though, is we should modify our link tags that we use as our options to not have
84
00:07:39,750 --> 00:07:45,560
this underline or this purple color that comes with an A tag.
85
00:07:46,020 --> 00:07:50,360
Now, even though it's a link component, if we inspect it, we see that what gets rendered.
86
00:07:50,370 --> 00:07:52,680
Is this a tag?
87
00:07:52,800 --> 00:07:53,120
Right.
88
00:07:53,160 --> 00:07:54,270
This native, a tag.
89
00:07:54,480 --> 00:08:02,760
So we know that reaction router dom actually modifies the tag and then gives it the functionality inside
90
00:08:02,760 --> 00:08:05,480
of itself to do the behavior.
91
00:08:05,490 --> 00:08:10,140
So to do that, we have to actually modify our access.
92
00:08:10,710 --> 00:08:19,320
And we can do this right here by sending text decoration to none and the color to black, we could just
93
00:08:19,320 --> 00:08:22,260
target selectively the link itself.
94
00:08:23,340 --> 00:08:32,370
Inside of our head, our component by targeting say anything with a class name of option, but we want
95
00:08:32,370 --> 00:08:39,150
it so that none of our attacks actually have this text decoration because we will probably never use
96
00:08:39,150 --> 00:08:40,409
a native attack.
97
00:08:40,890 --> 00:08:45,510
So if we save, we will see that it is now updated.
98
00:08:46,230 --> 00:08:53,100
OK, now the last thing we need to do is just commit our code before we finish styling our header,
99
00:08:53,220 --> 00:09:00,000
because in the next section we will be including our Sinon page and our Sinon button.
100
00:09:00,840 --> 00:09:03,210
So let's go back to our terminal.
101
00:09:04,450 --> 00:09:06,130
Let's see what we have.
102
00:09:07,650 --> 00:09:09,450
So we'll just add our color.
103
00:09:11,500 --> 00:09:22,870
Adding another component and links to home the shop page and and then we'll just skip Origin Master.
104
00:09:23,710 --> 00:09:26,350
OK, now let's build that Sinon.
9995
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.