Fix collapsing navbar

src/gcf.tsx

@@ -64,7 +64,7 @@ export function GCF() {
     const r = Math.random()
     var i = 0, accum = 0
     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
       accum += probabilities[i][0]
     }

src/navbar.tsx

@@ -1,24 +1,33 @@
-import Container from 'react-bootstrap/Container';
+import { useState } from 'preact/hooks'
 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() {
+  const [ show, setShow ] = useState(false);
+
+  const handleNavClick = () : void => {
+    setShow(false)
+  }
+
   return (
-    <RBNavbar expand="lg" className="bg-body-tertiary" sticky="top">
-      <Container>
-        <RBNavbar.Toggle aria-controls="basic-navbar-nav" />
-        <RBNavbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">
-            <NavLink to="/gcf" title="Greatest Common Factor" className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>GCF</NavLink>
-            <NavLink to="/lcm" title="Least Common Multiple" className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>LCM</NavLink>
-          </Nav>
-        </RBNavbar.Collapse>
-      </Container>
-    </RBNavbar>
-  );
+    <nav class="navbar navbar-expand-lg 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;