Skip to main content

8.27 Adding Toolbar

Corrected Folder Structure​

caution

I corrected the mistake (see lesson 8.9). And moved the BurgerBuilder folder to the containers folder. All works fine yet.

src/
│
├── assets/
│
├── components/
│     ├── Layout/
│     │      ├── Layout.js
│     │      └── Layout.module.css
│     ├── Burger/
│     │      ├── BuildControls/
│     │      │        ├── BuildControl/
│     │      │        │        ├── BuildControl.js
│     │      │        │        └── BuildControl.module.css
│     │      │        ├── BuildControls.js
│     │      │        └── BuildControls.module.css
│     │      ├── BurgerIngredients/
│     │      │        ├── BurgerIngredients.js
│     │      │        └── BurgerIngredients.module.css
│     │      └── OrderSummary/
│     │               └── OrderSummary.js
│     │      └── Navigation/
│     │               └── Toolbar/
│     │                      ├── Toolbar.js
│     │                      └── Toolbar.module.css
│     └── UI/
│         ├── Backdrop/
│         │      ├── Backdrop.js
│         │      └── Backdrop.module.css
│         ├── Button/
│         │      ├── Button.js
│         │      └── Button.module.css
│         └── Modal/
│                ├── Modal.js
│                └── Modal.module.css
│
├── containers/
│       └── BurgerBuilder/
│                └── BurgerBuilder.js
├── App.js
├── App.test.js
├── index.js
├── index.css
│

New Toolbar.js​

Toolbar.js
import React from "react";
import classes from "./Toolbar.module.css";

const toolbar = (props) => (
  <header className={classes.Toolbar}>
    <div>MENU</div>
    <div>LOGO</div>
    <nav>
      <ul>...</ul>
    </nav>
  </header>
);

export default toolbar;

New Toolbar.module.css​

Toolbar.module.css
.Toolbar {
  height: 56px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #703b09;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 90;
}

.Toolbar nav {
  height: 100%;
}

Layout.js​

Layout.js
import React, { Fragment } from "react";
import Toolbar from "../Navigation/Tollbar/Toolbar";
import classes from "./Layout.module.css";

const layout = (props) => (
  <Fragment>
    <Toolbar />
    <main className={classes.Content}>{props.children}</main>
  </Fragment>
);
export default layout;

Layout.module.css​

Layout.module.css
.Content {
  margin-top: 72px;
}