evoleasing-account/pages/components/Header/index.js

import React from "react";
import Link from "next/link";

import { logout } from "../../../actions";

export default class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpened: false,
    };
  }

  _handle_onToggleMenu = () => {
    this.setState({
      menuOpened: !this.state.menuOpened,
    });
  };

  _getActiveLink = (route) => {
    if (route === "/") return "Договоры";
    if (route.indexOf("/documents/") > -1)
      return "Взаиморасчеты и закрывающие документы";
    if (route.indexOf("/settings/") > -1) return "Настройки";
    if (route.indexOf("/contract") === 0) return "Договоры";

    return null;
  };

  _handle_onLogout = () => {
    logout({ dispatch: this.props.dispatch });
  };

  render() {
    const { menuOpened } = 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._handle_onToggleMenu}
              >
                {this.props.router &&
                  this._getActiveLink(this.props.router.route)}
              </button>
              <ul id="menu_list" className={menuOpened ? "open" : ""}>
                <li>
                  <Link href={`/`} shallow>
                    <a
                      className={
                        this.props.router &&
                        (this.props.router.route === "/" ||
                          this.props.router.route.indexOf("/contract") === 0)
                          ? "active"
                          : ""
                      }
                    >
                      Договоры
                    </a>
                  </Link>
                </li>
                <li>
                  <Link href={`/documents/calendar/`} shallow>
                    <a
                      className={
                        this.props.router &&
                        this.props.router.route.indexOf("/documents/") === 0
                          ? "active"
                          : ""
                      }
                    >
                      Взаиморасчеты и закрывающие документы
                    </a>
                  </Link>
                </li>
                <li>
                  <Link href="/settings/phone/" shallow>
                    <a
                      className={
                        this.props.router &&
                        this.props.router.route.indexOf("/settings/") === 0
                          ? "active"
                          : ""
                      }
                    >
                      Настройки
                    </a>
                  </Link>
                </li>
                <li>
                  <Link href={process.env.NEXT_PUBLIC_MAIN_SITE}>
                    <a>Обращения</a>
                  </Link>
                </li>
                {/* 
								<li>
									<Link href={ process.env.NEXT_PUBLIC_MAIN_SITE }>
										<a>Основной сайт</a>
									</Link>
								</li>
								*/}
              </ul>
            </nav>
          </div>

          <ul className="system_nav">
            <li>
              <Link href="">
                <a data-icon="phone">Телефон</a>
              </Link>
            </li>
            <li>
              <Link href="">
                <a data-icon="notify" data-notify="3">
                  Уведомления
                </a>
              </Link>

			  <div className="backdrop"> {/* для открытия opened */}
				<div className="modal">
					<ul className="list">
						<li className="new">
							<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
							<p className="date">10.01.2022</p>
							<p className="action">
								<Link href="">
									<a>Посмотрите порядок возврата СТС</a>
								</Link>
								&nbsp; или &nbsp;
								<Link href="">
									<a>Загрузите скан СТС</a>
								</Link>
							</p>
						</li>

						<li className="new">
							<p className="name"><b>Внимание! Просрочена дата возврата СТС по договору: ХХ.ХХ.ХХХХ</b></p>
							<p className="date">10.01.2022</p>
							<p className="action">
								<Link href="">
									<a>Посмотрите порядок возврата СТС</a>
								</Link>
								&nbsp; или &nbsp;
								<Link href="">
									<a>Загрузите скан СТС</a>
								</Link>
							</p>
						</li>

						<li className="new">
							<p className="name">Внимание! Осталось ХХ дней до пролонгации КАСКО по договору №ХХХХ: ХХ.ХХ.ХХХХ. Не забудьте самостоятельно продлить полис ОСАГО</p>
							<p className="date">10.01.2022</p>
							<p className="action">
								<Link href="">
									<a>Подробнее</a>
								</Link>
							</p>
						</li>
					</ul>
					<Link href="">
						<a className="all">Все события</a>
					</Link>
					<button className="close">Закрыть</button>
				</div>
			  </div>
            </li>
            <li>
              <Link href="">
                <a data-icon="message" data-notify="1">
                  Сообщения
                </a>
              </Link>
            </li>
            <li>
              <button
                className="lk"
                title="Выход"
                onClick={() => this._handle_onLogout()}
              ></button>
            </li>
          </ul>
        </div>
      </header>
    );
  }
}