Creating a Nav UI Component

[00:00:00]
>> Brian Holt: OK, we're going to do import Link from next/link. Import and this is actually helpful to do from @/components/ui/navigation-menu. And then we want NavigationMenu, NavigationMenuList, and NavigationMenuItem. If you've never seen this like at, this is something that I've seen more recently in Node code bases where they'll set like the root directory is represented by the at here, and Next sets this up for you automatically.

[00:00:54]
It's really nice that you don't have to say like dot dot slash dot dot slash because that gets really hard to read over time. You can always kind of give like a relative or like an absolute path from the base directory. And what's really nice about this is like if I move this file to another place because it's not relative, the imports all still work, I don't have to go mess with all the imports.

[00:01:14]
It's great. I'm very happy about that. And then we're going to import Button from UI button. And see, I don't want that. I want @/components/ui/button like that. OK, export function navbar. So we're going to be writing like the navbar that's going to sit at the top of the page. And why is this 4 spaced spaces, or is it just down here?

[00:01:53]
Spaces. I want this to be indent 2. This is actually usually a time where I would just like open my new file .editorconfig. I didn't do this in the course, but if you just come in here and I'll say, generate an editor, this is Copilot, an .editorconfig where everything is indented to 2, because I can never remember the syntax, right?

[00:02:34]
But like AI is perfect for this stuff because you don't ever have to remember, right? And just say accept and now everything will always be indented to 2 throughout my entire editor, which is nice. All right, so here we're going to say return. This is back in navbar. And when I say Nav, className equals. This is the part about writing a Tailwind that's like not fun is like these like super long class names, border-b, bg-white/80, and like I feel like they're kind of like hard to parse and until you start writing a lot of these, and then like it's like the Matrix where you can like start seeing the numbers, yeah, that's.

[00:03:23]
I don't know, I, you can have complaints about this, and I would understand. Backdrop-blur supports backdrop-filter, bg-white/60, sticky, top-0, z-50. Like, again, having written a lot of Tailwind at this point, like I can read this at a glance, right? Background blur. But it was hard to get started out with. Div className equals container, mx-auto, flex, h-16, items-center, justify-between, and px-4.

[00:04:46]
And the className flex items-center and gap-2. We'll write a, so this will put it at the top, right, it'll be sticky, z-50 means it's going to sit on front of everything. It'll have like a backdrop here, and then inside of that we'll have some kind of container divs that will kind of use flex to kind of justify around the navbar.

[00:05:15]
OK, inside of that, we're going to have a Link component which gets from next/link, this one. Href, so this will be the brand, this will send you home. And then we'll have a className equals font-bold, text-xl, tracking-tight and text-gray-900. OK, and we'll just put whatever you want to call your site here. I called mine Wiki Masters.

[00:06:00]
Oops. But you can call it whatever you like. OK. And then here we're going to use a NavigationMenu. And again, like this all works really well with TypeScript, which I really deeply appreciate. So if you try to put on something like this, it's going to yell at you immediately be like, hey, I don't expect stuff, right? Just makes it really easy for tracking this across an entire project.

[00:06:38]
OK, then it's going to be NavigationMenuItem and we'll have Button as a child, variant equals outline. And again, another thing that actually makes this like really nice to author is that because all of the code for all of your components lives inside your codebase, like Copilot or Claude or all those can read them and then do really well working with them.

[00:07:16]
Like they don't have to worry about like which version it is or any of those kind of things with that, that's where like LLMs really get tripped up. Like the reason why I say all these things is because I have to author a lot of code that like people are going to be consuming via LLMs and so it's something that we like test quite a bit to make sure that these things work well with LLMs.

[00:07:51]
NavigationMenuItem. And here we're going to put a sign up button as well. Button as a child. And we're going to say a Link, href equals sign up. Let's say sign up. So obviously this is a logged out experience, we'll come back, we'll do the logged in experience once we get to the auth part of this. And I'm not going to make you write a whole lot more UI than this, but I think it's useful to kind of go through the motions of like, this is what authoring Shadcn and Tailwind feels like.

