Build a Fullstack Music App with Next.js Playlist Container Setup

Transcript from the "Playlist Container Setup" Lesson

[00:00:00]
>> I will continue to move on to actually building out this layout. So I'm gonna head back to the player layout and we're gonna actually make this a thing. So again, there needs to be a sidebar to the left, and then a music bar at the bottom. So let's kinda get going with that.

[00:00:13] First thing I want to do is, because if you think about that design, it's kind of like a fixed width, right? If we go back, this sidebar is never gonna move and this player bar is never gonna move, they're always there. The only thing that really moves is, if you can see right here at the playlist, you can see there's a scroll bar there, that playlist section is its own container and it moves, but the sidebar that's containing it doesn't actually move at all.

[00:00:37] So because of that, I'm probably gonna use an absolute positioning to put everything where it needs to be, and then just do math, and go from there. That's probably what I'll end up doing. If this was gonna be super responsive, you could probably still do that and then just use nonfixed values like pixels instead of use ems or percentages and things like that.

[00:00:57] And I kind of see that approach a lot in this common dashboard set up now where it's absolutely position sidebar with a margin left or something on the main thing, so we'll kind of do the same thing. So the question was, if we're doing absolute positioning, when we do get to responsive design is the technique to do some type of collapse to get it out the way, maybe do a hamburger menu or something like that.

[00:01:20] Yeah, totally I see that a lot. People also will just typically, it really depends on how you do the responsiveness. Are you doing it in CSS, are you doing it in JavaScript? Because in chakra UI, you can actually write a media query using a hook. You can write a media query in line or in a component.

[00:01:37] So really just depends on how you're doing that and how you toggle that, but typically what I would do is I would have two different components. I would have one component that's for desktop view, that's the navigation. And I'll have another component, that's the same navigation but for mobile view.

[00:01:52] And then I would just toggle the two depending on what state I was in, and that state is determined off a media query hook, that way it's reactive. But you can also do the same thing in CSS as well. But you'll probably need classes for that. You'll either have a class that's hidden on mobile, right?

[00:02:08] And that's inside of a media query. When it's in a media query, its display is there but on desktop, it says display none, right? So that's another way you can do it. But these days, I typically avoid writing CSS files. So [LAUGH] I love CSS, I just don't like writing it in a CSS file.

[00:02:28] Which is strange because, I used to remember just love writing stylus and Sass and Less all the time. Really love doing it, I now I'm just like, I don't wanna write that anymore. I just wanna grab a component lib that gets me more than halfway there and then just tweak it.

[00:02:43] It's a lot faster in my opinion. But don't get me wrong, I'll hop on CSS wars and battle somebody, if I need to, right? I'll do it but only if I have to. For this box, let's give it a width of 100 vw. If you don't know know what that unit is, vw stands for view width.

[00:02:59] It's relatively new, I guess. But it means just 100% of the view port or whatever screen you're on. If you're on a 12 inch screen, it'll be that wide. If you're on a 21 inch screen, it'll be that wide. It's what you think 100% would be but it's not.

[00:03:14] This is what it actually is, this is the full width of the screen, cool. And then we're gonna do the same thing for height. So height would be 100 vh, which stands for view height. So, it's 100% height of the screen that you're on. This is a responsive unit of measurement.

[00:03:33] So if you shrink the screen, then obviously it shrinks as well. So this is great for responsive design as well. So we're gonna do that. This is gonna keep our main page from scrolling. Nothing on the main pages scrolls, each individual thing scrolls on its own versus having the whole page scroll by itself.

[00:03:48] Which is what you will see on a content website or something like that we're just scrolling. Then the next thing we're gonna do is, we're gonna make a new box here and we're gonna give this a position of absolute. And by the way, see how I'm able to just write CSS properties as props on these components.

[00:04:10] This is why I chose chakra UI, because it literally has mapped every CSS property that you could ever do and made it a prop on every component that they have. If you don't like writing a prop for every single one, you can use this other thing called SX.

[00:04:24] And it takes an object of CSS properties, and then they do the same thing. I could put width here, and you can see I got all these type checked CSS properties here already. So to me this is much better than writing CSS in a CSS file because you don't even need a CSS preprocessor.

