Okay, so our next task is to be to add some links at the top.
So our users have something to click on and can navigate from one component to the other component using
our new routing system.
And it looks like I've got an error in the app dot TSX.
I've just got an unused import inside here.
The ESLint utility that we added earlier on is very noisy, which is good because it encourages us to
clean up after ourselves when we see the nasty warnings inside there.
So we're going to go to our navbar.
Let's clean things up at the top.
It's getting quite busy up there, and I'm just going to open up the navbar TSX where we're going to
add our links into.
So at the top here, just above the props, I'm just going to add a const called links.
I'm going to have some links in the middle of the navbar, and I'm going to have some links on the right
hand side.
And inside here inside square brackets, we'll just create a few objects that have a title property.
And this is going to be called catalog.
And it's going to have a path property.
And it's going to say forward slash.
That forward slash is important.
So please include it and it's going to go to forward slash catalog.
I'm going to have two more links.
One of them is going to be for the about.
And this is going to go to the about route, which needs to match the path that we put in our routing
configuration.
And I'm also going to have a contact link.
And the path is going to be to our contact page.
And I'm going to copy mid links.
And I'm also going to create another array and call it right link.
So we'll have a couple of links on the right hand side.
And we don't have any of the functionality for this yet.
Or the routes all the components.
But I'm just going to add them in now anyway.
The first one being for login and the next one being for register and give it a path for register.
Obviously these are not going to work just yet because we don't have the components or the routes for
them, but we will put them inside our navbar as well just for the user interface look and feel.
So let's head down to where we're going to use this.
And inside the toolbar underneath the icon button let's Lets add or use the mid links.
So I'm going to say mid links.
This is an array.
So we can use array functionality with this.
And we're going to map over each one of those elements of the array.
Inside the map I'm going to destructure the two properties the title and the path.
So I'm going to open parentheses.
Then I'm going to open more parentheses.
And then I'm going to open curly brackets so that we can destructure what's inside the elements of the
array.
So I'm going to have a title and I'm going to have a path.
And then to the right of the just before the last closing parentheses I'll add the arrow.
Then open more parentheses.
And then inside here we can use list item which we get from Mui material.
And we'll add its closing tag and inside the right angle bracket.
For the list item we can use material UI components as other components.
So what we want inside here is we want to use a component from React Router Dom.
Let's just go back to the tutorial.
And if we take a look at the router components inside here and the components I should say, then we've
got a nav link component.
And this is a special kind of link that knows whether or not it is active, pending or transitioning
and what this will allow us to do.
This will automatically apply an active class onto the elements, and then we can use that active class
to style it so that we can show which link is active that we've clicked on.
And I'll have a few styling issues as we're building this, but we will correct them as we get to them.
So inside the list item, then one of the properties we can use is component.
Which component do we want this to act as.
So I'm going to specify I want this to be nav link.
Now when we use a component in this way inside the material UI component, then we can use the properties
of the nav link as well.
And if we go back to the documentation Then one of its properties.
If we take a look at the docs.
Do I like these docs?
Not sure.
Where's the okay, so we do have a property here.
The nav link takes the two property where we can specify the route we want it to be sent to.
So let's make use of that.
And I'm going to specify two false.
And then we're going to send them to the path.
And the key is going to be the path.
That's a unique thing inside our array.
And we'll give it some styling properties.
And we'll use the S x and double curly brackets.
And we'll say color and we'll just say inherit full color.
So it inherits from the parent.
And we'll use typography inside here.
And we can use a variant of H6.
So when we use the component in this way we can use both the properties available for the nav link and
also the properties that are available with the material UI component.
And then inside here we'll specify title and we'll just display this as uppercase.
So we can use the two uppercase function on this.
So let's.
Our links are in uppercase.
And if we go and take a look at our progress and see how we're doing with a nav bar then okay.
Not quite what we're looking for yet.
And in fact I used a list item, but I didn't actually put it inside a list.
So let's above the links.
Let's add a list that we get from my material, and let's cut the mid links and put them inside the
list.
And let's give the list the SE property.
And we're just going to use Display flex.
And the default for Display Flex is to use the flex direction row.
So we go across the page rather than down the page.
And if we go and take a look now we can see that we've got our elements lined up correctly.
Although we would like them to be centralized.
But we'll first of all get the other links on our page.
First of all, and to do that, I'm going to be slightly lazy.
I'm going to copy this list in its entirety, and I'm going to paste it below the other list.
And instead of mid links, I'm going to use right links and everything else can stay the same.
And if I go and take a look then I can see I've got the login and register links now because we've got
our or we're creating an e-commerce site.
Then between or next to the login and register, I want a shopping cart icon, which is going to show
them how many items they have in their shopping cart or baskets.
So let's go back to the code.
And just between the two lists here, let's just add a bit of space.
I'm just going to have an icon button.
And I'm going to give this a size property of large.
And what we can also use from material UI is we can use a badge which gives us the, the number, the
number of items that we're going to have in our shopping cart and display it in a circle.
So we'll have seen that kind of thing before.
Pretty common to see on most typical websites out there.
So we're going to use the badge to do that.
And we can give the badge some badge content.
And we'll just hard code a number in there for the time being.
I'm just going to say four and we'll give it a color of second and inside the badge.
Then we can use the icon we wish to use.
And we wish to use the shopping cart icon.
And it looks like the automatic import.
Now that we've imported one icon in a different component, it looks like this functionality is going
to work.
Although I say we're not in a different component because we're in the navbar where we've already used
icons before.
So we need the shopping cart icon here.
And if we go take a look and see how we're doing now, then we can see that we've got our icon there,
but it's a different color.
So I need to give the icon button some style as well.
So I'm going to say s x and we'll just say color and inherit.
So it gets the parent color.
And that's a bit more like it.
But we haven't actually tested our links yet.
And if I start clicking around, then I should be able to be taken to the different elements.
And our header here.
We wish to be taken to our home page when this is clicked on.
So let's go back to the code and where we've got our typography here.
Let's just make this or give this the component property.
And this is also going to be a nav link.
And we'll specify two equals.
And we can just use forward slash which will take us to the home page.
If we check this then we can see that this doesn't look great.
But if we click on this it will take us to the home page and catalogue and content.
If we click on login, we're going to get taken to an error page because we do not have a component
for that.
But that's fine.
We would expect that.
And the shopping cart icon doesn't do anything.
Obviously we've got some styling issues to contend with and we'll take a look at that next.
Now that we've got the basic functionality enabled.
So next we'll take a look at styling this a bit better.