angrybeanie-front-end/components/navbar.js

import React, { useState } from 'react';
import Link from 'next/link';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
NavbarText,
UncontrolledDropdown
} from 'reactstrap';
import PropTypes from 'prop-types'

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

  return (
    <div>
      <Navbar color="light" light expand="md">
        <NavItem>
          <NavLink href="/">Home</NavLink>
        </NavItem>
        <UncontrolledDropdown>
          <DropdownToggle caret>
            Podcasts
            </DropdownToggle>
          <DropdownMenu>
            <DropdownItem><Link href="/podcasts/current">Current Podcasts</Link></DropdownItem>
            <DropdownItem><Link href="/podcasts/archived">Archived Podcasts</Link></DropdownItem>
          </DropdownMenu>
        </UncontrolledDropdown>
        <NavItem>
          <NavLink href="/news">News and such</NavLink>
        </NavItem>
        {props.sections.sections.sections.map((section) => (                    
          <UncontrolledDropdown>
            <DropdownToggle caret>
            {section.title}
            </DropdownToggle>
            <DropdownMenu>
              {section.pages.map((page) => (
                <DropdownItem><Link href={page.page_slug}>{page.page_title}</Link></DropdownItem>
              ))}
            </DropdownMenu>       
          </UncontrolledDropdown>
        ))}
      </Navbar>
    </div>
  );
}

Dropdown.propTypes = {
  a11y: PropTypes.bool, // defaults to true. Set to false to enable more bootstrap like tabbing behavior
  disabled: PropTypes.bool,
  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
  group: PropTypes.bool,
  isOpen: PropTypes.bool,
  // For Dropdown usage inside a Nav
  nav: PropTypes.bool,
  active: PropTypes.bool,
  // For Dropdown usage inside a Navbar (disables popper)
  inNavbar: PropTypes.bool,
  tag: PropTypes.string, // default: 'div' unless nav=true, then 'li'
  toggle: PropTypes.func,
  setActiveFromChild: PropTypes.bool
};

DropdownToggle.propTypes = {
  caret: PropTypes.bool,
  color: PropTypes.string,
  className: PropTypes.string,
  disabled: PropTypes.bool,
  onClick: PropTypes.func,
  'data-toggle': PropTypes.string,
  'aria-haspopup': PropTypes.bool,
  // For DropdownToggle usage inside a Nav
  nav: PropTypes.bool,
  // Defaults to Button component
  tag: PropTypes.any
};

DropdownMenu.propTypes = {
  tag: PropTypes.string,
  children: PropTypes.node.isRequired,
  right: PropTypes.bool,
  flip: PropTypes.bool, // default: true,
  className: PropTypes.string,
  cssModule: PropTypes.object,
  // Custom modifiers that are passed to DropdownMenu.js, see https://popper.js.org/popper-documentation.html#modifiers
  modifiers: PropTypes.object,
  persist: PropTypes.bool, // presist the popper, even when closed. See #779 for reasoning
  // passed to popper, see https://popper.js.org/popper-documentation.html#Popper.Defaults.positionFixed
  positionFixed: PropTypes.bool
};

DropdownItem.propTypes = {
  children: PropTypes.node,
  active: PropTypes.bool,
  disabled: PropTypes.bool,
  divider: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  header: PropTypes.bool,
  onClick: PropTypes.func,
  className: PropTypes.string,
  cssModule: PropTypes.object,
  toggle: PropTypes.bool, // default: true
  text: PropTypes.bool
};
export default NavBar