WEBVTT 00:00.350 --> 00:00.680 Okay. 00:00.710 --> 00:05.420 Our next task is going to be to add a header across the top of our page. 00:05.420 --> 00:10.790 And if we go and take a look at the material UI docs, just to give you an indication of what it is 00:10.790 --> 00:17.240 we're going to be using inside here, then we're going to be making a use of the App Bar. 00:17.270 --> 00:22.310 Effectively, the App Bar displays information and actions relating to the current screen, but we're 00:22.310 --> 00:29.090 going to use this as a general purpose header across our entire application and something like this. 00:29.090 --> 00:31.430 So let's go back to VS code. 00:31.430 --> 00:37.550 And inside the layout folder let's right click and create a new file. 00:37.550 --> 00:40.610 And we'll just call it navbar dot TSX. 00:40.610 --> 00:45.620 And we'll just use the snippet to create the react functional component. 00:45.620 --> 00:51.050 And inside the return statement here instead of this div. 00:51.080 --> 00:55.490 Then we're going to make use of the app bar we get from UI material. 00:55.520 --> 00:58.400 So do please ensure that is brought in. 00:58.400 --> 01:00.680 And we're going to give it a position property. 01:00.680 --> 01:04.280 So it's fixed to the top of the screen no matter what's going on. 01:04.280 --> 01:08.840 With scroll bars on the right hand side, the app bar should stay in its position. 01:08.870 --> 01:15.690 Inside the app bar, we need to provide a toolbar where things will go inside the app bar, and we'll 01:15.690 --> 01:24.810 just use typography initially, and we'll give it a variant of H6, and we'll just use in capitals restore 01:24.840 --> 01:28.470 as the brand effectively of our store. 01:28.470 --> 01:35.760 And then we'll go to our app dot TSX, and we will replace what's going on with this button and this 01:35.760 --> 01:37.380 box and the typography. 01:37.380 --> 01:43.140 Let's just remove this and we'll just have our container with the catalog. 01:43.170 --> 01:45.930 And we'll add our navbar above the container. 01:45.930 --> 01:47.640 So we're going to need to use a fragment here. 01:47.640 --> 01:51.750 Let's cut the container and stick it inside the fragments. 01:51.780 --> 01:53.100 Do a bit of reformatting. 01:53.100 --> 01:58.620 And just above the container we'll pass in or use our navbar. 01:58.650 --> 02:02.010 And it doesn't take any properties, so that should be fine. 02:02.010 --> 02:03.810 And I've got some warnings inside here. 02:03.810 --> 02:05.190 We've got some unused imports. 02:05.190 --> 02:10.410 So let's delete all the unused imports and we'll remove the add products method as well. 02:10.410 --> 02:11.640 We're not going to be using that. 02:11.670 --> 02:13.920 That's just for a small demo earlier on. 02:13.950 --> 02:16.440 So let's also remove that from our project. 02:16.440 --> 02:19.020 We'll come to Crud operations a bit later in this course. 02:19.020 --> 02:20.670 For the most part. 02:20.700 --> 02:25.480 Early on we're going to deal with the user interface for reading the data from the API. 02:25.510 --> 02:28.480 We'll keep the use effect for the time being and the state. 02:28.480 --> 02:32.410 And let's take a look and see how we're getting on with our nav bar. 02:32.440 --> 02:34.840 So it's stretching across the entire screen. 02:34.840 --> 02:36.550 That is what I'm looking for. 02:36.550 --> 02:41.020 And unfortunately the products have gone underneath the nav bar. 02:41.020 --> 02:46.270 And that's because this is fixed and it doesn't automatically come with a margin to push down the other 02:46.270 --> 02:47.440 content in the screen. 02:47.440 --> 02:55.960 So we just need to give our container a bit of extra, and we'll use the SE property here and we'll 02:55.960 --> 02:58.450 give it margin top which we can use just empty. 02:58.690 --> 03:04.810 And we'll specify eight, which should bring down our products below the nav bar. 03:04.810 --> 03:06.310 And not enough. 03:06.340 --> 03:07.810 Let's change that to a bit more. 03:07.840 --> 03:08.980 That's nowhere near enough. 03:08.980 --> 03:10.780 And that's going to take a look that's more like it. 03:10.780 --> 03:17.380 So 14 is the margin top that gets it into about the right position for my liking. 03:17.380 --> 03:18.670 So now we've got an app bar. 03:18.670 --> 03:23.860 Later on we'll add some navigation links to this so that we can go to different areas of our application. 03:23.860 --> 03:29.890 But what we'll focus on next is taking some of the whiteness away from our application, and we'll take 03:29.890 --> 03:37.990 a look at adding a dark mode and light mode switch inside of this, and we'll take a look at that next.