8.28 Using Logo

New Logo.js

Logo.js

import React from "react";
import burgerLogo from "../../assets/images/burger-logo.png";
import classes from "./Logo.module.css";

const logo = (props) => (
  <div className={classes.Logo}>
    <img src={burgerLogo} alt="Burger Logo" />
  </div>
);

export default logo;

New Logo.module.css

Logo.module.css

.Logo {
  background-color: #fff;
  padding: 8px;
  height: 80%;
  box-sizing: border-box;
  border-radius: 5px;
}

.Logo img {
  height: 100%;
}

Toolbar.js

Toolbar.js

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

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

export default toolbar;