Okay, now that we've got our nav bar with the links available, let's take a look at styling these.
We want to be able to see that we're hovering over a link for example.
And when a link is active I'd like it to be highlighted here as well.
So let's go and take a look at styling our nav bar effectively.
So inside let's pick on the mid links first of all.
And we've got our SE property here.
So let's just drop down the color and the typography to give us a bit of space to work with.
And we'll give the text decoration to none just in case we'll use the same styles effectively for this
one where we've got that nasty underline by using text decoration that removes the underlying there.
And then we want to specify what we want to do when we're hovering over the link.
Now, the way that we do that inside this SE property is we need to use in quotes.
We need to say ampersand followed by a colon, and then hover and then add a colon and then open curly
brackets here.
And then we can specify the styles we want to use when we're hovering over a link.
So I'll give this a different color and we'll set this to gray period 500.
Again this style is coming from material UI theme.
So it looks different to what we were using before with the hashes etc. but we can use material UI theme
colors anywhere we wish, and that's just one of them.
And we'll also add a style for when we're active.
So if we add ampersand colon active, and this is the property that's being applied by the nav link
that we're using.
So this will effectively be enabled when we click on a link or specify this property.
And again we'll just give this a color.
And in this case let's go for a secondary dot main and see how that looks.
And that should be fine.
So if we go back and take a look and if I click on catalog then okay.
So it's not staying as the secondary main.
That's interesting.
You can see the hover that's working, but for some reason the active property isn't persisting.
And let's go back and take a look.
And it's because I've got the colon here that needs to be period active.
The hover is a pseudo property.
So when we're hovering over an element that's the reason we use the colon hover layer because that's
a pseudo property.
But active is a class.
And if I go back and take a look now we can see the catalog is indeed colored as the secondary main.
Not sure I particularly like that color though, to be honest.
And the links it feels a bit garish.
I'm going to change it to something else, and I'm just going to pick a color of hash and say b a,
e c, f nine.
I think this will work in both light and dark mode.
We'll see.
So I've got the kind of light blue color layer.
And if I go on to dark mode then this stands out on both so we can see which ones are active.
So that's fine.
But we also want the styles to of course apply to the other links inside here.
And we would like to spread these across our component as well.
So first of all because we're going to use the same styles for the other links.
Let's just cut the object.
So the curly brackets the yellow curly brackets.
I'm going to copy or cut this out of the SW.
And I'm just going to come above components.
And I will create a const for nav styles equals.
And just paste in what I have inside my clipboard.
And then we can just use these same styles for all of the areas where we've got nav links.
So for instance I can specify in the typography I can say SE equals nav styles.
In the mid links I can say nav styles.
And also for the right links I can remove what I have inside there and just specify nav styles.
And if I go and check the progress then we should see that all of our styling.
Functionality is working fine.
So let's now take a look at using flex to spread.
These across the top of our nav bar.
And let's head back to the code.
And what we effectively want is on the left hand.
Side.
We want the title of our app that's going to be on the left the catalog about and contacts.
We want that to be in about the middle and then the login and register.
We want that on the right.
Hand side.
So we can use justify content using flex to do this.
And we just need to make sure.
That our toolbar has three elements.
And then when we use justify content it spreads the three elements equally across the screen.
So we're going to need to make sure these.
Are grouped these different parts.
And let's go ahead and do that.
So for the first one we need the typography and the icon button.
They need to be in their own element.
So I'm going to use box for this and get that in from movie material.
And I'm going to cut the icon button along with typography and put it inside its own box.
So that becomes one element.
Now the list itself with the three items, that's going to be another element.
And then for the list and the icon button, we'll need to put lists inside a container as well.
And I'll just use box again for that.
And take the icon button and the list and cut these and put them inside the box.
And now we can use the flex system.
So in the toolbar we can give this the SE property.
And we'll open double curly brackets and we'll use display of flex.
And then we'll say justify contents and space between and we'll use align items and center.
And if we go and take a look at our progress, we can see that we have made some progress.
We've now got the three different elements, but obviously we need to do a bit more work to align these
things as well.
And it looks like the icon is just off center there as well.
So for the first box, let's also use in the box.
We can just use Display Flex inside here and use align items and say center.
That should line up the icon in line with the text and the button.
The middle one was fine and the right hand side.
We need to also do the same here.
So I'm going to use display Flex and Align and specify center.
And if we go take a look then we can see that we're all lined up correctly inside here we've got our
home page link on the left hand side.
We've got our three different links in the middle.
And then we've got our stuff on the right hand side, which doesn't do anything yet.
So great.
We're making progress and our application's starting to look like an application.
And what we'll do next is we'll take a look at the product details so that when we click on this view,
then we get taken to the product details page.
And we'd like to display the product in that page.
And we'll take a look at that next.