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