Closed Wanhenri closed 4 years ago
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;
My application is very simple, so I will modify this code
A simple component has been created for the Header.
import ButtonSimple from '../../object/ButtonSimple';
In this button, I used:
import React from "react";
import Button from '@material-ui/core/Button';
export default ({ content }) => (
);
- I used the key / value knowledge
```js
const menusimple = [
{
id: 1,
name: "Home"
},
{
id: 2,
name:"Profile"
}
];
{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>
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>
);
}
I need create a Header for my project. In this header I need to pass:
*Maybe apresent data about Product and vendor