All language subtitles for 004 Header Component_en

OK, now that we have our menu item and our shop page, what we're going to build is our header.

We need an easier way to navigate between our pages and we want to build this component in such a way

so that it's always present, no matter what page we navigate to now, we want to do it in such a way

that we don't have to put header on every single page component that we have.

But that's really easy with react router Dom.

Now, before I show you that, let's just build the header component.

Now, let's go back to our application.

And let's create a header component.

And in our had our component, we are going to have the usual suspects, we need a header component,

Dutch RSX and a header style DOT SAS.

And in our head, our component, we're going to import.

React from react.

And we're going to import our stylesheet in.

Our head, our component is going to be a functional component.

And it's going to have a div that contains our header code.

And this code is going to resemble pretty much exactly what we see, so it's just going to be an outer

container, this group of option links that we have over here that will be contained in that group option

link container and then a logo.

So what we're going to add here is a class name of heter.

And then we are going to create our logo, so our logo will link to the homepage when you click it and

the way we do that is we import in link.

From React router dom.

And then we will just put Lincoln.

With the two pointing to our homepage route.

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.

icons are essentially scalable vector graphics, which are really small, really performant, but look

the same no matter how large or how small that image is expanded.

And that's really great.

And I have that for us right here, so you can just copy it from the file that I have provided in this

lesson.

Now, what we're going to do is we're going make a new folder in our source called Assets.

And in it, we are just going to paste, OK?

And you'll see a bunch of code that actually represents the Crown SVG, but in our header, we're just

going to import this into our component and we're going to import from.

Assets around us and what we're going to write is react component as logo.

Because it's not a sex file, we don't actually set the import, we're just importing in this SEVGI

as this Riak component keyword, but we're setting it to the logo here.

And by doing this, we are now able to place it right here.

And we can also give it the class name of logo.

And our class name for our link will be logo container, because we want that container to have some

style on it as well.

Now our options will be held in their own individual options container.

And they will also be Linc's.

And they will point to our shop.

And have the class name.

And inside this first one will be our shop.

And then our second one will be content.

And then we just export it out.

And we just bring this into our ABC's.

Once we import this in.

Opponents header header component.

All we have to do is just place this header outside of the switch.

And the routes that contain all of our page components because by doing this are header is always present

and rendered despite whatever react router, switch component and root components decide to render onto

the page.

And this is really great because if we had, say, pop ups or overlays or footers that we were always

wanting to display in our application or at least be on the page, regardless of what path the user

is on, we would just do it like this.

And this is really, really awesome because this makes our app very intuitive.

It looks very composable.

Because we know all of our pages exist here and our header exists outside of this switch.

OK, now if we go to our application, we'll see that we have what looks like the header, just no styling

it.

So let's write the styles.

Now, I do have them actually written already.

Our header, which is the containing d'Hiv, has a width of one hundred percent and a height of seventy

pixels.

We set a display flex so that when we put justify content space between the children inside of this

parent.

So our logo container and the options will be pushed apart as far as possible with any remaining space

that they don't themselves don't take up as far as the width is concerned.

So there's a margin bottom that pushes our pages twenty five pixels down from anything below the header

and then our logo container just has a width of 70 pixels, whereas our options.

Has a width of 50 percent, so it always takes a 50 percent of whatever with the header is and they

align everything centered.

And they're always on the flex and so justify constant flux and means that we want to always set them

so that they are on the right side of the component.

So they're on the end of the actual flex box.

And then our options have some minor padding so that they are not so grouped together and now we look

at our code, we see that our crown takes us to the home, our shop takes us to the shop.

And we have a very basic version of our header setup.

We have an out of the contact page at, but we will do that at the very end.

What we should do, though, is we should modify our link tags that we use as our options to not have

this underline or this purple color that comes with an A tag.

Now, even though it's a link component, if we inspect it, we see that what gets rendered.

Is this a tag?

Right.

This native, a tag.

So we know that reaction router dom actually modifies the tag and then gives it the functionality inside

of itself to do the behavior.

So to do that, we have to actually modify our access.

And we can do this right here by sending text decoration to none and the color to black, we could just

target selectively the link itself.

Inside of our head, our component by targeting say anything with a class name of option, but we want

it so that none of our attacks actually have this text decoration because we will probably never use

a native attack.

So if we save, we will see that it is now updated.

OK, now the last thing we need to do is just commit our code before we finish styling our header,

because in the next section we will be including our Sinon page and our Sinon button.

So let's go back to our terminal.

Let's see what we have.

So we'll just add our color.

Adding another component and links to home the shop page and and then we'll just skip Origin Master.

OK, now let's build that Sinon.