[00:04:39] You are using JavaScript at this point, which is what every CSS preprocessor wants to be anyway. So yeah, to me, this is just much better. And yeah, it lives right next to the JSX. I had two go into places, it's scoped already, it's not global. So it just works.

[00:04:58] So I'm gonna say position absolute for this box. I'm gonna give a top of 0 and a width of, let's see. So this is gonna be for the sidebar. You can kind of play around with this, but I think what I found was 250 pixels wide for the sidebar was pretty cool.

[00:05:15] Obviously that's gonna look different depending on what screen size you're on. But you can play around with this number, you can put a percentage here if you want. I don't recommend that, cuz then it'll look really, really big on it like a 30 inch screen, your sidebar will be massive.

[00:05:28] So typically I always like to give the sidebar a fixed width no matter what screen size you're on because it shouldn't get bigger. Whereas the page itself probably would get bigger on a page, but a sidebar, the navigation typically doesn't. Imagine a toolbar at the top that got taller if you rotated your screen vertically, that would be weird, right?

[00:05:46] So yeah, I think navigation is one of those things that should never change its dimensions no matter what the screen size is. So it's either there or it isn't, depending on mobile or not. Okay, and then I'm also gonna do a left 0. So this will be our sidebar, and I'm just gonna type in the word sidebar, so we know it's there.

[00:06:07] And then for the next part, so if we have a sidebar on the left, then to the right of that is the actual page, right? So that's where the content is gonna be. So we're gonna make another box for that. There we go. And we need to account, because the sidebar is absolutely positioned, we have to make that, let me show you the visuals cuz I'm just using my hands here.

[00:06:34] So we're creating the container for this page now, and because this is absolutely positioned and is turned to 50 pixels wide, we have to have this section account for that 250 pixels. So we have to put some margin on the left, that's 250 pixels, so it doesn't render underneath it.

[00:06:49] Cuz that's what would happen if we didn't do that cuz it's absolute position. So it'll just sit there underneath it. So if we offset it by turning 50 pixels to the left, we can push it over, and then we can also use math to determine how wide it is by using the calc function inside of CSS.

[00:07:04] So that's what we'll do. By no means is this the only way to do this? This is the way that I thought was the best and it usually works out. And my favorite, I do less debugging this way with CSS [LAUGH]. So we will do that. So for this box, we're gonna say marginLeft.

[00:07:20] So everything that's dashed delimited in CSS as a prop is gonna be CamelCase. So instead of margin_Left, because you can't use dashes and prop names, this is gonna be margin left with CamelCase. And like I said, we got to count for that 250 pixels. So I'll say 250 pixels, just like that.

[00:07:37] And then the next thing, what I'll do is I also want to account for the bar that's gonna go underneath it. That's also gonna be absolutely positioned as well, and we need to account for that. So we'll be coming back to this and adding a margin bottom. But for now, I'm just gonna render the children here.

[00:07:56] So that's where the children get rendered, which will be the page. And underneath that is the bar where we're actually playing things. So I'm gonna make a box here. This too will have a position of absolute, just like the sidebar, except its left will be 0, and its bottom will be 0.

[00:08:15] We don't want this to go on top. And then I'll just say player here. And just to swing back to this box up here where we're rendering the children, we have to account for the height of whatever the play bar is gonna be. Again, this is like you kind of got to play around with it and see what visually looks good.

[00:08:37] This is where you have your design tool and you're like, how tall is this thing, how many pixels is it? I think what worked out for me was 100 pixels. So I'm just gonna give this a margin bottom of 100 pixels, and that should give that player enough space down there.

[00:08:49] And I'm gonna come back to here so we're still copying it, don't worry, I'm gonna come back. I just wanna visually make sure that all these looks like the way it's supposed to look like. So if we look at this page, you can see that other than this homepage it's huge, we should probably get rid of this at some point, but it's actually doing what we need to do.

[00:09:09] We have a sidebar on the left, and then on the right we have the main content of the page, and then underneath it there's a player. So we're getting closer, we're there, but obviously we need to style the things and make them look good. So pretty close.