Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Develop Navbar
Loading...
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 To start developing our navbar, I'll head over into the components folder.
00:00:06 I'll leave the UI for the components that ShadCN brings us, but for our components, we'll create them right here directly within the components folder.
00:00:15 So I'll create a new file called navbar.tsx, and I'll run RAFCE so we can quickly spin it up.
00:00:24 Within this navbar, we can wrap it with an HTML5 semantic nav tag instead of a regular div, And we can give it a class name equal to navbar.
00:00:36 Now, you can see how my IDE automatically recognizes that this navbar is coming from globals.css.
00:00:43 And as I mentioned at the start, we're using custom tailoring classes for readability and reusability.
00:00:50 If you're unsure at what some of these classes do, you can simply command click it, and it should lead you to the line where we have created all of the
00:00:59 classes for that specific class name, such as the nav bar, which will simply apply a flex container.
00:01:05 It'll center the items, both vertically and horizontally, set up some margin, give it a full width, give it some padding,
00:01:13 a white background, and also set up the padding for smaller devices.
00:01:17 Now within it, I'll create a new link component coming from NextLink with an href pointing to forward slash, which is the homepage.
00:01:28 And within this link, we can render a div that'll have a class name equal to flex.
00:01:34 items-center, gap of 2.5, and cursor-pointer.
00:01:40 Within it, I'll render an image coming from Next Image with a source of images, logo.svg, an alt tag of logo, a width of about 46, and we can also do a
00:01:55 height of about 44. And we can close it right here.
00:01:59 Now, whenever a component is going into the second line, what I can do is just split it a bit so it's easier to see where it starts and where it ends.
00:02:08 And right below this link, I'll also create a div that'll have a class name equal to flex-items-center and a gap of eight in between the elements.
00:02:21 And here we can create some paragraphs pointing to different parts of our application.
00:02:26 such as home, or maybe companions, or maybe my journey, which is technically our profile, or maybe pointing us back to sign in.
00:02:38 For now, of course, these are dummy links, but later on we can actually make them work.
00:02:43 So now we have to import this navbar right within our homepage.
00:02:47 But if you think about it, the navbar will not only go within the homepage, it'll also go right here within Discover, within the new companion builder,
00:02:57 within My Journey, and it'll go everywhere.
00:03:01 And that is the perfect place to use a Next.js layout.
00:03:05 It is a special file that allows you to embed a specific component within all of the other routes.
00:03:12 So head over to app, layout.tsx, and here we are rendering the children.
00:03:19 The children is simply what every single page shows for that page.
00:03:24 So if the page is profile, it'll show the page that renders the profile page.
00:03:29 If the page is sign-in, it'll show the sign-in.
00:03:32 But in this case, we want to add a self-closing navbar on top of every single page, so the perfect place to add it within is the layout.
00:03:41 So now, if you head back, you'll be able to see this simple navbar.
00:03:45 Now, it's not yet functional, so what we need to do next is create each individual nav item.
00:03:51 I'll do that by heading over to components, And right next to the navbar, I'll create a new component, which I'll call nav-items.tsx.
00:04:03 I'll run RAFCE and I'll import it right here instead of these fake paragraphs that we created so far by saying nav-items.
00:04:13 I will leave the sign in though, because later on we'll modify it, but for now we should be good.
00:04:18 So if I head over into the nav items, we can now make it functional by creating a new nav with a class name equal to flex items-center.
00:04:30 and a gap of four, and right within it, we need to create a new array of different elements that we want to map over, such as an object that has a label
00:04:42 pointing to the homepage, and it also has an href of the link where we want to go.
00:04:49 and we need to create a new one for every link that we have so we can map over them.
00:04:53 But instead of creating this data point right here that clutters our view, instead, we want to copy this array and take it somewhere above.
00:05:03 For example, here, by saying const navItems is equal to an array where we can now define all of these different data points in piece so we can later on
00:05:14 very easily map over them.
00:05:16 So one is going to be the label of home.
00:05:19 Then we're going to have one that's going to say label of companions with an href pointing to companions.
00:05:26 And we can have a third one, which is going to say my journey.
00:05:30 So that's going to be the label, my journey.
00:05:33 And then href will also point to my journey.
00:05:37 Perfect.
00:05:39 Now, we can simply map over those nav items by saying navitems.map, and from each one, we can automatically destructure the label and the href.
00:05:52 And then for each one, we can automatically return something.
00:05:56 Now, when I say automatically return, what do I mean by that?
00:05:59 I mean that after the arrow, we're not putting the curly braces like we are here, because then we're opening a new functional block where we can type some stuff,
00:06:08 do some logic, and finally then return.
00:06:11 No, instead, we're putting a parentheses right here directly, which means that we have an immediate return.
00:06:18 So whatever you put in here, such as a link, it'll automatically return it.
00:06:23 This link will have an href of href.
00:06:26 It'll have a key, since we're mapping over the elements of label, because each label is different.
00:06:32 And it'll simply render the label within this link.
00:06:36 So if you do that, you should be able to see those three clickable links at the top.
00:06:40 And now all of them are going to actually take you to different pages.
00:06:44 Profile, Companions, Home.
00:06:47 But now, how do we know which one is currently active?
00:06:50 Besides by taking a look at the contents of the screen.
00:06:53 we want to be able to see at a glance on which page we're on.
00:06:56 Well, to be able to do that, we have to figure out on which page we're currently on, right?
00:07:01 And we can do that using the Next.js's usePathName hook.
00:07:06 So I'll say const path name is equal to usePathName This is being imported from next navigation.
00:07:15 And as soon as you use a hook within your application, you have to turn it into a use client component because it'll be rendered on the client side as
00:07:24 it's using client side functionalities, such as tapping into the current URL path that we're on.
00:07:29 Now, based on this path, we can now add a class name to this link.
00:07:35 And we want to make it dynamic, so we'll use something known as a CN, short for class names coming from LibUtils, which allows us to check whether the
00:07:46 current path name is triple equal to the href that we want to go to.
00:07:52 I'll actually put this into multiple lines so it's easier to see.
00:07:55 So if the path name is equal to href, In that case, we want to render the text primary and font-semi-bold so we can automatically show to people that we're
00:08:08 on that page right now.
00:08:09 If you save that, you'll see that home will be bolded.
00:08:12 Same if you click on companions, that'll be bold and so on.
00:08:16 Perfect.
00:08:16 So you should now be able to navigate between different pages and see the current page highlighted And of course, this navbar is completely mobile responsive,
00:08:26 so it looks good on desktop too.
00:08:28 So with that in mind, we have just developed our navbar, and it's a good practice that whenever you implement a feature,
00:08:34 no matter how small it is, that you actually push it over to GitHub.
00:08:38 So I'll head over into my second terminal and I'll run git add dot git commit dash m.
00:08:45 You always write commit messages in an imperative form.
00:08:49 So you say something like implement instead of implemented.
00:08:53 Why is it that way?
00:08:55 Well, that's because you're telling to people that are seeing these commits of what they will do if they implement this commit within their existing code base.
00:09:04 So this commit will implement That's how you do it.
00:09:10 And of course, oftentimes we write it in all lowercase letters, but if you want to make it look a bit nicer, you can say implement navigation bar.
00:09:20 And once you commit it, you can just run git push and this will automatically be reflected on your GitHub repo.
00:09:26 Perfect.
00:09:27 So if you have a pro subscription and you're watching this video right within JSM Pro, you'll be able to see the commit changes for that lesson specifically
00:09:35 so that you always know what you had to do within that lesson.
00:09:38 With that in mind, this homepage is looking pretty bland.
00:09:42 So I think it's about time that we give it some love.
00:09:46 Let's focus on the homepage next.