[00:08:41]
It feels a lot like this. Now again, how would we have done this if we had just been using CSS? Well, you could have used like just like a global CSS and just like written stuff continually, like if you look at my course website, that's how I did it. And at some point, you end up with a lot of dead CSS in there, just inevitably.

[00:09:00]
Have you ever tried deleting CSS out of a very long CSS thing? It never goes well because there's always some part of your website that's relying on that little piece of CSS. I mean, that was our biggest problem at LinkedIn with that huge like 2-3 megabyte file, is that we try and delete something, we'd find out that like, I would try and delete it for LinkedIn Learning, but we found out that it was like being used in the LinkedIn profiles page, right, randomly.

[00:09:28]
What's nice is like if I deleted navbar right now, where would all the CSS for it go? It would go with it, right? It's all right there. Like optimizing for deletability, I think I've talked about this a bunch of times in my courses, it is if you optimize for something to be deletable, it's inherently modular, it just has to be, right, because if it's something that you can pull out and not have like some cascading effect afterwards, you've done a really good job of making it modular.

[00:09:56]
Now, you might ask me like, is there, I hate this, how do I do it some other way? And the way I would say is like you'd write some, you know, navbar.css. I would probably make a directory called navbar and I'd put it in there. And so this would have like, I don't know, button, color red or something like that. And then you would come in here and you would say, import navbar.css.

[00:10:32]
OK, and now I know if I delete navbar.tsx. I know I can also delete navbar.css and so I try to put that all in one directory so that if I want, I need to delete the entire thing, you delete the whole directory, everything goes out with it. Does that make sense? You can put your tests in there as well, so if you have tests for the navbar, you can put those in there, and then those also would go with it.

[00:11:03]
So, that's another very effective design pattern. We're not going to do that today, but I also like that one as well. That's actually succinctly put, that's why I like Tailwind. Tailwind like gets you into this like deletable code pattern, and you're not even trying to do that, right? You're not even thinking about, most people are not thinking about that.

[00:11:29]
And I like software that like using the happy path gets you into good design patterns. That's the thing I like most about it. We did not use the menu list. OK. So this is getting, saying that's unused, and that's because there's supposed to be a layer between NavigationMenu and NavigationMenuItem, which is the list, so we're going to put that in right now.

[00:12:10]
NavigationMenuList like that. And we have to give it a className that's going to be equal to flex, items-center, and gap-2. OK. And then we're just going to move all this menu item stuff up into it. So I just added this line right there. And then obviously this one down here as well. So, that's it. I mean, that's like the feel that I was trying to get you to feel here of like working with Radix, working with Shadcn, you do a lot of like npx shadcn add blah, like that, it's probably worth looking at their website just momentarily.

[00:12:52]
Looking here at the components, right, this is the part that I want you to look at. They have a ton of stuff in here. I appreciate that they don't ship it to you all at first, you kind of have to go at it piece by piece. You're like, OK, I need a drawer now, right? And it's all just kind of built there for you. But let's go add this to the layout so you can see it.

[00:13:49]
We're going to go back to VS Code here. And not that. We're going to go to our layout.tsx, which is in app. And we're going to appear at the top. We're going to say import navbar from @/components/ui/navbar. Oh, I guess I did put this in UI, OK. So my notes said not to, but obviously these notes say that I should. So just drag and drop navbar into the UI that'll actually fix that.

[00:14:15]
So that everything, button, navbar, navigation menu, these are all just kind of how you want to organize these things. I frequently will organize things that I don't mix and match like what came from Shadcn and which didn't, and in this particular case I did. So you really can go about this either way. OK, components. Now I should say navbar, OK.

[00:14:54]
And then just inside the body. So here we're going to say navbar. OK. You can also leave it where it is and just delete this UI part of it. Whatever works for you. We're about to like copy and paste step 2 into here anyway, so it really shouldn't matter too much. There we go. You know, what this is not doing, which I expected to, is I was expecting the sign up and sign in to be on the right side.

[00:15:20]
So we can fix that in just a second, but you can kind of see here like it is sticky, so like it's sticking at the top there. It's a navbar, it's got like a nice background to it, the buttons look really nice, and we didn't really have to write too much of that, like we didn't write any of the button code or anything like that.