将下拉菜单添加到react-js

Question

我没有足够的空间来添加更多页面，因此我决定在my website中实现一个下拉菜单。我是JS的新手，我不想搞砸响应能力。我使用的是基于React-js的this react template。

有没有简单的方法可以做到这一点？预先谢谢你。

我正在附加/src/components/header/Header.js中的代码

import React , { Component }from "react";
import "./Header.css";
import { Fade } from "react-reveal";
import { NavLink, Link } from "react-router-dom";
import {greeting, settings} from '../../portfolio.js';

const onMouseEnter = (event, color) => {
    const el = event.target;
    el.style.backgroundColor = color;
}

const onMouseOut = (event) => {
    const el = event.target;
    el.style.backgroundColor = "transparent";
}

class Header extends Component {

    render(){
    const theme = this.props.theme;
    console.log(theme);
    const link = settings.isSplash ? '/splash' : 'home';
  return (
        <Fade top duration={1000} distance="20px">
            <div>
                <header className="header">
                    <NavLink to={link} tag={Link} className="logo">
                        <span style={{ color: theme.text}}> &lt;</span>
                        <span className="logo-name" style={{ color: theme.text}}>
                            {greeting.logo_name}
                        </span>
                        <span style={{ color: theme.text }}>/&gt;</span>
                    </NavLink>
                    <input className="menu-btn" type="checkbox" id="menu-btn" />
                    <label className="menu-icon" htmlFor="menu-btn">
                        <span
                            className="navicon"
                            
                        ></span>
                    </label>
                    <ul className="menu" style={{ backgroundColor: theme.body }}>
                        <li>
                            <NavLink
                                to="/datascience"
                                tag={Link}
                                activeStyle={{ fontWeight: "bold" }}
                                style={{ color: theme.text }}
                                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
                                onMouseOut={(event) => onMouseOut(event)}
                            >
                                Data Science
                            </NavLink>
                        </li>
                        {/*<li>
                            <NavLink
                                to="/home"
                                tag={Link}
                                activeStyle={{ fontWeight: "bold" }}
                                style={{ color: theme.text }}
                                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
                                onMouseOut={(event) => onMouseOut(event)}
                            >
                                Home
                            </NavLink>
                        </li>*/}
                        <li>
                            <NavLink
                                to="/education"
                                tag={Link}
                                activeStyle={{ fontWeight: "bold" }}
                                style={{ color: theme.text }}
                                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
                                onMouseOut={(event) => onMouseOut(event)}
                            >
                                Educação
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/experience"
                                tag={Link}
                                activeStyle={{ fontWeight: "bold" }}
                                style={{ color: theme.text }}
                                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
                                onMouseOut={(event) => onMouseOut(event)}
                            >
                                Experiência
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/projects"
                                tag={Link}
                                activeStyle={{ fontWeight: "bold" }}
                                style={{ color: theme.text }}
                                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
                                onMouseOut={(event) => onMouseOut(event)}
                            >
                                Música
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/photography"
                                tag={Link}
                                activeStyle={{ fontWeight: "bold" }}
                                style={{ color: theme.text }}
                                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
                                onMouseOut={(event) => onMouseOut(event)}
                            >
                                Fotografia
                            </NavLink>
                        </li>
                        <li>
                            <NavLink
                                to="/contact"
                                tag={Link}
                                activeStyle={{ fontWeight: "bold" }}
                                style={{ color: theme.text }}
                                onMouseEnter={(event) => onMouseEnter(event, theme.highlight)}
                                onMouseOut={(event) => onMouseOut(event)}
                            >
                                Contato
                            </NavLink>
                        </li>
                    </ul>
                </header>
            </div>
        </Fade>
    );
  }
}
export default Header;