Introduction to Composing Layouts in React

Welcome to Composing Layouts in React

Introduction

Using CSS in this age of components is difficult, especially where web layout is concerned.  In this module, you will learn the rules to be able to build composable layouts.

CSS in the Age of Components

Complex layouts can be broken down into smaller layout primitives that can be combined to build more complex structures.  Thinking compositionally will open up a more practical and reusable way of creating layouts on the web.

What is Layout Composition? A React Layout Primitives Guide

Knowing where to place your styles is critical to understanding composable layouts.  Using the Principles of Encapsulated CSS you will know exactly how to apply your layout styles in your components.

Encapsulated CSS - How to Apply CSS in a Composable Way

In the lesson, you will learn about Normal Flow and what patterns you can use to apply the principle of Encapsulated CSS in the context of Normal Flow.

Normal Document Flow in HTML, CSS, and React

You will learn the basics of CSS Flexbox and CSS Grid, especially which properties conform to the Encapsulated CSS principles and which ones do not.

CSS Grid vs Flexbox for Composable Layouts

In this lesson you will learn how to reset the default browser styles so that they follow Encapsulated CSS.

How to Add a CSS Reset to Remove Default Browser Style

Composable Layouts

What are Layout Spacers?

The Stack layout pattern is one of the most simple and common layout patterns on the web.  In this lesson, you will learn how to build the Stack primitive and how to make it configurable for your situation

How to Build a Stacked Component Layout in React

The layout challenge that is as old as the web itself is putting two items next to each other. In this lesson, you will learn how to build the Split primitive to solve this problem.

How to Build a Split Pane Layout in React

Having a column-based grid system to lay our elements out on is very useful, which is why Bootstrap and other CSS frameworks are built on that model.  In this lesson, you will learn how to build the Columns primitive and its helper the Column to build your custom column layout.

How to Build React Grid Layouts With Custom Column Numbers

Building an inherently responsive grid of items has been reduced down into a single line of CSS.  In this lesson, you will learn how to build the Grid primitive that easily lets us achieve this layout.

How to Build a React Responsive Grid Layout

Text in a paragraph is one of the best examples of "responsive by default."  Text will wrap and cluster according to the text alignment.  In this lesson, we will learn how to achieve that same effect using the InlineCluster primitive.

How to Build Responsive React Text Elements With InlineCluster

Clustering is one way to do responsive inline layouts, but sometimes we want to switch the direction that the items are flowing when we cross a certain threshold.  In this lesson, we will learn how to build the Inline primitive that does just that.

How to Add Inline Styling to React Components

Layout Primitives - The Spacers

Introduction to layout wrapper primitives

Introduction to Layout Wrapper Primitives

In this lesson, you will learn how to build the PadBox primitive and use it in a Pricing Plan component.

How to Build a Pricing Page Widget in React With PadBox

In this lesson, we will be creating a Center layout primitive that centers itself and its children.

Automatically Center Text DIVs with React Center Component

In this lesson, we will build the Frame primitive, which frames out a visual media, like an image or video,  and forces it into the aspect ratio needed for the design without distorting the image.

Resize Images And Maintain Aspect Ratio in React and CSS

In this lesson, we will learn how to build the Cover primitive, which will vertically center its children and allow you to inject a top or a bottom section around it.

How to Vertically Center a DIV in React With CSS

Let's revisit the Hero section from Module 1 and build it for real using the primitives we have learned.

How to Build Accessible Navigation Divs in React

Layout Primitives - The Wrappers

Introduction to The Settings Pages

This lesson is going to focus on getting the menu and header completed on our mock Settings Page

How to Build a React Navbar With a Menu and Header

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

How to Build a React Sidebar Menu

In this lesson, we will be focusing on the profile pane.

How to Build a Profile Settings Page in React

In this lesson, we will be finishing the Settings page by completing the privacy pane.

How to Build a Privacy Page with Toggle Buttons in React

Composing Layouts in Practice

Bonus Lessons Introduction

In this lesson, you will learn how to build the ColumnDrop primitive and use it to layout BlogPost cards.

The ColumnDrop Component

The Reel Component

Bonus Lessons

CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

What it means to compose layouts and why you should do it

How to apply the principles of Encapsualted CSS in our React components

The foundational layout primitives that every developer should know

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

To make things easier, let's move our menu into a separate file called 

 and import that in as a separate component. Now our 

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.

<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.)

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 

 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);
`;

. Then we are using a linear gradient. There is really 

 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

 component, we are setting the direction to go from top to bottom with the top 

 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>

, but it would look best if the rest of the page had that 

 color as well. The easiest way to achieve this is to set that color in our 

body {
  font-family: sans-serif;
  background: whitesmoke;
}

---
title: How to Build a React Sidebar Menu
slug: main-and-sidebar
description: This lesson will focus on getting the main section with the sidebar navigation for our Settings page.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/s7xbvl6zgf
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_05/lesson_02
---

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

![Main and Sidebar mock](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.02/public/assets/main-sidebar.png)

We will pick up where we left off in [the last lesson over at codesandbox.io](https://codesandbox.io/s/the-menu-and-header-9ipu3?from-embed).

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

```jsx
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

```jsx
<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:

![Stubbed out main](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.02/public/assets/stubbed-out-main.png)

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:

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()#gradient_with_multi-position_color_stops). In our `ContentArea` component, we are setting the direction to go from top to bottom with the top `14rem`s 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:

```jsx
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:

```jsx
<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:

![padded content area](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.02/public/assets/padded-area.png)

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:

Travis Waith-Mair

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.

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.

We're just doing that just to make it easier to work with, not necessarily

I'm recommending that you do or something that I would do on a regular basis.

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.

And we'll go to the source here and we're going to click on new file.

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.

And then we can go back to our app and just simplify it down to just this.

So the next thing we need to do is let's go ahead and just start writing the

So below the header we're going to put a main.

Now this is going to be this whole section right here.

And let's put in there this is going to be the sidebar.

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.

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.

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

And we're going to call this our content area.

But to make this work we're going to need to import styled from style

And we're going to need to import the pad box from Bedrock layout pad box.

So simply just we're wrapping our pad box in a styled we're using the adders

to preset the padding all around as extra large.

And then we're using a linear gradient now oftentimes we think of a linear

slowly merging from one color to to the next and it just makes incremental

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

And there's a link to it in the notes below.

But what this is doing is we're going from top to bottom.

And the first 14 rams is going to be the black color.

And then the rest is going to be white smoke.

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

Now what I went ahead and did here is I I pre added this into our styles is I

The reason is if we don't have that in there you're going to see this the color

to stop right where our content ends and then it creates this kind of weird

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

So let's go ahead and add some extra components in here.

First of all we're creating a settings header.

And we're going to replace our regular header with that.

And it just gives the font color of white.

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

Now we're going to step away from the mock up here and just kind of infer what

And that is it's implied that this settings area.

It's implied that this settings area doesn't grow beyond that.

It doesn't say that it's just an image but it's something we can infer from

And to do that let's go ahead and add our center component.

Because what our center component does is it wraps what we need and it will

as we want it to but it will cap out as a certain width and it will continue to

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.

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

and growing and then once we hit 85 rems it just centers itself.

Now the other thing we need here is we have the stack look here that we're

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

And since the center component is already wrapping our header and our settings

Let's just use our center as a stack and then give it a getter of extra art.

We've now got the header style just how we want.