In the last section we install materialize as an NPM module and hooked it up to our project through
web pack.
Now it's kind of subtle.
When you look at the browser but if you look very closely the fonts that are used for the div and the
H-2 right here are now distinctly different than what we had before.
So I have a pretty good feeling.
I feel like it's likely that the materialize hooked up the materialize wire up work correctly but to
make sure that that is really the case I think that we should continue putting together the header.
Once we add on a couple of class names that correctly style the header will then have a really good
sense as to whether or not materialized work properly.
So time to finish up the initial design of the header before we do so.
I want to flip back over to materialize docs and we're going to pull up the documentation they have
over here on how to create a better looking component.
So in the components section right here I'll scroll on down until I see nav bar.
OK so this right here is essentially what we want to have one how something looks like this.
So if we essentially use this structure right here it will give us something that looks like this right
here.
So let's bring this markup over and then we'll have a better sense of whether or not everything is working
the way we expect.
So I'm going to flip back over to my head or component.
Now I have some notes over here that essentially tell me the structure but basically we're going to
use this structure right here.
I'm just not going to be referencing back to this exact stuff as we type this out.
So inside the header and we plot my notes Speaking of which.
So we're going to replace the existing return statement in here or there or the existing div with a
couple other components or a couple other elements.
First off we're going to place a nav
inside of there.
We're going to put a div with a class name of NAV dash wrapper and then inside of that div we're going
to place an anchor tag which is going to serve as the sort of Logo to our head or that kind of thing
on the big top left that a user can click on to go back to the home page.
So we will say give me an anchor tag will give it the name of our application which right now we're
just using as email.
I'm going to give the anchor tag a class name of left and brand dash logo.
And then as a sibling to the anchor tag right here.
So right next to it we're going to place a UL that has a couple of lines inside of it and that's us
with allies are going to form the right hand elements of the right hand buttons on the screen.
So I'll put down a UL with a class name of right and then inside of there one ally that contains an
anchor tag.
I will give it the text log in with Google for it now.
OK.
So this is definitely enough to test out inside the browser.
Now as a quick reminder remember that whenever we are working with reactive components we do not pass
in CSSA classes as the class property we instead use class name.
And that's why you see a class name over here.
But class over here.
So just keep that in mind.
OK so let's flip back on over to our application and yup sure enough everything was looking pretty darn
good.
So I've got the logo on the left.
It's not actually clickable so I can actually go back to the home page just yet.
But I definitely have like a highlight of a link over here on the right hand side which is definitely
working the way I expect.
OK this is looking pretty good.
Now as we're looking at the header right here.
One thing I want to remind you about and this is going to be relevant throughout the rest of the course
as we are working on the front and remember that whenever I show you content inside the browser I always
run with the screen really zoomed in so that you can very easily see what I'm doing.
So you probably see something that looks a little bit more like this right here.
Right.
This is probably what you see.
So whenever you see my stuff like looking really large or significantly bigger than yours it's just
because I always run with everything very much zoomed in.
OK.
So this is a pretty good place to start.
We've got at least a little bit of styling here and we can see the logo.
Blah blah blah all that of good stuff.
So I think we've got probably enough on the styling and it's time to focus a little bit more on what
the log in with Google button does and how we're going to swap out some of the content inside the head
or whenever the user is actually logged in.
So let's continue in the next section and figure out how are we going to approach the internal implementation
of the header.