66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import React, { Component } from "react";
|
|
|
|
class Header extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
menuOpened: false,
|
|
activeLink: ""
|
|
};
|
|
}
|
|
|
|
toggleMenu = () => {
|
|
this.setState({
|
|
menuOpened: !this.state.menuOpened
|
|
});
|
|
};
|
|
|
|
selected = (text) => {
|
|
this.toggleMenu();
|
|
this.setState({
|
|
activeLink: text
|
|
})
|
|
}
|
|
render() {
|
|
const {menuOpened, activeLink} = this.state;
|
|
return (
|
|
<header>
|
|
<div className="container">
|
|
<a href="#" className="logo">
|
|
<img
|
|
src="/assets/images/logo.svg"
|
|
alt=""
|
|
width="217px"
|
|
height="32px"
|
|
/>
|
|
</a>
|
|
<div className="header_menu">
|
|
<nav>
|
|
<button className="nav_toggle" onClick={() => this.toggleMenu()}>
|
|
{activeLink}
|
|
</button>
|
|
<ul id="menu_list" className={menuOpened ? "open" : ""}>
|
|
<li>
|
|
<a href="/" onClick={() => this.selected("Договор")}>Договор</a>
|
|
</li>
|
|
<li>
|
|
<a href="/schedule" onClick={() => this.selected("Взаиморасчеты и закрывающие документы")}>Взаиморасчеты и закрывающие документы</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" onClick={() => this.selected("Настройки")}>Настройки</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" onClick={() => this.toggleMenu()}>Основной сайт</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<a href="tel:+74950000000">+7 495 000 00 00</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Header;
|