WEBVTT 00:00.000 --> 00:03.060 Okay, so our next task is to be to add some links at the top. 00:03.060 --> 00:09.060 So our users have something to click on and can navigate from one component to the other component using 00:09.060 --> 00:10.470 our new routing system. 00:10.470 --> 00:12.960 And it looks like I've got an error in the app dot TSX. 00:12.960 --> 00:16.140 I've just got an unused import inside here. 00:16.170 --> 00:21.960 The ESLint utility that we added earlier on is very noisy, which is good because it encourages us to 00:21.990 --> 00:26.010 clean up after ourselves when we see the nasty warnings inside there. 00:26.010 --> 00:27.150 So we're going to go to our navbar. 00:27.150 --> 00:28.410 Let's clean things up at the top. 00:28.410 --> 00:33.060 It's getting quite busy up there, and I'm just going to open up the navbar TSX where we're going to 00:33.060 --> 00:34.890 add our links into. 00:34.920 --> 00:41.280 So at the top here, just above the props, I'm just going to add a const called links. 00:41.280 --> 00:45.540 I'm going to have some links in the middle of the navbar, and I'm going to have some links on the right 00:45.540 --> 00:46.500 hand side. 00:46.680 --> 00:54.090 And inside here inside square brackets, we'll just create a few objects that have a title property. 00:54.090 --> 00:57.000 And this is going to be called catalog. 00:57.180 --> 00:58.980 And it's going to have a path property. 00:58.980 --> 01:01.080 And it's going to say forward slash. 01:01.110 --> 01:03.180 That forward slash is important. 01:03.180 --> 01:07.010 So please include it and it's going to go to forward slash catalog. 01:07.040 --> 01:08.750 I'm going to have two more links. 01:08.750 --> 01:10.850 One of them is going to be for the about. 01:10.850 --> 01:17.180 And this is going to go to the about route, which needs to match the path that we put in our routing 01:17.180 --> 01:18.230 configuration. 01:18.230 --> 01:20.840 And I'm also going to have a contact link. 01:20.840 --> 01:23.870 And the path is going to be to our contact page. 01:23.870 --> 01:25.970 And I'm going to copy mid links. 01:25.970 --> 01:30.650 And I'm also going to create another array and call it right link. 01:30.650 --> 01:32.960 So we'll have a couple of links on the right hand side. 01:32.960 --> 01:36.050 And we don't have any of the functionality for this yet. 01:36.080 --> 01:37.580 Or the routes all the components. 01:37.580 --> 01:39.530 But I'm just going to add them in now anyway. 01:39.800 --> 01:45.950 The first one being for login and the next one being for register and give it a path for register. 01:46.040 --> 01:51.680 Obviously these are not going to work just yet because we don't have the components or the routes for 01:51.680 --> 01:58.100 them, but we will put them inside our navbar as well just for the user interface look and feel. 01:58.100 --> 02:02.120 So let's head down to where we're going to use this. 02:02.420 --> 02:09.080 And inside the toolbar underneath the icon button let's Lets add or use the mid links. 02:09.080 --> 02:10.400 So I'm going to say mid links. 02:10.400 --> 02:11.150 This is an array. 02:11.150 --> 02:13.550 So we can use array functionality with this. 02:13.550 --> 02:17.900 And we're going to map over each one of those elements of the array. 02:18.470 --> 02:23.900 Inside the map I'm going to destructure the two properties the title and the path. 02:23.900 --> 02:25.640 So I'm going to open parentheses. 02:25.640 --> 02:27.980 Then I'm going to open more parentheses. 02:27.980 --> 02:34.700 And then I'm going to open curly brackets so that we can destructure what's inside the elements of the 02:34.700 --> 02:35.150 array. 02:35.150 --> 02:38.480 So I'm going to have a title and I'm going to have a path. 02:38.510 --> 02:46.940 And then to the right of the just before the last closing parentheses I'll add the arrow. 02:46.970 --> 02:48.950 Then open more parentheses. 02:48.950 --> 02:55.940 And then inside here we can use list item which we get from Mui material. 02:56.480 --> 03:02.510 And we'll add its closing tag and inside the right angle bracket. 03:02.510 --> 03:10.160 For the list item we can use material UI components as other components. 03:10.160 --> 03:14.990 So what we want inside here is we want to use a component from React Router Dom. 03:14.990 --> 03:16.880 Let's just go back to the tutorial. 03:17.210 --> 03:23.330 And if we take a look at the router components inside here and the components I should say, then we've 03:23.330 --> 03:25.220 got a nav link component. 03:25.340 --> 03:31.610 And this is a special kind of link that knows whether or not it is active, pending or transitioning 03:32.210 --> 03:34.310 and what this will allow us to do. 03:34.340 --> 03:41.990 This will automatically apply an active class onto the elements, and then we can use that active class 03:41.990 --> 03:46.100 to style it so that we can show which link is active that we've clicked on. 03:46.100 --> 03:51.440 And I'll have a few styling issues as we're building this, but we will correct them as we get to them. 03:51.440 --> 03:55.730 So inside the list item, then one of the properties we can use is component. 03:55.730 --> 03:58.190 Which component do we want this to act as. 03:58.190 --> 04:01.130 So I'm going to specify I want this to be nav link. 04:01.430 --> 04:08.420 Now when we use a component in this way inside the material UI component, then we can use the properties 04:08.420 --> 04:10.070 of the nav link as well. 04:10.070 --> 04:13.910 And if we go back to the documentation Then one of its properties. 04:13.910 --> 04:15.650 If we take a look at the docs. 04:15.650 --> 04:17.090 Do I like these docs? 04:17.120 --> 04:18.290 Not sure. 04:18.320 --> 04:21.890 Where's the okay, so we do have a property here. 04:21.890 --> 04:26.630 The nav link takes the two property where we can specify the route we want it to be sent to. 04:26.660 --> 04:28.430 So let's make use of that. 04:28.670 --> 04:31.760 And I'm going to specify two false. 04:31.940 --> 04:34.760 And then we're going to send them to the path. 04:34.760 --> 04:37.730 And the key is going to be the path. 04:37.730 --> 04:41.240 That's a unique thing inside our array. 04:41.240 --> 04:43.610 And we'll give it some styling properties. 04:43.610 --> 04:48.170 And we'll use the S x and double curly brackets. 04:48.170 --> 04:51.590 And we'll say color and we'll just say inherit full color. 04:51.590 --> 04:53.270 So it inherits from the parent. 04:53.540 --> 04:55.970 And we'll use typography inside here. 04:55.970 --> 04:59.240 And we can use a variant of H6. 04:59.240 --> 05:04.340 So when we use the component in this way we can use both the properties available for the nav link and 05:04.340 --> 05:09.410 also the properties that are available with the material UI component. 05:09.410 --> 05:15.140 And then inside here we'll specify title and we'll just display this as uppercase. 05:15.140 --> 05:18.040 So we can use the two uppercase function on this. 05:18.040 --> 05:18.760 So let's. 05:18.790 --> 05:20.620 Our links are in uppercase. 05:20.620 --> 05:26.530 And if we go and take a look at our progress and see how we're doing with a nav bar then okay. 05:26.560 --> 05:29.020 Not quite what we're looking for yet. 05:29.020 --> 05:33.550 And in fact I used a list item, but I didn't actually put it inside a list. 05:33.550 --> 05:35.620 So let's above the links. 05:35.620 --> 05:44.410 Let's add a list that we get from my material, and let's cut the mid links and put them inside the 05:44.410 --> 05:45.220 list. 05:45.820 --> 05:50.890 And let's give the list the SE property. 05:50.890 --> 05:53.440 And we're just going to use Display flex. 05:53.440 --> 05:59.680 And the default for Display Flex is to use the flex direction row. 05:59.710 --> 06:02.680 So we go across the page rather than down the page. 06:02.680 --> 06:08.050 And if we go and take a look now we can see that we've got our elements lined up correctly. 06:08.320 --> 06:10.120 Although we would like them to be centralized. 06:10.120 --> 06:12.700 But we'll first of all get the other links on our page. 06:12.700 --> 06:18.100 First of all, and to do that, I'm going to be slightly lazy. 06:18.100 --> 06:26.500 I'm going to copy this list in its entirety, and I'm going to paste it below the other list. 06:26.620 --> 06:32.530 And instead of mid links, I'm going to use right links and everything else can stay the same. 06:32.530 --> 06:38.050 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 06:38.080 --> 06:40.540 our or we're creating an e-commerce site. 06:40.570 --> 06:46.780 Then between or next to the login and register, I want a shopping cart icon, which is going to show 06:46.780 --> 06:51.370 them how many items they have in their shopping cart or baskets. 06:51.370 --> 06:53.830 So let's go back to the code. 06:53.830 --> 06:57.820 And just between the two lists here, let's just add a bit of space. 06:57.820 --> 07:01.270 I'm just going to have an icon button. 07:01.270 --> 07:06.370 And I'm going to give this a size property of large. 07:06.370 --> 07:13.030 And what we can also use from material UI is we can use a badge which gives us the, the number, the 07:13.030 --> 07:17.320 number of items that we're going to have in our shopping cart and display it in a circle. 07:17.440 --> 07:19.360 So we'll have seen that kind of thing before. 07:19.390 --> 07:22.600 Pretty common to see on most typical websites out there. 07:22.600 --> 07:25.120 So we're going to use the badge to do that. 07:25.510 --> 07:29.020 And we can give the badge some badge content. 07:29.020 --> 07:31.690 And we'll just hard code a number in there for the time being. 07:31.690 --> 07:38.230 I'm just going to say four and we'll give it a color of second and inside the badge. 07:38.230 --> 07:40.540 Then we can use the icon we wish to use. 07:40.540 --> 07:44.530 And we wish to use the shopping cart icon. 07:44.530 --> 07:47.020 And it looks like the automatic import. 07:47.560 --> 07:53.200 Now that we've imported one icon in a different component, it looks like this functionality is going 07:53.230 --> 07:53.590 to work. 07:53.590 --> 07:58.000 Although I say we're not in a different component because we're in the navbar where we've already used 07:58.000 --> 07:58.930 icons before. 07:58.930 --> 08:01.900 So we need the shopping cart icon here. 08:02.080 --> 08:08.410 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, 08:08.410 --> 08:09.910 but it's a different color. 08:09.910 --> 08:14.980 So I need to give the icon button some style as well. 08:14.980 --> 08:19.210 So I'm going to say s x and we'll just say color and inherit. 08:19.210 --> 08:21.550 So it gets the parent color. 08:21.550 --> 08:23.470 And that's a bit more like it. 08:23.470 --> 08:25.870 But we haven't actually tested our links yet. 08:25.870 --> 08:31.900 And if I start clicking around, then I should be able to be taken to the different elements. 08:31.900 --> 08:33.220 And our header here. 08:33.220 --> 08:35.890 We wish to be taken to our home page when this is clicked on. 08:35.890 --> 08:42.460 So let's go back to the code and where we've got our typography here. 08:42.460 --> 08:46.090 Let's just make this or give this the component property. 08:46.090 --> 08:48.520 And this is also going to be a nav link. 08:48.520 --> 08:50.740 And we'll specify two equals. 08:50.740 --> 08:55.270 And we can just use forward slash which will take us to the home page. 08:55.270 --> 08:58.690 If we check this then we can see that this doesn't look great. 08:58.690 --> 09:04.090 But if we click on this it will take us to the home page and catalogue and content. 09:04.210 --> 09:08.650 If we click on login, we're going to get taken to an error page because we do not have a component 09:08.650 --> 09:08.980 for that. 09:08.980 --> 09:10.000 But that's fine. 09:10.000 --> 09:11.560 We would expect that. 09:11.560 --> 09:14.860 And the shopping cart icon doesn't do anything. 09:14.890 --> 09:21.430 Obviously we've got some styling issues to contend with and we'll take a look at that next. 09:21.460 --> 09:24.610 Now that we've got the basic functionality enabled. 09:24.610 --> 09:27.640 So next we'll take a look at styling this a bit better.