WEBVTT 00:00.350 --> 00:05.210 Okay, now that we've got our nav bar with the links available, let's take a look at styling these. 00:05.210 --> 00:08.570 We want to be able to see that we're hovering over a link for example. 00:08.570 --> 00:13.430 And when a link is active I'd like it to be highlighted here as well. 00:13.430 --> 00:17.600 So let's go and take a look at styling our nav bar effectively. 00:17.990 --> 00:21.530 So inside let's pick on the mid links first of all. 00:21.530 --> 00:23.480 And we've got our SE property here. 00:23.480 --> 00:28.970 So let's just drop down the color and the typography to give us a bit of space to work with. 00:28.970 --> 00:38.300 And we'll give the text decoration to none just in case we'll use the same styles effectively for this 00:38.300 --> 00:44.660 one where we've got that nasty underline by using text decoration that removes the underlying there. 00:45.200 --> 00:50.090 And then we want to specify what we want to do when we're hovering over the link. 00:50.090 --> 00:55.010 Now, the way that we do that inside this SE property is we need to use in quotes. 00:55.010 --> 01:02.510 We need to say ampersand followed by a colon, and then hover and then add a colon and then open curly 01:02.510 --> 01:03.560 brackets here. 01:03.560 --> 01:07.650 And then we can specify the styles we want to use when we're hovering over a link. 01:07.650 --> 01:15.030 So I'll give this a different color and we'll set this to gray period 500. 01:15.060 --> 01:18.630 Again this style is coming from material UI theme. 01:18.660 --> 01:25.530 So it looks different to what we were using before with the hashes etc. but we can use material UI theme 01:25.530 --> 01:29.070 colors anywhere we wish, and that's just one of them. 01:29.070 --> 01:32.610 And we'll also add a style for when we're active. 01:32.910 --> 01:40.080 So if we add ampersand colon active, and this is the property that's being applied by the nav link 01:40.110 --> 01:41.070 that we're using. 01:41.070 --> 01:48.120 So this will effectively be enabled when we click on a link or specify this property. 01:48.120 --> 01:50.340 And again we'll just give this a color. 01:50.910 --> 01:56.430 And in this case let's go for a secondary dot main and see how that looks. 01:56.790 --> 01:59.640 And that should be fine. 01:59.640 --> 02:06.390 So if we go back and take a look and if I click on catalog then okay. 02:06.390 --> 02:11.000 So it's not staying as the secondary main. 02:11.030 --> 02:12.230 That's interesting. 02:12.410 --> 02:20.060 You can see the hover that's working, but for some reason the active property isn't persisting. 02:20.060 --> 02:22.220 And let's go back and take a look. 02:22.250 --> 02:27.410 And it's because I've got the colon here that needs to be period active. 02:27.440 --> 02:29.450 The hover is a pseudo property. 02:29.450 --> 02:35.120 So when we're hovering over an element that's the reason we use the colon hover layer because that's 02:35.120 --> 02:35.840 a pseudo property. 02:35.840 --> 02:38.000 But active is a class. 02:38.000 --> 02:44.390 And if I go back and take a look now we can see the catalog is indeed colored as the secondary main. 02:44.420 --> 02:47.120 Not sure I particularly like that color though, to be honest. 02:47.120 --> 02:48.860 And the links it feels a bit garish. 02:48.860 --> 02:56.540 I'm going to change it to something else, and I'm just going to pick a color of hash and say b a, 02:56.540 --> 02:59.360 e c, f nine. 02:59.360 --> 03:01.850 I think this will work in both light and dark mode. 03:01.850 --> 03:02.480 We'll see. 03:02.480 --> 03:04.820 So I've got the kind of light blue color layer. 03:04.820 --> 03:12.060 And if I go on to dark mode then this stands out on both so we can see which ones are active. 03:12.090 --> 03:13.620 So that's fine. 03:13.620 --> 03:17.730 But we also want the styles to of course apply to the other links inside here. 03:17.730 --> 03:22.290 And we would like to spread these across our component as well. 03:22.380 --> 03:26.250 So first of all because we're going to use the same styles for the other links. 03:26.250 --> 03:28.500 Let's just cut the object. 03:28.500 --> 03:30.780 So the curly brackets the yellow curly brackets. 03:30.780 --> 03:33.510 I'm going to copy or cut this out of the SW. 03:33.660 --> 03:36.120 And I'm just going to come above components. 03:36.120 --> 03:41.940 And I will create a const for nav styles equals. 03:41.940 --> 03:45.390 And just paste in what I have inside my clipboard. 03:45.420 --> 03:50.730 And then we can just use these same styles for all of the areas where we've got nav links. 03:50.730 --> 03:59.010 So for instance I can specify in the typography I can say SE equals nav styles. 03:59.670 --> 04:03.510 In the mid links I can say nav styles. 04:03.510 --> 04:11.520 And also for the right links I can remove what I have inside there and just specify nav styles. 04:11.520 --> 04:16.880 And if I go and check the progress then we should see that all of our styling. 04:16.910 --> 04:19.640 Functionality is working fine. 04:19.640 --> 04:22.670 So let's now take a look at using flex to spread. 04:22.700 --> 04:25.280 These across the top of our nav bar. 04:25.550 --> 04:28.460 And let's head back to the code. 04:28.460 --> 04:31.220 And what we effectively want is on the left hand. 04:31.250 --> 04:31.670 Side. 04:31.670 --> 04:39.650 We want the title of our app that's going to be on the left the catalog about and contacts. 04:39.680 --> 04:43.970 We want that to be in about the middle and then the login and register. 04:43.970 --> 04:45.650 We want that on the right. 04:45.680 --> 04:46.790 Hand side. 04:46.790 --> 04:52.250 So we can use justify content using flex to do this. 04:52.250 --> 04:53.570 And we just need to make sure. 04:53.600 --> 04:56.540 That our toolbar has three elements. 04:56.540 --> 05:01.850 And then when we use justify content it spreads the three elements equally across the screen. 05:01.850 --> 05:03.230 So we're going to need to make sure these. 05:03.260 --> 05:04.880 Are grouped these different parts. 05:04.880 --> 05:06.620 And let's go ahead and do that. 05:06.620 --> 05:11.060 So for the first one we need the typography and the icon button. 05:11.060 --> 05:13.130 They need to be in their own element. 05:13.130 --> 05:18.060 So I'm going to use box for this and get that in from movie material. 05:18.060 --> 05:23.400 And I'm going to cut the icon button along with typography and put it inside its own box. 05:23.400 --> 05:25.830 So that becomes one element. 05:25.890 --> 05:29.790 Now the list itself with the three items, that's going to be another element. 05:29.790 --> 05:34.560 And then for the list and the icon button, we'll need to put lists inside a container as well. 05:34.560 --> 05:37.020 And I'll just use box again for that. 05:37.020 --> 05:44.880 And take the icon button and the list and cut these and put them inside the box. 05:44.880 --> 05:47.730 And now we can use the flex system. 05:47.730 --> 05:52.830 So in the toolbar we can give this the SE property. 05:53.400 --> 05:59.010 And we'll open double curly brackets and we'll use display of flex. 05:59.190 --> 06:07.350 And then we'll say justify contents and space between and we'll use align items and center. 06:07.350 --> 06:11.460 And if we go and take a look at our progress, we can see that we have made some progress. 06:11.460 --> 06:16.980 We've now got the three different elements, but obviously we need to do a bit more work to align these 06:16.980 --> 06:19.380 things as well. 06:19.760 --> 06:23.000 And it looks like the icon is just off center there as well. 06:23.000 --> 06:27.080 So for the first box, let's also use in the box. 06:27.080 --> 06:34.550 We can just use Display Flex inside here and use align items and say center. 06:34.550 --> 06:40.160 That should line up the icon in line with the text and the button. 06:40.190 --> 06:44.270 The middle one was fine and the right hand side. 06:44.270 --> 06:45.740 We need to also do the same here. 06:45.740 --> 06:51.560 So I'm going to use display Flex and Align and specify center. 06:52.010 --> 06:57.230 And if we go take a look then we can see that we're all lined up correctly inside here we've got our 06:57.260 --> 06:59.450 home page link on the left hand side. 06:59.450 --> 07:01.820 We've got our three different links in the middle. 07:01.820 --> 07:06.680 And then we've got our stuff on the right hand side, which doesn't do anything yet. 07:06.680 --> 07:07.340 So great. 07:07.340 --> 07:11.000 We're making progress and our application's starting to look like an application. 07:11.000 --> 07:15.560 And what we'll do next is we'll take a look at the product details so that when we click on this view, 07:15.710 --> 07:18.260 then we get taken to the product details page. 07:18.260 --> 07:21.920 And we'd like to display the product in that page. 07:21.920 --> 07:23.870 And we'll take a look at that next.