React Custom Built Navbar

У меня есть настраиваемое меню навигации, которое я хочу использовать для веб-сайта в ответ, который я создаю, я хочу, чтобы навигационные ссылки перемещались при нажатии на меню навигации.

Есть несколько частей, которые я автоматически считаю неправильными, например, где я передаю реквизит.

Примечание. Я использую стилизованные компоненты в этом проекте, поэтому все, что имеет стиль в названии, связано со стилизованными компонентами, также основная причина, по которой я хочу, чтобы компоненты были разделены с помощью navItem, заключается в том, чтобы я мог управлять ими по-разному с помощью CSS.

Я подумал, что было бы лучше связать все файлы, с которыми я работаю, начиная с Navlink: -

import React, { Component } from "react";
import NavItemStyle from "./NavItemStyle";

class NavItem extends Component {
  render() {
    return (
      <NavItemStyle>
        <ul onClick = {this.props.click}>
          <li value = {this.props.nav}>
          </li>
          <li value = {this.props.children}>
          </li>
        </ul>
      </NavItemStyle>
    );
  }
}
export default NavItem;

Это раздел NavItems, я предполагаю, что это совершенно неверно.

import React, { Component } from "react";
import NavItem from './NavItem/NavItem';

class NavItems extends Component {

  render() {

    return this.props.navlists.map((navItem) => {
      return <NavItem
          click = {() => this.props.clicked}
        />
    });
  }
}
export default NavItems;

Это основной компонент навигации, который будет связан в приложении.

import React, {Component} from "react";
import NavMenu from "./NavMenu/NavMenu";
import NavItem from './NavLists/NavItem/NavItem';
import NavStyle from './NavStyle';

class Navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showMenu: false
    }
  }

  handleClick() {
    this.setState({showMenu: !this.state.showMenu})
  }
  render() {


  return (
    <NavStyle>
      <NavMenu/>
      {/*Nav items Display Home and Things to do.*/}
      <NavItem />
      <NavItem />
    </NavStyle>
  );
}
}


export default Navigation;

Также, чтобы сохранить вставку множества строк кода, я поместил NavMenu (Burger) в корзину для вставки здесь: - https://pastebin.com/T671GBjF

Я надеюсь, что конечный результат - это когда бургер будет нажат, и появятся ссылки на страницу.