Hamburger Menu

[TurtleWolf1]

Trying to make a responsive hamburger menu in my NavBar component…
I’ve added BootStrap

npm i bootstrap

and still debating on if I should also add react-bootstrap

npm i react-bootstrap

it seems to come with its own jquery, but it doesn’t mention popperjs
So I’m guessing I’d comment out the jquery CDN at the bottom of the page and not the popper CDN?
I’ve also read another tutorial that suggests using styled-components,

npm i styled-components

but that’s starting to feel like overkill and bloat…
Where I really started getting confused is on the examples of bootstrap classes. It looks like I add navbar-expand-md as a className on the whole navbar and then collapse navbar-collapse on the list of links I want to collapse… but copying the sample code block never seem to give me the hamburger icon to click on. So I rolled back my commits and trying to document the process better. So what classNames should I be focussed on and which packages may be conflicting?

live Demo fccTemplate
gitHub repo

NavBar.JS

// rafc
// React Arrow Function Component
import React from 'react';
import PropTypes from 'prop-types';
import './NavBar.css';
import { Link } from "react-router-dom";
const NavBar = ({ icon, iconFCC, title }) => {
  return (
    <nav className='navbar bg-primary'>
      <a
        className="App-link"
        href="https://github.com/TurtleWolfe/fccTempLate"
        target="_blank"
        rel="noopener noreferrer"
        title="TempLate Scaffolding for Free Code Camp Projects, with FontAwesome, React-Router & Analytics"
      >
        <h1>
          <i className={iconFCC} /> {title} <i className={icon} />
        </h1>
      </a>
      <Link to='/'>Home</Link>
      {/* <Link to='/about'>About</Link> */}
      <Link to='/quote'>quote</Link>
      <Link to='/markdown'>markdown</Link>
      <Link to='/calculator'>calculator</Link>
      <Link to='/drum'>drum</Link>
      <Link to='/pomodoro'>pomodoro</Link>
      <Link to='/about'>About</Link>
    </nav>
  );
};

NavBar.defaultProps = {
  title: 'fccTempLate',
  icon: 'fab fa-github',
  iconFCC: 'fab fa-free-code-camp'
};

NavBar.propTypes = {
  title: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  iconFCC: PropTypes.string.isRequired
};

export default NavBar;

update… I’ve sort of fixed one problem but exposed 4 more.
(I was trying to update my previous post and accidently deleted it instead, but maybe by combing the two I have better documentation on how I got to where I’m currently at…)

1. • I got the button to show up by hacking the .css to just be a different color, but I’d like to change the 3 bars not the background color. I assumed that might be color or text color, but no change yet.
2. • I don’t understand why it’s appending the local urlin front of the link I’m trying to point to the repo
3. • I don’t know how to put the active class on the current page
4. • and it seems like the menu should close up after I’ve picked a route

[TurtleWolf1]

further research and reading up on this tutorial has convinced me to bypass jquery and popper and go straight for BootStrap-React

https://www.educative.io/blog/react-bootstrap-tutorial

Insertion to Virtual DOM

React Bootstrap was introduced to allow Bootstrap components to be inserted to the Virtual DOM. These components are actual React Components, so there is no need to use jQuery or Popper.js to manipulate the DOM.