angrybeanie-front-end/components/navbar.js

import React, { useState } from 'react';
import Link from 'next/link';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavLink from 'react-bootstrap/NavLink';
import NavItem from 'react-bootstrap/NavItem';
import NavDropdown from 'react-bootstrap/NavDropdown';

const NavBar = (props, sections) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(prevState => !prevState);

  return (
    <Navbar expand="lg" collapseOnSelect bg="light" variant="light">
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse>
        <Nav className="m-auto">
          <NavLink href="/">Home</NavLink>
        </Nav>
        <NavItem className="m-auto">
          <NavLink href="/news">News and such</NavLink>
        </NavItem>
        <NavItem className="m-auto">
          <NavLink href="/tech-and-disability">Tech and Disability</NavLink>
        </NavItem>
        </Navbar.Collapse>
      </Navbar>
    
  );
}

export default NavBar