0:01 All right, so in this lecture, let's go ahead and finish up building our 0:05 UI skeleton by adding our sidebar component. 0:10 So to start, I wanna add a user settings panel here 0:13 where we can add 0:14 the user's profile, the ability to switch our theme to our 0:17 dark 0:18 mode, which is gonna be a really cool feature, 0:20 as well as logging out of the 0:21 application. 0:23 So to do this, I'm gonna go ahead and create a new sidebar 0:27 component. And as we've done, let's head into our web directory, 0:31 and in the Components folder, we'll continue building inside of our 0:34 Dashboard directory. We'll create the new 0:37 sidebar.tsx component. And so let's go ahead and 0:41 export default function sidebar now, and we'll 0:45 go ahead and return our JSX. So as we've been doing, we'll 0:49 wrap everything in a root div and give it some 0:52 spaceY of six in this case. Now, the first thing we wanna do 0:56 is create a new card using our card component to house 1:00 our user profile and settings. 1:05 So inside of here, we'll create another div 1:07 and use flexbox to align 1:09 everything. So we'll use flex and itemCenter to align 1:12 things horizontally, and we'll set spaceX three, 1:17 margin bottom four for the spacing. 1:19 Now inside of this div, we wanna use the Next.js image component, 1:24 and I wanna render out the user's profile image. 1:27 Now in the future, we'll be able to change this, 1:29 but for now let's go ahead 1:31 and use a dummy image source just like we've been doing. 1:35 Well, for this, we can simply copy over our stories 1:38 component where we have the mock your story here, which is representing 1:42 our own user. Simply copy out the image 1:46 URL from here, 1:48 and let's add it to our Next.js image. 1:50 So we'll set our source and paste in this Unsplash dummy image
The rest of the transcript is for members.
Sign in 