Now that we know how to make sure that a component is always visible on the screen regardless of what
page the user is looking at we're going to start actually working on our head or component if we take
a look at our mockups for this thing when we pull those up really quickly.
Remember the headers are supposed to have a link back to the central streamlets page.
It's supposed to have another link back to the stringless page over here and then eventually it should
also have a log in button.
Now to actually create the header.
We're going to make a separate component.
We also need to make sure that we wire up semantic UI to our project as well because we're going to
rely upon some styling inside that library to get the header to show up really nicely with some pretty
good styling.
I think that we should first begin by wiring up semantic UI to our project.
So as usual I will do a search for semantic UI CVN pull up the link and search for semantic dot dot
CSX.
Here it is right here.
So I'm going to copy that link.
I will pull it back over to my public index HTL directory and right underneath the existing link tag
I'll put in a rail style sheet.
And then I'll paste the trough in and close the tag off.
All right.
Let's save that really quickly.
Now if I flip back over to my application
I see the different font on the screen which is a indication that yeah the semantic UI is loaded up
correctly.
All right.
So let's now flip back over to our code editor inside of our components directory.
We're going to create a new header component and we're going to make this inside of components as opposed
to streams because this is not a component that has anything to do with our streams.
So the components directory on make a new file called Hetter.
Yes.
And then at the top we'll put together some boilerplate for a functional component.
So I will say import re-act from react and Konst header.
And inside there I will return a div
with about I don't think we need any other divs right now.
We'll come back and do the styling in just a second so I'll just put in the text header like so and
then we'll say export default header at the bottom.
I'll save this then we'll flip back over to our output file get yours.
Update us on make sure that I import the header from header and then I'm going to show the header right
above my browser router right here.
So I'll say Hetter
all right really quickly will flip back over and make sure we just see the text header.
Yup it's right there.
So now we're going to add in a couple of different class names to get the header to show up nicely.
All these class names are coming from the semantic documentation.
So if you want to pull up the documentation and take a look at the menus subsection you'll see where
in pulling is class names from.
All right so back inside my app component will first begin by putting on a class name of UI container
to our div right here.
That is right above our head or we'll then flip back over to our head or component and it's like if
you're going to put together a couple of different class names.
So I'm going to turn this into a multi-line GSX expression like so allowed in a div with a class name
of UI secondary pointing menu
and then inside there.
I'll put another day of the class name of right menu
and then we're going to put a link tag both inside of this div right here at the parent div and I'll
put another link tag inside of the right menu div as well.
Now when I say link tag on talking about that link element or the link component from the re-act Rotterdam
library member.
The entire idea behind our Hetter up here is that these are going to be links that the user can click
to navigate around her application.
So I want to at least make sure right now that this streamer kind of logo on the left hand side and
the streams link right here are both link elements that a user can click to navigate around our application.
So at the top I'm going to import link from re-act router dom.
And then inside of the top level div I'll put a link to a route route of just forward slash like so
I'm going to give this a class name of item and I'll close that link tag off and I'll give it some title
like say streamer.
This is going to be the name of our application.
Again it doesn't really matter what we call it you can call it streamer or stream me whatever you want
it to be it's totally up to you on how you name it.
And inside of our div with right menu we'll put another link tag.
This is also going to go back to our route route that has our list of all of our different streams.
So I'm going to give this a class name of item as well.
Oops I closed it off at the div.
My mistake.
So I'll put the link tag in there instead and then I'll give it the text something like.
All streams because it's going to be a link back to our entire big list of streams.
Now you'll notice we have two links inside the header that's going to take the user back to the root
route that is totally normal.
Nothing out the ordinary about that.
Entirely likely that you would want to have a user able to click a header or the logo on the top left
down side and then also have a very clear link on the right hand side as well.
All right so let's save this.
Now if we flip back over to our application Oh I got a little typo inside of my import up here make
sure I have re-act Rotterdam so I'll save that.
And now we are run into an interesting little issue right here.
The air says you should not use a link outside of a router.
So I bet you might be able to guess why we are seeing this error message.
But let's take a quick pause right here.
We'll come back the next section will talk about exactly why we are seeing this and how we're going
to fix it.
So quick break and I'll see you in just a minute.