Gecko [ gandhischool.edu.np ]

Name	Size	Permission	Action
Menu.tsx	9.48 KB	-rw-rw-r--

Code Editor : Menu.tsx

import * as React from 'react';
import { Dispatch, Action } from 'redux';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';
import { Link } from 'react-router-dom';

interface MenuProps {
    routes: any;
}

interface MenuState {}

class Menu extends React.Component<MenuProps, MenuState> {
    public constructor(props) {
        super(props);
        this.state = {};
    }

private getSubMenu = children => {
        return (
            children.length > 0 &&
            children.map((child, index) => {
                return (
                    <li className="dropdown" key={index + 1}>
                        {child.children ? (
                            <React.Fragment>
                                <a
                                    className="dropdown-item dropdown-toggle"
                                    href="#"
                                >
                                    {typeof child.icon !== 'string' ? (
                                        child.icon
                                    ) : (
                                        <i className={child.icon} />
                                    )}{' '}
                                    <span>{child.text} </span>
                                </a>
                                <ul className="dropdown-menu dropdown-menu-left">
                                    {child.children.map((subchild, index) => {
                                        return (
                                            <li key={index + 1}>
                                                <Link
                                                    className="dropdown-item"
                                                    to={subchild.link}
                                                >
                                                    {' '}
                                                    {typeof subchild.icon !==
                                                    'string' ? (
                                                        subchild.icon
                                                    ) : (
                                                        <i
                                                            className={
                                                                subchild.icon
                                                            }
                                                        />
                                                    )}{' '}
                                                    <span>
                                                        {subchild.text}{' '}
                                                    </span>
                                                </Link>
                                            </li>
                                        );
                                    })}
                                </ul>
                            </React.Fragment>
                        ) : (
                            <Link
                                key={index + 1}
                                className="dropdown-item"
                                to={child.link}
                            >
                                {' '}
                                {typeof child.icon !== 'string' ? (
                                    child.icon
                                ) : (
                                    <i className={child.icon} />
                                )}{' '}
                                <span>{child.text} </span>
                            </Link>
                        )}
                    </li>
                );
            })
        );
    };

public render() {
        const { routes } = this.props;
        return (
            <nav className="navbar navbar-expand-lg">
                <button
                    className="navbar-toggler"
                    type="button"
                    data-toggle="collapse"
                    data-target="#navbarNavAltMarkup"
                    aria-controls="navbarNavAltMarkup"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon">
                        <i
                            className="fa
                            fa-bars"
                        ></i>
                    </span>
                </button>
                <div
                    className="collapse navbar-collapse"
                    id="navbarNavAltMarkup"
                >
                    <div className="navbar-nav ml-auto mr-auto">
                        <ul className="navbar-nav mr-auto">
                            {routes &&
                                routes.map((item, index) => {
                                    return (
                                        <li
                                            key={index + 1}
                                            className={`nav-item ${
                                                item.children ? 'dropdown' : ''
                                            }`}
                                        >
                                            {item.children ? (
                                                <React.Fragment>
                                                    <a
                                                        className="nav-link dropdown-toggle"
                                                        href="#"
                                                        id="navbarDropdown"
                                                        role="button"
                                                        data-toggle="dropdown"
                                                        aria-haspopup="true"
                                                        aria-expanded="true"
                                                    >
                                                        {' '}
                                                        {typeof item.icon !==
                                                        'string' ? (
                                                            item.icon
                                                        ) : (
                                                            <i
                                                                className={
                                                                    item.icon
                                                                }
                                                            />
                                                        )}{' '}
                                                        <span>
                                                            {item.text}{' '}
                                                        </span>
                                                    </a>
                                                    <ul
                                                        className="dropdown-menu"
                                                        aria-labelledby="navbarDropdown"
                                                    >
                                                        {this.getSubMenu(
                                                            item.children,
                                                        )}
                                                    </ul>
                                                </React.Fragment>
                                            ) : (
                                                <Link
                                                    className={`nav-link ${
                                                        item.link ==
                                                        window.location.pathname
                                                            ? 'active'
                                                            : ''
                                                    }`}
                                                    to={item.link}
                                                >
                                                    {' '}
                                                    {typeof item.icon !==
                                                    'string' ? (
                                                        item.icon
                                                    ) : (
                                                        <i
                                                            className={
                                                                item.icon
                                                            }
                                                        />
                                                    )}{' '}
                                                    <span>{item.text} </span>
                                                </Link>
                                            )}
                                        </li>
                                    );
                                })}
                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}

const mapStateToProps = state => ({
    user: state.auth.user,
});

const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
    push: (path: string) => {
        dispatch(push(path));
    },
});

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(Menu);

${this.title}

Code Editor : Menu.tsx