deep

src/Router.js

@@ -19,6 +19,7 @@ export default class Router {
 			// affichage de la page elle même
 			this.contentElement.innerHTML = route.page.render();
 			route.page.mount?.(this.contentElement);
+			window.history.pushState(null, null, path);
 		}
 	}
 
@@ -31,11 +32,14 @@ export default class Router {
 	static set menuElement(element) {
 		// setter
 		this.#menuElement = element;
-		const arr = this.#menuElement.querySelectorAll('li>a');
+
+		const arr = this.#menuElement.querySelectorAll('.mainMenu>li>a');
+
 		arr.forEach(element => {
 			element.addEventListener('click', event => {
 				event.preventDefault();
 				Router.navigate(element.getAttribute('href'));
+				element.classList.add('active');
 			});
 		});
 		// value.addEventListener('click', event => {

src/main.js

@@ -21,16 +21,16 @@ Router.menuElement = document.querySelector('.mainMenu');
 document.querySelector('.logo').innerHTML +=
 	"<small>les pizzas c'est la vie</small>";
 
-document
-	.querySelector('.mainMenu>li>a')
-	.setAttribute('class', 'pizzaListLink active');
-
 const news = document.querySelector('.newsContainer');
 news.style = 'display:visible';
 document.querySelector('.closeButton').addEventListener('click', event => {
 	news.style = 'display:none';
 });
 
-Router.navigate('/'); // affiche une page vide
 pizzaList.pizzas = data; // appel du setter
-Router.navigate('/'); // affiche la liste des pizzas
+Router.navigate(document.location.pathname); // affiche la liste des pizzas
+
+window.onpopstate = function (event) {
+	// console.log(document.location);
+	Router.navigate(document.location.pathname);
+};

src/pages/Page.js

@@ -8,5 +8,6 @@ export default class Page extends Component {
 	}
 	mount(element) {
 		this.element = element;
+		element.querySelector('.mainMenu>li>a');
 	}
 }