Header

[Wanhenri]

I need create a Header for my project. In this header I need to pass:

• Home
• Profile*
• Product
• Vendor

*Maybe apresent data about Product and vendor

[Wanhenri]

I thought about using this library

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

and this code

import React, { Component } from "react";

class Dropdown extends Component {
  container = React.createRef();
  state = {
    open: false
  };
  handleButtonClick = () => {
    this.setState(state => {
      return {
        open: !state.open
      };
    });
  };
  handleClickOutside = event => {
    if (
      this.container.current &&
      !this.container.current.contains(event.target)
    ) {
      this.setState({
        open: false
      });
    }
  };
  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }
  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }
  render() {
    return (
      <div className="bs-component" ref={this.container}>
        <ul className="nav nav-tabs">
          <li className="nav-item">
            <a className="nav-link" data-toggle="tab" href="#home">
              Home
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link show" data-toggle="tab" href="#profile">
              Profile
            </a>
          </li>
          <li className="nav-item">
            <a className="nav-link disabled" href="#">
              Disabled
            </a>
          </li>
          <li className="nav-item dropdown">
            <a
              className="nav-link dropdown-toggle"
              onClick={this.handleButtonClick}
              href="#"
            >
              Product
            </a>
            <div
              className={
                this.state.open ? "dropdown-menu show" : "dropdown-menu"
              }
              x-placement="bottom-start"
            >
              <a className="dropdown-item" href="#">
                Add
              </a>
              <a className="dropdown-item" href="#">
                Delete
              </a>
              <a className="dropdown-item" href="#">
                t1
              </a>
              <div className="dropdown-divider" />
              <a className="dropdown-item" href="#">
                t1
              </a>
            </div>
          </li>
          <li className="nav-item dropdown">
            <a
              className="nav-link dropdown-toggle"
              onClick={this.handleButtonClick}
              href="#"
            >
              Vendor
            </a>
            <div
              className={
                this.state.open ? "dropdown-menu show" : "dropdown-menu"
              }
              x-placement="bottom-start"
            >
              <a className="dropdown-item" href="#">
                t3
              </a>
              <a className="dropdown-item" href="#">
                At5
              </a>
              <a className="dropdown-item" href="#">
                t6
              </a>
              <div className="dropdown-divider" />
              <a className="dropdown-item" href="#">
                t8
              </a>
            </div>
          </li>
        </ul>
      </div>
    );
  }
}

export default Dropdown;

[Wanhenri]

My application is very simple, so I will modify this code

[Wanhenri]

A simple component has been created for the Header.

• I used the knowledge of component reuse.

  import ButtonSimple from '../../object/ButtonSimple';

  In this button, I used:

  
  import React from "react";
  import Button from '@material-ui/core/Button';

export default ({ content }) => (

{content}

);

- I used the key / value knowledge
```js
const menusimple = [
    {
        id: 1, 
        name: "Home"
    },
    {
        id: 2,
        name:"Profile"
    }
  ];

• I used the key / value knowledge to apply the map function

  {menusimple.map((simple) => (
          <ButtonSimple key={simple.id_} content={simple.name} />
      ))}
      {menudropdown.map((drop) => (
      <>             
      <Button key={drop.id_} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
          {drop.name}
      </Button>
      <Menu
          key={drop.id_}
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={handleClose}
      >
          <MenuItem onClick={handleClose}>{drop.add}</MenuItem>
          <MenuItem onClick={handleClose}>{drop.search}</MenuItem>
          <MenuItem onClick={handleClose}>{drop.delet}</MenuItem>
      </Menu>

Complete code

import React from 'react';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

import ButtonSimple from '../../object/ButtonSimple';

export default function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const menusimple = [
    {
        id: 1, 
        name: "Home"
    },
    {
        id: 2,
        name:"Profile"
    }
  ];

  const menudropdown = [
    {
        id_: 1, 
        name:"Product", 
        add:"Add New Product",
        search:"Seach Product", 
        delet:"Delete product"
    },
    {
        id_: 2,
        name:"Vendor", 
        add:"Add New Product",
        search:"Seach Product", 
        delet:"Delete product"
    }
  ];

  return (
    <div>
        {menusimple.map((simple) => (
            <ButtonSimple key={simple.id_} content={simple.name} />
        ))}
        {menudropdown.map((drop) => (
        <>             
        <Button key={drop.id_} aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
            {drop.name}
        </Button>
        <Menu
            key={drop.id_}
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <MenuItem onClick={handleClose}>{drop.add}</MenuItem>
            <MenuItem onClick={handleClose}>{drop.search}</MenuItem>
            <MenuItem onClick={handleClose}>{drop.delet}</MenuItem>
        </Menu>
        </>
        ))} 
    </div>
  );
}