Face_Classify_frontend/app/src/components/layouts/MenuBar.js

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import $ from 'jquery';
import Store from '../../store';

class MenuBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            type: '',
            dataRole: Store.getState().role.role,

        }
        Store.subscribe(() => {
            this.setState({
                isLogin: Store.getState().isLogin.isLogin,
                dataRole: Store.getState().role.role,
            }, () => {

            });
        });


    }


    onClickClose = () => {
        $('#m_aside_left').removeClass('m-aside-left--on')
        $('#body_form').removeClass('m-aside-left--on')
        $('#m_aside_left_toggle').removeClass('m-aside-left-toggler--active')
        $('.m-aside-left-overlay').remove()
    }

    render() {
        var active = '';

        console.log(this.state.dataRole)

        return (
            <div id="m_aside_left" className="m-aside-left  m-aside-left--skin-dark">
                {/* BEGIN: Aside Menu */}
                <div id="m_ver_menu" className="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark " data-menu-vertical="true" m-menu-scrollable={1} m-menu-dropdown-timeout={500}>
                    <ul className="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
                        <li className="m-menu__section m-menu__section--first">
                            {/* <h4 className="m-menu__section-text">Departments</h4> */}
                            <i className="m-menu__section-icon flaticon-more-v3" />
                        </li>
                        {this.state.dataRole?.indexOf('search:view') !== -1 ?
                            <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
                                <NavLink to="/search-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
                                    <i className="m-menu__link-icon flaticon-search-1" />
                                    <span className="m-menu__link-title">
                                        <span className="m-menu__link-wrap">
                                            <span className="m-menu__link-text">Tìm kiếm</span>
                                        </span>
                                    </span>
                                </NavLink>
                            </li>
                            : ""}

                        {this.state.dataRole?.indexOf('import:view') !== -1 ?
                            <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
                                <NavLink to="/import-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
                                    <i className="m-menu__link-icon flaticon-tabs" />
                                    <span className="m-menu__link-title">
                                        <span className="m-menu__link-wrap">
                                            <span className="m-menu__link-text">Kho ảnh</span>
                                        </span>
                                    </span>
                                </NavLink>
                            </li>
                            : ""}

                        {this.state.dataRole?.indexOf('famous:view') !== -1 ?
                            <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
                                <NavLink to="/list-famous" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
                                    <i className="m-menu__link-icon flaticon-avatar" />
                                    <span className="m-menu__link-title">
                                        <span className="m-menu__link-wrap">
                                            <span className="m-menu__link-text">Người nổi tiếng</span>
                                        </span>
                                    </span>
                                </NavLink>
                            </li>
                            : ""}

                        {this.state.dataRole?.indexOf('person:view') !== -1 ?
                            <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
                                <NavLink to="/label-image" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
                                    <i className="m-menu__link-icon flaticon-delete" />
                                    <span className="m-menu__link-title">
                                        <span className="m-menu__link-wrap">
                                            <span className="m-menu__link-text">Gán nhãn</span>
                                        </span>
                                    </span>
                                </NavLink>
                            </li>
                            : ""}

                        {this.state.dataRole?.indexOf('user:view') !== -1 ?
                            <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
                                <NavLink to="/user" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
                                    <i className="m-menu__link-icon flaticon-users" />
                                    <span className="m-menu__link-title">
                                        <span className="m-menu__link-wrap">
                                            <span className="m-menu__link-text">Quản lý người dùng</span>
                                        </span>
                                    </span>
                                </NavLink>
                            </li>
                            : ""}

                        {this.state.dataRole?.indexOf('level:view') !== -1 ?
                            <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
                                <NavLink to="/role" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
                                    <i className="m-menu__link-icon flaticon-map" />
                                    <span className="m-menu__link-title">
                                        <span className="m-menu__link-wrap">
                                            <span className="m-menu__link-text">Thiết lập quyền</span>
                                        </span>
                                    </span>
                                </NavLink>
                            </li>
                            : ""}

                    {this.state.dataRole?.indexOf('level:view') !== -1 ?
                        <li className="m-menu__item  m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
                            <NavLink to="/test" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
                                <i className="m-menu__link-icon flaticon-edit" />
                                <span className="m-menu__link-title">
                                    <span className="m-menu__link-wrap">
                                        <span className="m-menu__link-text">Độ chính xác</span>
                                    </span>
                                </span>
                            </NavLink>
                        </li>
                           : ""}
                    </ul>
                </div>
                {/* END: Aside Menu */}
            </div>
        );
    }
}


export default MenuBar;