1
00:00:02,740 --> 00:00:06,580
In this video, let's render the nav bar.

2
00:00:06,790 --> 00:00:16,900
So as always, back to the folder, we are going to create one folder and call it as nav bar and I'm

3
00:00:16,900 --> 00:00:23,440
going to provide the component for you, download it and then put it inside the nav bar folder.

4
00:00:23,800 --> 00:00:28,480
When we start to implement the logic, I will take you through how the code works.

5
00:00:28,480 --> 00:00:29,920
For now, don't worry.

6
00:00:29,920 --> 00:00:33,460
Let's see how it's being appeared on the page.

7
00:00:33,730 --> 00:00:38,170
So next step is that let's go ahead and then render the components.

8
00:00:38,320 --> 00:00:44,890
So here let's bring in the nav bar and the auto import is working fine.

9
00:00:45,250 --> 00:00:51,670
And for this one, the way we are going to render is that we are not going to display the component

10
00:00:51,670 --> 00:00:59,170
based on a certain path, but instead we want that number to be available on all the other components

11
00:00:59,170 --> 00:01:00,100
or pages.

12
00:01:00,280 --> 00:01:06,580
Because of that, we are going to place it between the browser router and then the route.

13
00:01:06,580 --> 00:01:08,590
So here we go.

14
00:01:08,770 --> 00:01:10,510
Now when I save it.

15
00:01:10,510 --> 00:01:17,170
Now let's have a look where we are seeing some errors here simply because we are using what is called

16
00:01:17,170 --> 00:01:20,440
headless UI and then the hero icons.

17
00:01:20,440 --> 00:01:22,720
But we haven't installed that.

18
00:01:22,750 --> 00:01:24,880
Let's install those packages.

19
00:01:24,880 --> 00:01:32,020
So let's shut down the server, let's clear the console and that's how we are going to install the packages.

20
00:01:46,350 --> 00:01:46,800
Great.

21
00:01:46,800 --> 00:01:50,490
Let's clear the terminal and then let's restart react.

22
00:01:50,760 --> 00:01:57,060
Now you can see that we have the nav burn so you can change the logo if you want it.

23
00:01:57,210 --> 00:02:01,290
So we have the app transaction dashboard log in.

24
00:02:01,290 --> 00:02:02,550
It's working, register.

25
00:02:02,550 --> 00:02:05,430
It's working because we have these two components.

26
00:02:05,460 --> 00:02:11,580
Likewise, the home page for this one, we are not linking the homepage and you're going to fix it as

27
00:02:11,580 --> 00:02:12,470
you move on.

28
00:02:12,480 --> 00:02:14,510
So now we have the nav bar.

29
00:02:14,520 --> 00:02:19,440
The next video, let's go ahead and then render the add transaction form.