Здравствуйте. На сайте есть боковое меню, которое выдвигается. Хочу создать ещё одно меню, но уже прикрепив его к правой стороне. Продублировать получилось, но оно не открывается, так как я не могу продублировать функции по раскрытию меню. Код приведу ниже.
/* @flow */
import React from "react";
import { compose, onlyUpdateForKeys } from "recompose";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import io from "socket.io-client";
import type { UserType } from "../user/types";
import { selectors as userSelectors } from "../user/logicBundle";
import { addModal } from "../modals/logicBundle";
import Header from "./Header";
import Navbar from "./Navbar";
import Navbarpravo from "./Navbarpravo";
import Stats from "./Stats";
import Footer from "./Footer";
import "./PageWrapStyle.scss";
const forceWindowResize = () => {
const event = document.createEvent("HTMLEvents");
event.initEvent("resize", true, false);
window.dispatchEvent(event);
};
export class PageWrap extends React.PureComponent {
state: {
isShowNavbar: boolean,
} = {
isShowNavbar: false,
};
// noinspection JSMethodCanBeStatic
componentDidMount() {
window.socket.online = io("/online", window.socket.opts);
}
props: {
// noinspection JSUnresolvedVariable
children: React$Element<*>,
user: UserType,
actions: Object,
};
openInventoryModal = () => {
this.props.actions.addModal({ type: "INVENTORY" });
};
openPaymentModal = () => {
this.props.actions.addModal({ type: "PAYMENT" });
};
toggleNavbar = () => {
this.setState({ isShowNavbar: !this.state.isShowNavbar });
const task = setInterval(forceWindowResize, 10);
setTimeout(() => clearInterval(task), 300);
};
render() {
const { children } = this.props;
const pageName = children && children.pageName ?
children.pageName : "";
return (
// $FlowFixMe
<div className={`page-wrap ${pageName} ${this.state.isShowNavbar ? "show-navbar" : ""}`.trim()}>
<Header
user={this.props.user}
openInventoryModal={this.openInventoryModal}
openPaymentModal={this.openPaymentModal}
/>
<Navbar toggleNavbar={this.toggleNavbar} />
<Navbarpravo toggleNavbarpravo={this.toggleNavbarpravo} />
<div className="content">
<div className="container">
<Stats />
{children}
<Footer />
</div>
</div>
</div>
);
}
}
export const enhance = compose(
connect(
state => ({
user: userSelectors.getUser(state),
}),
dispatch => ({
actions: bindActionCreators({
addModal,
}, dispatch),
})
),
onlyUpdateForKeys(["children", "user"])
);
export default enhance(PageWrap);
Вот этот кусок
export class PageWrap extends React.PureComponent {
state: {
isShowNavbar: boolean,
} = {
isShowNavbar: false,
};
который закрывается } в самом конце почти и вот ещё один кусок кода
toggleNavbar = () => {
this.setState({ isShowNavbar: !this.state.isShowNavbar });
const task = setInterval(forceWindowResize, 10);
setTimeout(() => clearInterval(task), 300);
};
отвечают эти два куска кода за раскрытие меню, просто продублировав выдаёт ошибку в консоли, даже скомпилировать не даёт.
Главное меню называется Navbar
Дублирую с именем Navbarpravo
Помогите.
Простой