Build a Fullstack Music App with Next.js Creating the Sidebar

Transcript from the "Creating the Sidebar" Lesson

[00:00:00]
>> Like I said we are gonna continue working on this sidebar here and getting it as close if not exactly the same as this design here. So let's get started and again you have this link so you should be able to reference this design as closely as possible.

[00:00:17] But obviously I'm gonna be walking through it and kinda narrating my thoughts the whole time like I've been doing. So let's hop into it. And actually the first thing I'm gonna do cuz it's just annoying me is I'm just gonna just clean out this homepage inside of pages index.tsx.

[00:00:31] It's just distracting. I mean, it's really cool that we get this but I don't need it. So I'm just gonna put a div here that says home. And just that way it's clear we have a blank slate. It's not in the way. We don't need that code again, that was generated when we did next create app.

[00:00:46] It's not code that we wrote. I'm just gonna get rid of it. So that way when I go back and check the sidebar in the browser, I can actually focus on the sidebar, not all the stuff that got generated so, you can put whatever you want there. I'm just gonna clean it out.

[00:00:59] And then the next thing I'm gonna do is we're gonna make a new component. And I'm just gonna call it sidebar. So let's do that. File called sidebar.tsx. And this is gonna be a pretty big component. Typically I think what I would probably do is break it up to even smaller components.

[00:01:19] But for the sake of time and not trying to have 30 components all over this app we're just gonna put everything in the small component and capsulate it that way. So if you feel like hey it's got its components getting pretty big yeah I'm with you on that just trying to save some time time here.

[00:01:38] So I'm just gonna make a sidebar component here. And notice if you've used react lately that you typically I guess unless you use the latest version rack but typically you have to import React at the top so it's in scope so that the parser, the JSX parser can use the JSX pragma provided by React to parser JSX or in the latest version of React, you don't have to do that anymore.

[00:02:01] And actually yes, use the latest version of React. So you notice I haven't imported React at the top of a page of JSX. That's why you don't have to do it anymore in the latest version. So if you do import it it's not gonna break. It's totally fine, but you can also make your own JSX parser and parse it yourself which is really crazy that's the thing You should look into it.

[00:02:21] In fact I think that's what the SX property all the components use. They use their own parser and add it so it's pretty cool. Anyway getting sidetracked I could talk about crazy stuff like that all day so to export this sidebar and I'm just gonna return thing that says.

[00:02:38] A div that says hello from sidebar. And typically, I always like to just hello world all my components first and get them rendered on the page to make sure that it's hooked up right. And then I go back and make them work cuz One thing I hate doing is like you put all this work into a component and then you go test it out and doesn't even show up.

[00:02:58] And now it's like well why is it not showing up? Is it cuz I didn't hook it up right Is there something wrong in my component. So I kinda just like to get that stuff out of the way first and then go back and fix it and that way you can also see it in the browser as you're developing and you can go from there.

[00:03:12] I think it's pretty hard to develop a UI without actually looking at it unless you're just a god. She's just that good, I prefer to look at my components as I'm building them. So we have our sidebar here or go back to our player layout and I'm gonna import my sidebar here I should be able to type in sidebar and get a Autocomplete.

[00:03:32] There we go. And right here where I have the sidebar word are gonna replace with the sidebar component like that. So now that I have that I'm gonna go check it out and you can see right there hello from sidebar. We got home on the right and we got player at the bottom exactly the way it should be all things in the universe are correct.

[00:03:55] So let's work on this sidebar. It's gonna be a couple things that we need to do. Chakra UI has this really sweet thing that we're gonna use, it's called a list. If you go look at it, you can see it's pretty much exactly what we want out of a menu I mean, at the end of the day, it's just a glorified UL or OL.

[00:04:16] But again, we get to style it and do some crazy stuff. So we're gonna be using the list here, which has like, you have a list and you have like a list item. You got all this crazy stuff. You can add icons to them. You can see right here, you can add icons to them.

[00:04:30] So we'll be taking advantage of this whole list components feature that chakra has and that's what we'll be using. So I'm gonna head back to our code, and I'm gonna import some of those. So I'm gonna import from chakra UI layout ,so at chakra UI layouts and the things that I want here are gonna be Release box cuz that's our div.

[00:04:52] Muscle go use list, list item, list icon. There we go. And then we also wanna do a divider, which is exactly what it sounds like. It's just like a line that sits in the middle nowhere. We're gonna do that to divide cuz if we go back to our design, you can see there's like a little divider right here.

[00:05:10] You can barely see it. Zoom out a little bit. It's right there. See that the only shows up there, but there's a divider there. It's barely there, but it's there. So we're gonna get the divider. They have this other sweet component called center, which centers things. I can't tell you how many times I've had gotten on Google and look up how to center something to CSS.

[00:05:32] And I clicked on the same article every time. It's the one from, yes, CSS tricks and they show you, do you know the size of it, yes, go here. Do you know the vertical? I've looked at that article for the last six years cuz I just don't remember how to center stuff, Well, now this component just does it for me.

[00:05:51] It's like that article in a component. So it's perfect. So I'm gonna use the center component. There's a thing called link box. This is actually cool. We'll talk about that a little bit. And the one that works with is called link overlay. Those two components basically allow us to make a click target which is basically a word but have a bigger surface which is the size of a hole link item.

[00:06:15] If you ever had to do that manually it's kinda annoying to like get this whole thing to work, this just does it for you so it's really cool so we'll be doing that from Layouts. And then we're gonna have a couple components that we're gonna use as icons.

[00:06:29] So we're gonna import those as well. So we're gonna import from this really cool library called react icons that you also have installed. And you can go look at their website. In fact, I'll just pull it up right quick. It's literally the only Live that I use for icons and react like there's nothing better.

[00:06:46] It's all free. And they pretty much went and found every icon pack that you've ever heard of, and turn them into components. And you get them all here as imports. And every like UI live has like adopted the functionality to consume these so they pretty much work with every UI live Lead too.

[00:07:04] So it's really cool, instead of before this you would have to go to each individual, one of these websites and get the icons. Now they're just all here. It's really cool, so we'll be using some of these, feel free to play around with that. And the ones that we want are gonna come from the MD which is material design, so we're using some of the material design icons here.

[00:07:24] And we're gonna do MD home, which is the home icon. We're also gonna do indie search the other ones we're gonna use is in the Music Library. I mean it's getting really specific here. It's like they knew I was coming. [LAUGH] Music or is it music? MD Library Music.

[00:07:48] There we go. Library Music, and then we're also gonna do Md Playlist ahead, like, can't make this up, they already had it. And the last one is Md Favorite. And the reason I know I needed all these icons cuz again, if we go back and look at the design, that's all the icons here, there's a home icon, there's a search icon.

[00:08:10] There's just like book one. There's the ad one. There's the favorite one. That's where I got all of those icons from, all five of these icons were cuz that's what I saw here.