In this video, let's render the nav bar.
So as always, back to the folder, we are going to create one folder and call it as nav bar and I'm
going to provide the component for you, download it and then put it inside the nav bar folder.
When we start to implement the logic, I will take you through how the code works.
For now, don't worry.
Let's see how it's being appeared on the page.
So next step is that let's go ahead and then render the components.
So here let's bring in the nav bar and the auto import is working fine.
And for this one, the way we are going to render is that we are not going to display the component
based on a certain path, but instead we want that number to be available on all the other components
or pages.
Because of that, we are going to place it between the browser router and then the route.
So here we go.
Now when I save it.
Now let's have a look where we are seeing some errors here simply because we are using what is called
headless UI and then the hero icons.
But we haven't installed that.
Let's install those packages.
So let's shut down the server, let's clear the console and that's how we are going to install the packages.
Great.
Let's clear the terminal and then let's restart react.
Now you can see that we have the nav burn so you can change the logo if you want it.
So we have the app transaction dashboard log in.
It's working, register.
It's working because we have these two components.
Likewise, the home page for this one, we are not linking the homepage and you're going to fix it as
you move on.
So now we have the nav bar.
The next video, let's go ahead and then render the add transaction form.