Jim's
Tutorials

made a navbar dropdown menu today. interesting to read a definition of this thing in material ui;

A Menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

here is where the navbar is rendered and I made the file 'project page" and you can see it here:

import  React from 'react';
import { Link } from 'react-router-dom';
import  Projectpage from './Projectpage.js';


const  NavBar = props => {
    return(
        <div>

        <div className="navbar">

        <Projectpage />
        <Link to = '/about'>ABOUT</Link>
        <Link to = '/contact'>CONTACT</Link>
        <Link to ='/'>HOME</Link>
        </div>
        <div className="content">
        <h1 className="page-title"></h1>
        {props.children}
        </div>
        </div>
    )
}

export default NavBar;

and here is projectpage;

import React, { Component } from 'react';

class Projectpage extends Component {
  constructor() {
    super();

    this.state = {
      showMenu: false,
    };

    this.showMenu = this.showMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  showMenu(event) {
    event.preventDefault();

    this.setState({ showMenu: true }, () => {
      document.addEventListener('click', this.closeMenu);
    });
  }

  closeMenu(event) {

    if (!this.dropdownMenu.contains(event.target)) {

      this.setState({ showMenu: false }, () => {
        document.removeEventListener('click', this.closeMenu);
      });

    }
  }

  render() {
    return (
      <div>
        <button onClick={this.showMenu}>
          Projects
        </button>

        {
          this.state.showMenu
            ? (
              <div
                className="menu"
                ref={(element) => {
                  this.dropdownMenu = element;
                }}
              >
                <button> Circus </button>
                <button> other project </button>
                <button> last project </button>
              </div>
            )
            : (
              null
            )
        }
      </div>
    );
  }
}

export default Projectpage;

I named it projectpage because it takes you to one of several projectpages, and it's going to be a dropdown. For now it looks like PICTURE 1 and PICTURE 2. I got the sourcecode from this medium article. I might look at this material ui component to check out adding a fade to how it opens. I thought about using this version of a bootstrap navbar but it seemed too fancy? I don't know, since the dropdown I need is really simple I thought I'd just go with something as basic as possible.