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.
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:
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
black and the rest as
We also need to add some styles to our
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:
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: