104 lines
3.0 KiB
JavaScript
104 lines
3.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import {
|
|
Collapse,
|
|
Navbar,
|
|
NavbarToggler,
|
|
NavbarBrand,
|
|
Nav,
|
|
NavItem,
|
|
NavLink,
|
|
UncontrolledDropdown,
|
|
DropdownToggle,
|
|
DropdownMenu,
|
|
DropdownItem } from 'reactstrap';
|
|
|
|
// https://stackoverflow.com/questions/42372179/reactstrap-and-react-router-4-0-0-beta-6-active-navlink
|
|
import { NavLink as RRNavLink } from 'react-router-dom';
|
|
|
|
import { isLoaded } from '../util/loadingObject'
|
|
|
|
/* A helper component to render an array of dropdowns
|
|
* inside a <Nav> element
|
|
*/
|
|
const DropDowns = (props) => {
|
|
const user = props.user
|
|
const isAdmin = Boolean(Number(user.admin))
|
|
|
|
return (<div>
|
|
{props.dropdowns.map((dropdown, index) =>
|
|
(!(dropdown.onlyifauthenticated || dropdown.onlyifadmin)
|
|
|| (isLoaded(user) &&
|
|
(
|
|
(dropdown.onlyifauthenticated && !dropdown.onlyifadmin)
|
|
|| (dropdown.onlyifadmin && isAdmin)
|
|
)
|
|
)
|
|
) &&
|
|
<UncontrolledDropdown nav inNavbar key={index}>
|
|
<DropdownToggle nav caret>
|
|
{dropdown.label}
|
|
</DropdownToggle>
|
|
<DropdownMenu right>
|
|
{dropdown.entries.map((item) =>
|
|
<DropdownItem key={item.path}>
|
|
<NavLink to={item.path} key={item.path} activeClassName="active" tag={RRNavLink}>
|
|
{item.label}
|
|
</NavLink>
|
|
</DropdownItem>
|
|
)}
|
|
</DropdownMenu>
|
|
</UncontrolledDropdown>
|
|
)}</div>)
|
|
}
|
|
|
|
/**
|
|
* Navigation bar component
|
|
*/
|
|
const NavBar = (props) => {
|
|
let [isOpen, setOpen] = useState(false);
|
|
|
|
const menus = props.menus
|
|
const user = props.user
|
|
const toggle = () => { setOpen(!isOpen); }
|
|
|
|
return (
|
|
<div>
|
|
<Navbar color="light" light expand="md">
|
|
<NavbarToggler onClick={toggle} />
|
|
<NavbarBrand to="/">{props.branding}</NavbarBrand>
|
|
<Collapse isOpen={isOpen} navbar>
|
|
<Nav className="mr-auto" navbar>
|
|
{menus.topbar.map((item) =>
|
|
<NavItem key={item.path}>
|
|
<NavLink to={item.path} activeClassName="active" tag={RRNavLink}>
|
|
{item.label}
|
|
</NavLink>
|
|
</NavItem>
|
|
)}
|
|
{menus.leftdropdowns &&
|
|
<DropDowns className="mr-auto" dropdowns={menus.leftdropdowns} user={user} />
|
|
}
|
|
</Nav>
|
|
<Nav className="ml-auto">
|
|
{menus.rightdropdowns &&
|
|
<DropDowns className="ml-auto" dropdowns={menus.rightdropdowns} user={user} />
|
|
}
|
|
|
|
{isLoaded(user) ?
|
|
<NavItem>
|
|
<NavLink activeClassName="active" tag={RRNavLink} to={props.logoutUrl}>Logout ({user.sub})</NavLink>
|
|
</NavItem>
|
|
:
|
|
<NavItem>
|
|
<NavLink activeClassName="active" tag={RRNavLink} to={props.loginUrl}>Login</NavLink>
|
|
</NavItem>
|
|
}
|
|
</Nav>
|
|
</Collapse>
|
|
</Navbar>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default NavBar;
|