"test"

src/Router.js

 export default class Router {
 	static titleElement;
 	static contentElement;
-	static routes = [];
 	static #menuElement;
 
+	static routes = [];
+
+	/**
+	 * Indique au Router la balise HTML contenant le menu de navigation
+	 * Écoute le clic sur chaque lien et déclenche la méthode navigate
+	 * @param element Élément HTML de la page qui contient le menu principal
+	 */
 	static set menuElement(element) {
 		this.#menuElement = element;
-		console.log(this.#menuElement);
-		this.#menuElement.addEventListener('click', this.handleClick);
+		const links = element.querySelectorAll('a');
+		links.forEach(link =>
+			link.addEventListener('click', event => {
+				event.preventDefault();
+				this.navigate(event.target.getAttribute('href'));
+			})
+		);
 	}
-
-	static handleClick(event) {
-		event.preventDefault();
-		console.log(event);
-		Router.navigate(event.target.getAttribute('href'));
-		event.target.classList.add('active');
-	}
-
-	static navigate(path) {
+	/**
+	 * Navigue dans l'application
+	 * Affiche la page correspondant à `path` dans le tableau `routes`
+	 * @param {String} path URL de la page courante
+	 * @param {Boolean} pushState active/désactive le pushState (ajout d'une entrée dans l'historique de navigation)
+	 */
+	static navigate(path, pushState = true) {
 		const route = this.routes.find(route => route.path === path);
 		if (route) {
 			this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
 			this.contentElement.innerHTML = route.page.render();
-			console.log(route);
 			route.page.mount?.(this.contentElement);
-			window.history.pushState({}, '', path);
-			const d = document.querySelectorAll('.mainMenu a');
-			d.forEach(element => {
-				if (element.textContent == route.title) element.classList.add('active');
-				else element.classList.remove('active');
-			});
+			// gestion menu (classe "active")
+			const menuLink = this.#menuElement.querySelector(
+					`a[href="${route.path}"]`
+				),
+				prevActiveLink = this.#menuElement.querySelector('a.active');
+			prevActiveLink?.classList.remove('active');
+			menuLink?.classList.add('active');
+			if (pushState) {
+				window.history.pushState(null, null, path);
+			}
 		}
 	}
 }

src/main.js

@@ -36,5 +36,6 @@ close.addEventListener('click', handleClick);
 
 window.onpopstate = e => {
 	console.log(document.location);
-	Router.navigate(document.location.pathname);
+	Router.navigate(document.location.pathname, false);
 };
+window.onpopstate();