So the first component we would like to build is going to be the navbar.
So let's go ahead and see the output.
This is what we would like to have.
This is the navbar component.
On the left hand side we will have the logo itself and on the right hand side we will have this dashboard
button and a toggle switch as well as the user button.
So let's go ahead and try to build this.
First I will visit the Next.js documentation and search for the dark mode because we would like to implement
that.
And it will tell us to get this script.
Let's go ahead and paste this in into a new terminal.
And while this is installing we can go ahead and try to set up the layout file.
So here we are just taking taking the children.
But I want to add the navbar component to my entire application.
So in every single page I would like to see the navbar at the very top.
That's why I will delete this for a For a second and I will say I would like to have a div with this
class name.
Minimum let's say height of screen.
Then inside I would like to have a navbar component, which is something that will create.
And then we can have our main tag where we will have the children itself can give some paddings, let's
say padding.
So for smaller screens and above we can increment this by two and larger screens and above.
Let's try to implement this.
I mean increment this by two as well.
Okay.
So now we don't have the navbar.
Let's try to create it under the components.
Let's say refs to get this boilerplate code.
And this is the extension that I'm using.
Okay.
Once you install this one let me show you the entire name.
You should be able to type Rvce and get this code snippet.
So let's open up the left hand side, visit the layout file and try to import the navbar.
Okay, so this is what we have.
Let's try to save and go back into the navbar component.
So I think first we should visit the documentation where we would like to create a theme provider where
we can have light mode and dark mode implemented.
Right.
So I will go ahead under the providers I will say Theme Provider dot TSX.
Paste this in.
Save this file.
And again this is a client component.
And let's see what is.
The next step is to wrap our children with the theme provider.
I'll go ahead and copy this.
Visit the layout and wrap my children so we can wrap our entire application actually with this theme
provider component.
And close this off.
all okay?
And I think they are adding one more prop to HTML.
So I'll go ahead and copy this so that we can suppress the hydration warnings.
Okay.
So with that we should be able to have light mode and dark mode implemented.
The only thing we left is to get this component and they have the code.
I'll copy it and paste it into my components where I will say mode toggle dot TSX.
Paste this in and this is using a component called drop down menu.
Let's go ahead and try to install it from CDN.
I'll say NP and let me kill the left hand side chat CDN at latest at drop down menu.
So we just got that component.
Let's try to shrink this.
And the warning should be gone.
There we go.
We'll be using this mode toggle component in the nav bar component right.
So all showing everything go into the home page.
I'll delete everything from here.
I'll just say home page.
Save this.
And in the navbar component we can say nav bar and then have our mode toggle component just to test
this out.
So we got the nav bar dark mode.
Light mode is working and by default system is in the dark mode and we have the home page content.
Okay, so with this in mind, I think we can go ahead and build the entire navbar component.
So for this I will visit navbar TSX, and I would suggest you that you open up the source code.
Oops.
Let me go back to here.
I would suggest you to open the source code which is in the description.
Just open it up in a new tab because time to time will be copying and pasting some UI code, so you
can just follow along with me without wasting any time.
So if you have the source code, open a new tab.
It would be awesome from here on out.
Okay, so let's visit the navbar component and close everything.
We would like to build this entire component.
I will delete everything that we have so far.
I will make this to be a nav element and I'll say class name of border bottom.
Then we would like to have a div with some couple of classes.
So I'll get the entire class name.
Paste this in where we have a flex container, a height item centered padding x container, and centering
everything into the middle.
And I would like to have my left side, which is going to be the logo itself.
So I will copy this from the GitHub repo and paste this in.
Now this does not contain any logic at all, it is just a link with an icon and a text, so I don't
really want to waste three minutes to type this out, and I hope you don't mind it.
So we can just really speed up the entire process.
Instead of having this tutorial ten hours, we can copy and paste UI and maybe shrink this down into,
I don't know, six hours, five hours hopefully.
Right.
Okay, so that's the only reason I don't want to type out these classes and waste time.
We got the left side which is our logo, and below to this link I will have my right side which is going
to be the actions.
It will have the buttons.
So I will say um div and I only want to show this if we are signed in.
So I can wrap this with signed in component.
And go ahead and get the signed in from the clerk.
Next.js.
There we go.
Inside this div.
First we'll have some classes like flex items centered space x of four.
then we would like to have ML auto.
Then we'll have this dashboard button component that we will create in a second.
We will have the mode toggle component and we will have the user button which is coming from Next.js.
So let's go ahead and save.
This should crash.
But first I will copy this.
Try to create it.
Dot TSX and let's say Ahrefs.
Just save it like this for now and try to import it.
Now let's see the output.
There we go.
We can see the dashboard button, the mode toggle as well as the user button.
Now this dashboard button will be a client component.
That's why we separated this into its own file.
So we'll go ahead and just say you will be a client component with this directive.
Then we can implement the logic.
So in Um, like, why are we doing this?
Is because we will check if user is a candidate or if it is an interviewer, right?
If it is a candidate, we will not return this component.
We will just return nothing.
So in this case, this user is the interviewer.
That's why he can see this button.
Okay I hope that makes sense.
Now let's go ahead and try to build this component.
First I'll just kill this empty tab.
We don't really need it.
And I will shrink the left hand side for now.
Let's have this as hardcoded data.
So I'll say is candidate is going to be let's say false.
And let's say is.
Is interviewer.
Going to be true.
So depending on this we'll take to return something.
So I'll say if it is candidate we'll take to return nothing.
So return null.
But otherwise we can show a show a button.
So first I'll just make this to be a link.
Then inside I will have a button.
And let's try to give this an href which would take us to the dashboard page.
And let's get the button from UI folder which will have the class name of let's say gap of two and font
would be medium.
And we can say size would be small.
Inside we will have sparkles icon or yeah, I think it should be this one where I would like to give
this a class name size of four.
Then below to it we'll just say dashboard.
Okay.
Let's save.
And now that we are in a viewer right we're going to hit this return.
And we should be able to see this button.
There we go.
Now this is white.
We would like to get a green theme so we can go ahead under the themes in the CDN.
And we can customize the theme.
I would like to go with a green one.
I will select this and try to copy this code.
So let's copy everything and we would like to paste this into our CSS file.
Let's say CSS.
And by the way I can open up this command palette with command P or control p.
Okay.
Go ahead.
Select this layer base which is around I think 50 lines of code.
Paste this in save and we should be good to go.
Now everything is in green theme in our application.
When we click to it, it should take us to the dashboard page and we can go back.
If you make this to be like if you are a candidate, you will hit this if check and you are not going
to see that button.
Okay, but we are getting this data as hard coded.
How can we get it from our actual database?
Well we can go ahead and create some hooks.
So under the sauce I will go ahead and create a folder called hooks.
And I will create my very first hook which is going to be called as Use User role.
Yes.
And we'll be calling this hook just like this.
Let's say use user role.
And this will give us the roles such as is candidate or it is interviewer.
Right.
So instead of getting this as hard coded values we will grab this from our hook.
Now let's try to go ahead and build this hook in this file.
So first I will go ahead and just say export const use user role.
And we will make this an arrow function.
Then inside I would like to get my user from the color.
So we can say user.
It is coming from this hook from Clark next JS.
So we'll say we would like to get some user data from our database.
And for this you can use a query.
Right.
We'll say use query.
And we are going to call the API dot users.
And here you can see it is type safe because we are using convex.
It is completely type safe.
We can go under the users.
And once again it is still type safe.
We can get any of these functions.
And this is our query that we would like to call get user by clerk ID.
So if you remember this was a taking an argument which was the clerk ID.
And let's go ahead and paste this in.
We'll say um I think clerk ID will be equal to user.id.
And we can say if this is undefined, we can just pass an empty string and we're going to get an empty
user object.
Right.
This would be null if we don't have it.
Okay.
So now um, convex returns you either null or undefined if it is in the in the undefined state, you
should understand that it is in the loading state.
Okay, so loading state is undefined and if you are getting null, that means there is no document.
And if you are getting the document, as you can tell, you are getting the document.
So let's say const is loading.
You can say if user data is equal to undefined that means it is loading.
But else we can go ahead and return the rest of the state such as the is loading is.
Interviewer.
Let's say.
So we'll say if user oops, what have I done?
Let's say user data dot roll.
If it is equal to interviewer that means this should be true.
But else let's duplicate this.
Let's say if it is equal to candidate, that means this field is going to be called as candidate.
Okay.
So now by using this hook we can actually grab those fields from the user role.
You can get the loading state right.
You can get the is interviewer or is candidate states.
So let's say if you are the candidate or if it is loading, we don't want to return anything.
But if you are the interviewer, we would like to return this statement.
And since we are not using this, let's go ahead and delete that.
Okay.
So that's going to be it.
For our very first hook we have used a query from convex.
This is how we can do it.
Call the hook pass the API with the related table as well as the query.
And if you have any arguments, paste that in and you'll get a data.
If it is in the undefined state, that means it is in the loading state, and we can return these fields
to be able to grab them from the hook.
Okay, now we can actually check we don't see that button because this user is a candidate.
Let's go ahead and try to update that.
Um, why do we have this twice in the database.
So that should be a mistake.
Let's go ahead visit the users file.
So we say if existing user return this.
So this code looks correct.
Uh, maybe we have tried to sign up before we implement this logic.
That's why we are having this twice.
I'll go ahead and delete the documents and delete the user from the dashboard as well.
And try to do it once again from scratch.
Okay.
So let's try to sign up.
And I think we can go into the layout file And I'll show you something else.
The app layout.
I will say, if you are signed out, you would like to redirect to sign up or sign in.
In this case, I'll go with the sign in option and to.
This will always get you to the sign in page if you are signed out.
And we can wrap this with signed in.
Okay.
So if you are signed in you're going to see the application.
But if you are signed out you're going to redirect it to the sign in page.
Now we are not logged in.
So we can go ahead and try to sign up.
We should be able to have our account created as well as the user in the database.
So this is candidate.
We cannot see the button.
Let's try to make this an interviewer.
Okay.
Now we should be able to get this button.
As you can tell, and I didn't need to refresh this because it is working in real time.
So that's going to be it for the navbar component where we built our very first hook into this dashboard
button.
This is where we are calling this hook to be able to get the user role.
And we'll be using this in multiple different places to check if user is the interviewer or if it is
the candidate.
And other than this, we have put the logo to the left hand side.
We have implemented the dark mode and then we put the user button.
And then we also protected our entire application with this signed out and signed in components.
So if you are not signed in we cannot do anything right.
We will be redirected to the sign in page.
Otherwise we can see our application.
So that's going to be it for the navbar component.
And we can move on with the next section.