Close menu after navigation.

Author: 7heMech

frontend/src/components/SiteMenu.tsx

@@ -176,16 +176,13 @@ const getMenuDropown = (item: MenuItem, onClick?: () => void) => {
 };
 
 export function SiteMenu() {
-	// This is hacky AF. But that's the price of using a non-react UI kit.
-	const closeMenus = () => {
-		const navMenus = document.querySelectorAll(".nav-item.dropdown");
-		navMenus.forEach((menu) => {
-			menu.classList.remove("show");
-			const dropdown = menu.querySelector(".dropdown-menu");
-			if (dropdown) {
-				dropdown.classList.remove("show");
-			}
-		});
+	const closeMenu = () => {
+		const navbarToggler = document.querySelector<HTMLElement>(".navbar-toggler");
+		const navbarMenu = document.querySelector("#navbar-menu");
+
+		if (navbarToggler && navbarMenu?.classList.contains("show")) {
+			navbarToggler.click();
+		}
 	};
 
 	return (
@@ -198,7 +195,7 @@ export function SiteMenu() {
 								<ul className="navbar-nav">
 									{menuItems.length > 0 &&
 										menuItems.map((item) => {
-											return getMenuItem(item, closeMenus);
+											return getMenuItem(item, closeMenu);
 										})}
 								</ul>
 							</div>