54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface Link {
|
|
status: string;
|
|
text: string;
|
|
}
|
|
|
|
interface NavbarProps {
|
|
setStatus: any;
|
|
main: Link;
|
|
sub: Array<Link>;
|
|
}
|
|
|
|
/**
|
|
* @return {jsx} The root component
|
|
*/
|
|
export default function Navbar({setStatus, main, sub}: NavbarProps) {
|
|
return (
|
|
<React.Fragment>
|
|
<div className='navbar fixed-top
|
|
navbar-expand-lg navbar-light bg-light'>
|
|
<div
|
|
className='container'
|
|
id='navbar'>
|
|
<a
|
|
className='navbar-brand'
|
|
onClick={() => setStatus(main.status)}>{main.text}</a>
|
|
<button
|
|
className='navbar-toggler'
|
|
type='button'
|
|
data-toggle='collapse'
|
|
data-target='#mynavbar'
|
|
aria-controls='mynavbar'>
|
|
<span className='navbar-toggler-icon'></span>
|
|
</button>
|
|
<div className='collapse navbar-collapse' id='mynavbar'>
|
|
<ul className='navbar-nav mr-auto mb-0 pb-0'>
|
|
{sub.map((elem, index) =>
|
|
<li key={index} className='nav-item'>
|
|
<a
|
|
className='nav-link'
|
|
onClick={() => setStatus(elem.status)}>
|
|
{elem.text}
|
|
</a>
|
|
</li>)
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|