How to Build a React Sidebar Menu

[00:00 - 00:10] Okay, so here we are where we left off in the last lesson. Here's the menu and the settings and everything's on this one file.

[00:11 - 00:19] So what we're going to do is just to make things easier to keep track of. We're just going to refactor this menu bar into its own file.

[00:20 - 00:28] We're just doing that just to make it easier to work with, not necessarily something. I'm recommending that you do or something that I would do on a regular basis.

[00:29 - 00:40] It's just to help us focus on the next section at this point. So an easy way to do this is let's go ahead and copy everything in this file.

[00:41 - 00:57] And we'll go to the source here and we're going to click on new file. We're going to call it menu.js.

[00:58 - 01:18] And then let's just simply remove the parts that are not part of the menu. I have an export function menu so that way it's a name export.

[01:19 - 01:31] And then we can go back to our app and just simplify it down to just this. And there we go.

[01:32 - 01:54] So the next thing we need to do is let's go ahead and just start writing the HTML for the rest of the sections here. So below the header we're going to put a main.

[01:55 - 02:04] Now this is going to be this whole section right here. And let's put in there this is going to be the sidebar.

[02:05 - 02:14] And right now this is the placeholder for everything that goes over here. We're just going to call that the right hand side for now.

[02:15 - 02:27] Now if you look at this mock up we have this band of blue. We're going to have a black band in our design and then we have this gray area.

[02:28 - 02:45] And that's all has a padding all around it. And so what we're going to do here is we're going to do a we're going to create a wrapper around our header and our main section.

[02:46 - 02:51] And we're going to call this our content area. And I've already created it.

[02:52 - 03:16] But to make this work we're going to need to import styled from style components. And we're going to need to import the pad box from Bedrock layout pad box.

[03:17 - 03:42] So simply just we're wrapping our pad box in a styled we're using the adders constructor to preset the padding all around as extra large. And then we're using a linear gradient now oftentimes we think of a linear gradient as slowly merging from one color to to the next and it just makes incremental steps along the way.

[03:43 - 03:58] But we can also use that to create bands of color. So if you want to look it up MDN Mozilla developer network has a great article about the linear gradient syntax.

[03:59 - 04:05] And there's a link to it in the notes below. But what this is doing is we're going from top to bottom.

[04:06 - 04:17] And the first 14 rams is going to be the black color. And then the rest is going to be white smoke.

[04:18 - 04:43] So let's go ahead and if we wrap our header and our main in our content area. You can see now we have that first band in black and then the rest is in white smoke.

[04:44 - 05:05] Now what I went ahead and did here is I I pre added this into our styles is I added a background of white smoke. The reason is if we don't have that in there you're going to see this the color is going to stop right where our content ends and then it creates this kind of weird design feel.

[05:06 - 05:32] So let's go ahead and add that back in background of white smoke. Perfect now we can't see a lot of our content because it's not styled for this black background.

[05:33 - 05:45] So let's go ahead and add some extra components in here. First of all we're creating a settings header.

[05:46 - 05:53] And we're going to replace our regular header with that. And it just gives the font color of white.

[05:54 - 06:16] Then we're going to we have the settings pane which is just a styled main. And we're going to replace our main with that and it gives a white background with a rounded border radius just like our our design.

[06:17 - 06:33] Now we're going to step away from the mock up here and just kind of infer what is intended. And that is it's implied that this settings area.

[06:34 - 06:40] If I'm let's look at the mock up. It's implied that this settings area doesn't grow beyond that.

[06:41 - 06:56] It doesn't say that it's just an image but it's something we can infer from this design. And to do that let's go ahead and add our center component.

[06:57 - 07:33] Because what our center component does is it wraps what we need and it will grow as much as we want it to but it will cap out as a certain width and it will continue to center it no matter how big the screen or the parent container gets beyond that. So we have that we've imported that there online three.

[07:34 - 07:57] And let's go ahead and update our component now to have a center. We're going to define that with a max width of 85 rem and as you'll see it'll keep growing and growing and then once we hit 85 rems it just centers itself.

