34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { useState } from 'preact/hooks'
|
|
import { NavLink } from 'react-router-dom'
|
|
|
|
function Navbar() {
|
|
const [ show, setShow ] = useState(false);
|
|
|
|
const handleNavClick = () : void => {
|
|
setShow(false)
|
|
}
|
|
|
|
return (
|
|
<nav class="navbar navbar-expand-sm bg-body-tertiary">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Math Practice</a>
|
|
<button class="navbar-toggler" type="button" onClick={()=>setShow(!show)} aria-expanded={show} aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className={`collapse navbar-collapse ${show ? "show" : ""}`} id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<NavLink to="/gcf" title="Greatest Common Factor" onClick={handleNavClick} className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>GCF</NavLink>
|
|
</li>
|
|
<li class="nav-item">
|
|
<NavLink to="/lcm" title="Least Common Multiple" onClick={handleNavClick} className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>LCM</NavLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar;
|