Okay.
Our next task is going to be to add a header across the top of our page.
And if we go and take a look at the material UI docs, just to give you an indication of what it is
we're going to be using inside here, then we're going to be making a use of the App Bar.
Effectively, the App Bar displays information and actions relating to the current screen, but we're
going to use this as a general purpose header across our entire application and something like this.
So let's go back to VS code.
And inside the layout folder let's right click and create a new file.
And we'll just call it navbar dot TSX.
And we'll just use the snippet to create the react functional component.
And inside the return statement here instead of this div.
Then we're going to make use of the app bar we get from UI material.
So do please ensure that is brought in.
And we're going to give it a position property.
So it's fixed to the top of the screen no matter what's going on.
With scroll bars on the right hand side, the app bar should stay in its position.
Inside the app bar, we need to provide a toolbar where things will go inside the app bar, and we'll
just use typography initially, and we'll give it a variant of H6, and we'll just use in capitals restore
as the brand effectively of our store.
And then we'll go to our app dot TSX, and we will replace what's going on with this button and this
box and the typography.
Let's just remove this and we'll just have our container with the catalog.
And we'll add our navbar above the container.
So we're going to need to use a fragment here.
Let's cut the container and stick it inside the fragments.
Do a bit of reformatting.
And just above the container we'll pass in or use our navbar.
And it doesn't take any properties, so that should be fine.
And I've got some warnings inside here.
We've got some unused imports.
So let's delete all the unused imports and we'll remove the add products method as well.
We're not going to be using that.
That's just for a small demo earlier on.
So let's also remove that from our project.
We'll come to Crud operations a bit later in this course.
For the most part.
Early on we're going to deal with the user interface for reading the data from the API.
We'll keep the use effect for the time being and the state.
And let's take a look and see how we're getting on with our nav bar.
So it's stretching across the entire screen.
That is what I'm looking for.
And unfortunately the products have gone underneath the nav bar.
And that's because this is fixed and it doesn't automatically come with a margin to push down the other
content in the screen.
So we just need to give our container a bit of extra, and we'll use the SE property here and we'll
give it margin top which we can use just empty.
And we'll specify eight, which should bring down our products below the nav bar.
And not enough.
Let's change that to a bit more.
That's nowhere near enough.
And that's going to take a look that's more like it.
So 14 is the margin top that gets it into about the right position for my liking.
So now we've got an app bar.
Later on we'll add some navigation links to this so that we can go to different areas of our application.
But what we'll focus on next is taking some of the whiteness away from our application, and we'll take
a look at adding a dark mode and light mode switch inside of this, and we'll take a look at that next.