single

src/Router.js

@@ -20,4 +20,29 @@ export default class Router {
 			this.contentElement.innerHTML = route.page.render();
 		}
 	}
+
+	static #menuElement; // propriété statique privée
+	/**
+	 * 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 qui contient le menu principal
+	 */
+	static set menuElement(element) {
+		// setter
+		this.#menuElement = element;
+		const arr = this.#menuElement.querySelectorAll('li>a');
+		arr.forEach(element => {
+			element.addEventListener('click', event => {
+				event.preventDefault();
+				Router.navigate(element.getAttribute('href'));
+			});
+		});
+		// value.addEventListener('click', event => {
+		// 	Router.navigate(value.getAttribute('href'));
+		// });
+
+		// au clic sur n'importe quel lien (<a href>) contenu dans "element"
+		// déclenchez un appel à Router.navigate(path)
+		// où "path" est la valeur de l'attribut `href=".."` du lien cliqué
+	}
 }

src/main.js

 import Router from './Router';
 import data from './data';
 import PizzaList from './pages/PizzaList';
+import Component from './components/Component';
 
 Router.titleElement = document.querySelector('.pageTitle');
 Router.contentElement = document.querySelector('.pageContent');
 
-const pizzaList = new PizzaList([]);
-Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
+const pizzaList = new PizzaList(data),
+	aboutPage = new Component('section', null, 'Ce site est génial'),
+	pizzaForm = new Component(
+		'section',
+		null,
+		'Ici vous pourrez ajouter une pizza'
+	);
+
+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.menuElement = document.querySelector('.mainMenu');
 
 document.querySelector('.logo').innerHTML +=
 	"<small>les pizzas c'est la vie</small>";