116 lines
No EOL
3.4 KiB
JavaScript
116 lines
No EOL
3.4 KiB
JavaScript
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 |