blbl

src/Router.js

@@ -2,19 +2,27 @@ export default class Router {
 	static titleElement;
 	static contentElement;
 	static routes;
+	static #menuElement;
 
-	static set menuElement(element) {
-		this.#menuElement = element;
-		// au clic sur n'importe quel lien contenu dans "element"
-		// déclenchez un appel à Router.navigate(path)
-		// où "path" est la valeur de l'attribut `href=".."` du lien cliqué
-	}
-	#menuElement;
 	static navigate(path) {
 		const route = this.routes.find(route => route.path === path);
 		if (route) {
 			this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
 			this.contentElement.innerHTML = route.page.render();
+			route.page.mount?.(this.contentElement);
+		}
 	}
+
+	static set menuElement(element) {
+		this.#menuElement = element;
+		let value = element.querySelectorAll('a');
+		console.log(value);
+
+		value.forEach(winnie => {
+			winnie.addEventListener('click', event => {
+				event.preventDefault();
+				this.navigate(winnie.getAttribute('href'));
+			});
+		});
 	}
 }

src/main.js

@@ -5,6 +5,8 @@ import Component from './components/Component.js';
 
 Router.titleElement = document.querySelector('.pageTitle');
 Router.contentElement = document.querySelector('.pageContent');
+Router.menuElement = document.querySelector('.mainMenu');
+
 const pizzaList = new PizzaList([]),
 	aboutPage = new Component('section', null, 'Ce site est génial'),
 	pizzaForm = new Component(
@@ -13,15 +15,20 @@ const pizzaList = new PizzaList([]),
 		'Ici vous pourrez ajouter une pizza'
 	);
 
-Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
+Router.routes = [
+	{ path: '/', page: pizzaList, title: 'La carte' },
+	{ path: '/a-propos', page: aboutPage, title: 'À propos' },
+	{ path: '/ajouter-pizza', page: pizzaForm, title: 'Ajouter une pizza' },
+];
 
 Router.navigate('/'); // affiche une page vide
 pizzaList.pizzas = data;
 Router.navigate('/'); // affiche la liste des pizzas
-document.querySelector('.newsContainer').style.display = '';
-document.querySelector('.closeButton').addEventListener('click', event => {
-	event.preventDefault();
-	document.querySelector('.newsContainer').style.display = 'none';
-});
 
-Router.menuElement = document.querySelector('.mainMenu');
+document.body.querySelector('.newsContainer').setAttribute('style', '');
+const close = document.body.querySelector('.newsContainer .closeButton');
+close.addEventListener('click', event => {
+	document.body
+		.querySelector('.newsContainer')
+		.setAttribute('style', 'display:none');
+});