Transcript from the "Sidebar Component" Lesson
[00:00:00]
>> Alright. Now, let's do sidebar. All right, so for the sidebar, I think we have most the stuff here. We have a logo but although we're gonna use the logo, I didn't even upload it. It's really bad. So we don't need a logo. I like try to make a logo with AI and I was like, yeah.
[00:00:21] This kinda works but then I was like, no, I'm not doing this. So if you want a logo, go put your logo there. We're not, I'm not adding a logo. We're just gonna, that's part of the brand. We don't have a brand. That's what makes us cool. Alright, so we're going to import our card that we made.
[00:00:39] We're going to import image component from Next.js we'll talk about that in a minute. Actually, I don't think we're gonna need this because we're not using a logo or this I'm not. So we probably won't need that, so and then our sidebar link. First thing I'm gonna do is I'm going to make some links here, so I can iterate over them, instead of making.
[00:01:09] So in this case, I have four links, instead of making four entries down here in the JSX, I'm just going to make one entry by looping over it. Always do that even for static data. If there's going to be an instance where I'm going to repeat over something, even if it's over static data, I'm always gonna put it in an array I just don't want to write it more than once.
[00:01:26] Because as soon as I have to change it one time, or more than one time, I'm done. I don't want to do it anymore. So I'm just gonna put it in, right? If it's only two things, I'm going to put it in, right? And I'm going to loop over it.
[00:01:38] So that's just how I am. That's just my thing. So I got my links here. And they're just objects. These are the links that we're passing as you can see, like I said, If the icon is a name is a string, if this was a function or a component, And we tried to pass this, to a client component when sidebar is a server component disk this can't cross the network.
[00:02:05] This is this is logic this is this is something that needs to be executed. It's not static data like the word grid so that's all we have this. So here's our links. We have a home. It's got the grid icon, got a calendar, it's got a calendar icon profile for the user.
[00:02:27] And settings for your workspace or whatever and then just our sidebar, so sidebar like that. That's where it's a default sidebar and it's really just a card component. There's really not much new to learn here. So I'm just gonna put this in here and I'm just gonna get rid of my logo.
[00:02:57] I don't really need it and we're just gonna loop over these links.
>> You got sider bar line 22 and line 30.
>> Nice. Thank you.