david/gcf-practice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix collapsing navbar

Browse Source
This commit is contained in:
David Baer
2024-03-02 20:40:20 -05:00
parent 47a24df21b
commit ea437052bc
2 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/gcf.tsx
View File

@@ -64,7 +64,7 @@ export function GCF() {
const r = Math.random() const r = Math.random()
var i = 0, accum = 0 var i = 0, accum = 0
for (i = 0; i < probabilities.length; i++) { for (i = 0; i < probabilities.length; i++) {
console.log([r, i, accum, probabilities[i]]) //console.log([r, i, accum, probabilities[i]])
if ((r > accum) && (r <= accum + probabilities[i][0])) break if ((r > accum) && (r <= accum + probabilities[i][0])) break
accum += probabilities[i][0] accum += probabilities[i][0]
} }

43
src/navbar.tsx
View File

@@ -1,24 +1,33 @@
import Container from 'react-bootstrap/Container'; import { useState } from 'preact/hooks'
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom'
import Nav from 'react-bootstrap/Nav';
//import NavItem from 'react-bootstrap/NavItem'
import RBNavbar from 'react-bootstrap/Navbar';
//import NavDropdown from 'react-bootstrap/NavDropdown';
function Navbar() { function Navbar() {
const [ show, setShow ] = useState(false);
const handleNavClick = () : void => {
setShow(false)
}
return ( return (
<RBNavbar expand="lg" className="bg-body-tertiary" sticky="top"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
<Container> <div class="container-fluid">
<RBNavbar.Toggle aria-controls="basic-navbar-nav" /> <a class="navbar-brand" href="#">Math Practice</a>
<RBNavbar.Collapse id="basic-navbar-nav"> <button class="navbar-toggler" type="button" onClick={()=>setShow(!show)} aria-expanded={show} aria-label="Toggle navigation">
<Nav className="me-auto"> <span class="navbar-toggler-icon"></span>
<NavLink to="/gcf" title="Greatest Common Factor" className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>GCF</NavLink> </button>
<NavLink to="/lcm" title="Least Common Multiple" className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>LCM</NavLink> <div className={`collapse navbar-collapse ${show ? "show" : ""}`} id="navbarNav">
</Nav> <ul class="navbar-nav">
</RBNavbar.Collapse> <li class="nav-item">
</Container> <NavLink to="/gcf" title="Greatest Common Factor" onClick={handleNavClick} className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>GCF</NavLink>
</RBNavbar> </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; export default Navbar;