diff --git a/.gitignore b/.gitignore index 5a9811c83b0..692b685ff0e 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,8 @@ yarn-error.log *.iml .venv/ _code-samples/*/js/package-lock.json +*.css.map # PHP composer.lock +.cursor/ \ No newline at end of file diff --git a/@theme/components/Navbar/Navbar.tsx b/@theme/components/Navbar/Navbar.tsx index 50a0a620052..0eeb572bf01 100644 --- a/@theme/components/Navbar/Navbar.tsx +++ b/@theme/components/Navbar/Navbar.tsx @@ -128,22 +128,31 @@ export function Navbar(props) { }); React.useEffect(() => { - // Turns out jQuery is necessary for firing events on Bootstrap v4 - // dropdowns. These events set classes so that the search bar and other + // Bootstrap 5 uses vanilla JavaScript API instead of jQuery + // These events set classes so that the search bar and other // submenus collapse on mobile when you expand one submenu. - const dds = $("#topnav-pages .dropdown"); + const dropdowns = document.querySelectorAll("#topnav-pages .dropdown"); const top_main_nav = document.querySelector("#top-main-nav"); - dds.on("show.bs.dropdown", (evt) => { - top_main_nav.classList.add("submenu-expanded"); - }); - dds.on("hidden.bs.dropdown", (evt) => { - top_main_nav.classList.remove("submenu-expanded"); + + const handleDropdownShow = () => { + top_main_nav?.classList.add("submenu-expanded"); + }; + + const handleDropdownHidden = () => { + top_main_nav?.classList.remove("submenu-expanded"); + }; + + // Attach Bootstrap 5 dropdown events + dropdowns.forEach((dropdown) => { + dropdown.addEventListener("show.bs.dropdown", handleDropdownShow); + dropdown.addEventListener("hidden.bs.dropdown", handleDropdownHidden); }); + // Close navbar on .dropdown-item click const toggleNavbar = () => { const navbarToggler = document.querySelector(".navbar-toggler"); const isNavbarCollapsed = - navbarToggler.getAttribute("aria-expanded") === "true"; + navbarToggler?.getAttribute("aria-expanded") === "true"; if (isNavbarCollapsed) { navbarToggler?.click(); // Simulate click to toggle navbar } @@ -156,6 +165,10 @@ export function Navbar(props) { // Cleanup function to remove event listeners return () => { + dropdowns.forEach((dropdown) => { + dropdown.removeEventListener("show.bs.dropdown", handleDropdownShow); + dropdown.removeEventListener("hidden.bs.dropdown", handleDropdownHidden); + }); dropdownItems.forEach((item) => { item.removeEventListener("click", toggleNavbar); }); @@ -300,7 +313,7 @@ export function NavDropdown(props) { href="#" id={toggler_id} role="button" - data-toggle="dropdown" + data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > @@ -329,8 +342,8 @@ export function NavControls(props) {