All language subtitles for 6. The AppBar Component

The first part of our application that we're going to be building is the header I felt like this is

a good place to start since it's the one central location that's present on every page and then it's

the content under the header which changes.

So it sort of acts as that backbone to the site and just felt like the obvious starting point to build

that header though we're going to get familiar with the material UI app bar component.

This component provides the basic functionality that you would expect out of a header such as spanning

the entire length of the screen and always staying at the top so we're going to start putting our header

together using this app bar component and take a look at some of the options that we have there so here

we are on the app bar material UI documentation page which is under the components section and then

the surfaces section is the first one right there.

App bar and I wanted to start by just taking a look at some of these examples so this first one is a

very simple app bar with a menu button over here which doesn't actually open anything up in this example.

A simple title right here and then a action button over here the log in button.

So if we take a look at the code that makes this happen.

It may seem at first that there is a lot going on here but it actually is pretty simple to get it up

and running.

So you see here that they import the app bar from app material UI core as well as the toolbar and a

few other components.

And so if we go down and look this is all that it is right here and it starts with just an opening app

bar tag with the position of static.

And underneath that a toolbar sandwiched with all of the icons and typography and that log in button

that you see and then it is a closing toolbar tag and the closing app bar tag.

So really that is pretty simple and pretty straightforward for getting these lay down on the screen

even if you don't obviously understand the icon button and the typography.

Yeah.

And what is going on with those components.

But the app bar itself really is pretty straightforward so let's hop on over to the code editor and

see if we can't get an app bar set up for ourselves.

The first thing I want to do here is actually come up to the source folder and make a new folder inside

of that.

And we're just gonna call that UI and then go ahead and make a another folder and call that components

then I'm going to move the UI folder inside of the components folder and move the app J.S. file inside

of the components folder as well.

Now that we've done that we need to go into the index.

John J S file and where it's importing the app file we need to change that to dos slash components slash

app J.S. so that just updates the file that we had moved right here.

The app.

Yes.

And then inside of the UI folder I want to create a new file and named this header dot J S we're gonna

make this a basic functional component so you can start by importing react from react and then you can

export default a function header which is going to take props and open that and let's come back up here

and import a couple more things.

So let's import the app bar and make sure you have the camel case there.

How that's capital a capital B.

And then from at material dash UI slash core slash app bar.

And then import toolbar.

And this was not with a capital B.

So just lowercase b there from at material dash UI slash core slash toolbar simple enough right.

So we'll keep going and come down here and we will return some parentheses because it's going to be

multi line.

So we'll put the parentheses there and we'll start by opening up with an app bar tag and closing tag

and inside of that toolbar opening and closing tag and inside of here and let's just put arc development

and save.

Now let's go back to the app Dodge's file and let's import the header that we just created in the components.

Slash

UI slash header.

There we go.

And now let's go ahead and put that header right in front or on top of that.

Hello or says hello.

And when I save this it's going to make it look a little better but I actually wanted it to look like

this.

So we'll save it like that and then open up our terminal or command line if you're on Windows and make

sure to go to your project directory mine is in the documents folder and then the arc development folder

and NPM start this up and then open up a browser window and voila you see that we have a full width

spanning header now appearing on the page you will notice though the our words hello is actually gone

and it's not actually gone but it's being covered up by the header here and that is something that will

actually fix very soon when we do the styling lecture but let's go back to the code to take a little

better look at how this is really working and let's go over to the header file and we only have two

components in here but my first question when I was working with this was why do we need this toolbar

component.

So this actually helps lay out everything in a horizontal manner for the out bar whereas if we didn't

include that it would start to stack content up vertically.

When we start to add content to it and obviously for an app bar along the top you want it to be horizontal.

So that is why the toolbar is there and with the app a bar component we actually have a default position

of fixed which may help to have it included in the code just so you don't have to remember that that's

the default but you can save this and you can see the page reloaded and nothing is changed because that

is the default.

But if we come back and we change this position of fixed to static and save the file and we head back

over you see that now it's shrunk down and it doesn't completely span that full size and you also see

our little hello that was covered up is now underneath it.

So that's obviously not the work that we want and I'm not entirely sure of why you really would want

to use that but we're going to go back and change that to fixed and we'll just leave that there so that

you don't forget that that is set.

Now behind the scenes material UI is taking care of all these styling and code necessary to make sure

that our header is spanning the full width of the page like that and that's really what I like so much

about this library.

How it does such a good job of really clean abstractions they require very little configuration to get

something up on the screen.