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:

import { Menu } from "./Menu";

export default function App() {

  return (

    <div>

      <Menu />

      <header>

        <h1>Settings</h1>

      </header>

    </div>

  );

}

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#

<div>

  <Menu />

  <header>

    <h1>Settings</h1>

  </header>

  <main>

    <nav>

      <ul>

        <li>Profile</li>

        <li>Account</li>

        <li>Password</li>

        <li>Notifications</li>

        <li>Billing</li>

        <li>Integrations</li>

      </ul>

    </nav>

    <div>Placeholder for right-hand side</div>

  </main>

</div>

(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:

const ContentArea = styled(PadBox).attrs(() => ({ padding: "xl" }))`

  background-image: linear-gradient(to bottom, black 14rem, whitesmoke 14rem);

`;

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:

const SettingsHeader = styled.header`

  color: white;

`;

const SettingsPane = styled.main`

  background: white;

  border-radius: 0.5rem;

`;

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:

<ContentArea>

  <SettingsHeader>

    <h1>Settings</h1>

  </SettingsHeader>

  <SettingsPane>

    <nav>

      <ul>

        <li>Profile</li>

        <li>Account</li>

        <li>Password</li>

        <li>Notifications</li>

        <li>Billing</li>

        <li>Integrations</li>

      </ul>

    </nav>

    <div>Placeholder for right hand side</div>

  </SettingsPane>

</ContentArea>

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:

body {

  font-family: sans-serif;

  background: whitesmoke;

}

Beyond the mockup#