This video is available to students only

The Main and SideBar

This lesson will focus on getting the main section with the sidebar navigation for our Settings page.

This lesson will focus on the main section with the sidebar navigation for our Settings page.

Main and Sidebar mock

We will pick up where we left off in the last lesson over at codesandbox.io.

Moving the menu into its own component#

To make things easier, let's move our menu into a separate file called Menu.js and import that in as a separate component. Now our App.js file looks like this:

We are only doing this so that it is easier to focus on the next section. Typically you want to know your data before you start dividing a page into components and sub-components.

Stub out the main and sidebar#

(We are calling it the "right-hand side" for now, but we will give it some more specific names in the following lessons.)

And this is what it looks like:

Stubbed out main

In the mockup image at the top of this page, you will notice two things. First that the header and main section are both positioned in a PadBox and that Padbox has two colors for the background. So let's extend our PadBox component so that it gives us that desired look:

In the above component, we use the attrs constructor to set the padding to xl. Then we are using a linear gradient. There is really good documentation on linear gradients over at MDN. Usually, one thinks of linear gradients as a gradual change from one color to another. You can also use linear gradients to create bands of solid color. In our ContentArea component, we are setting the direction to go from top to bottom with the top 14rems as black and the rest as whitesmoke.

We also need to add some styles to our header and main elements so that they will be visible on our new background:

We have a header that will have a white color for the text to contrast the black background. Our main section will also have a white background with curved borders, like in the mockup.

Now we can incorporate all of these new components like this:

Which looks like this:

padded content area

You will notice that the whitesmoke color only goes down as far as the SettingsPane, but it would look best if the rest of the page had that whitesmoke color as well. The easiest way to achieve this is to set that color in our styles.css, like this:

Beyond the mockup#

 

This page is a preview of Composing Layouts in React

Start a new discussion. All notification go to the author.