[07:58 - 08:07] That's fantastic. Now the other thing we need here is we have the stack look here that we're missing.

[08:08 - 08:33] See we have this we're missing that stack to look. So let's go ahead and bring in a bed dry clean out stack and we can import that .

[08:34 - 08:56] And since the center component is already wrapping our header and our settings pane. Let's just use our center as a stack and then give it a getter of extra art.

[08:57 - 09:02] And there we go. We've now got the header style just how we want.

[09:03 - 09:14] So all we need to do is get the main section laid out how we want and then we should be done for this lesson. So the thing we're missing in here is we need to split this.

[09:15 - 09:47] So let's bring in our split. And then we're going to make a slight adjustment to our settings pane.

[09:48 - 10:02] We're going to style the split. We're going to use our adders to give it a gutter of none because in this mock up we don't actually we don't want a gutter here.

[10:03 - 10:08] And we're going to say one fourth fraction. And then we're still going to keep that same style in the background.

[10:09 - 10:16] Why border radius 0.5 rep? Now you'll notice now we're missing the main.

[10:17 - 10:34] And the reason is is the split component that is written in add bed dry clean out split. It does extra things that as I was talking about in a previous lesson where it will actually switch to a stacking layout once it hits a unique size.

[10:35 - 10:55] Things I had to do to make that work make it so that if we set the as main here that we lose that splitting functionality. So what we just need to do is we just need to set it directly onto the settings pane.

[10:56 - 11:12] We still get that semantic markup. So let's go ahead and start styling this sidebar.

[11:13 - 11:36] This nav we we need it to be a pad box as a nav with a large padding on top and then no padding left to right. So let's go ahead and replace that.

[11:37 - 11:55] And then we want these elements inside of here stacked. So we're going to replace the UL the unordered list with a stack.

[11:56 - 12:20] We're going to give it we're going to make it be a stack as an unordered list with an extra small gutter. Now these list items we're also going to need to let's go ahead and start putting the some placeholders for these logos.

[12:21 - 12:51] And I got that copying pasted in. And it helps to bring in that logo.

[12:52 - 12:55] Now you can see that's just kind of staying. It's not actually doing what we want.

[12:56 - 13:06] So we want each one of these list items to be an inline component. We also want some padding on them.

[13:07 - 13:27] So let's go ahead and let's just play with this first one for example. We're going to need that we're going to need to import that in.

[13:28 - 13:35] Inline, inline. There we go.

[13:36 - 13:42] So now we have that padding around the outside that we want. We've got that look that we want.

[13:43 - 13:57] We could do this across the board for all of these, but we also need to address this active state. So we need to have all of them be able to have this look which we already created right here.

[13:58 - 14:14] But we also need to create this active state with this border. So before we go and just copy and paste over and over and over again, let's go ahead and make a new component called a side menu item.

[14:15 - 14:24] This side menu item, it's in styled inline. We're going to use it as a pad box with a large gutter.

[14:25 - 14:35] The padding will be smaller on top. Just like we have right here and center aligned.

[14:36 - 14:47] Then we're going to set this border inline start to 0.25 rem solid transparent. So this is the default state.

[14:48 - 15:07] We're setting it as transparent because we want that little border to take up space, but we don't want to see it unless we're in an active state. And once we're in the active state, we're going to set that color to be gray.

[15:08 - 15:26] We're going to set our background to be gainsboro, which is another form of gray. So let's update our code to use the side menu items.

[15:27 - 15:41] And we're setting this first one to be active and you can see we're creating that gray border once it's active. And the rest of it is that this gainsboro gray.

[15:42 - 15:45] This border is always there. It's just transparent.

[15:46 - 15:50] We can't see it. And there we go.

[15:51 - 15:57] That's everything we need to get the sidebar working. We've got we're halfway there.

[15:58 - 16:15] Next thing we need to do is just work on this profile and the privacy pane and the buttons and we're done. So if you want to check out this code, there's a link all the way at the bottom and you can check that out at the bottom of the lesson and I'll see you on the next lesson.