pre commit

src/Router.js

@@ -3,11 +3,34 @@ export default class Router {
 	static contentElement;
 	static routes = [];
 
+	static #menuElement;
+
+	static set menuElement(element) {
+		this.#menuElement = element;
+		document.querySelectorAll('.mainMenu a').forEach(element => {
+			element.addEventListener('click', event => {
+				event.preventDefault();
+				this.navigate(element.getAttribute('href'));
+			})
+		})
+		// 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é
+	}
+
 	static navigate(path) {
 		const route = this.routes.find(route => route.path === path);
 		if (route) {
+			document.querySelector('.active')?.removeAttribute('class');
+			document.querySelectorAll('.mainMenu a').forEach(element => {
+				if(element.getAttribute('href') === path) {
+					element.setAttribute('class', 'active');
+				}
+			})
+			window.history.pushState(null,null,path);
 			this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
 			this.contentElement.innerHTML = route.page.render();
+			route.page.mount?.(this.contentElement);
 		}
 	}
 }

src/main.js

 import Router from './Router';
 import data from './data';
 import PizzaList from './pages/PizzaList';
+import Component from './components/Component';
+import PizzaForm from './pages/PizzaForm';
 
 Router.titleElement = document.querySelector('.pageTitle');
 Router.contentElement = document.querySelector('.pageContent');
 
-const pizzaList = new PizzaList([]);
+const pizzaList = new PizzaList([]),
+	aboutPage = new Component('p', null, 'ce site est génial'),
+	pizzaForm = new PizzaForm();
+
+//const pizzaList = new PizzaList([]);
 Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
 
 Router.navigate('/'); // affiche une page vide
 pizzaList.pizzas = data;
 Router.navigate('/'); // affiche la liste des pizzas
+
+document.querySelector('.newsContainer').setAttribute('style','');
+
+document.querySelector('.closeButton').addEventListener('click', event => {
+    event.preventDefault();
+    document.querySelector('.newsContainer').setAttribute('style','display:none');
+})
+
+
+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');
+    
\ No newline at end of file

src/pages/Page.js

+import Component from '../components/Component';
+
+export default class Page extends Component {
+	element;
+
+	constructor(className, children) {
+		super('section', { name: 'class', value: className }, children);
+	}
+	mount(element) {
+		this.element = element;
+	}
+}

src/pages/PizzaForm.js

+import Page from './Page.js';
+
+export default class PizzaForm extends Page {
+	render() {
+		return /*html*/ `
+			<form class="pizzaForm">
+				<label>
+					Nom :
+					<input type="text" name="name">
+				</label>
+				<button type="submit">Ajouter</button>
+			</form>`;
+	}
+
+	mount(element) {
+		super.mount(element);
+        const form = document.querySelector('form');
+    
+        form.addEventListener('submit', function(event) {
+            event.preventDefault();
+            PizzaForm.submit(event);
+        });
+    
+	}
+
+	static submit(event) {
+        const form = document.querySelector('form'),
+	    input = form.querySelector('input[name=name]');
+
+        if(input.value) {
+            alert(`La pizza ${input.value} a été ajouté !`);
+            input.value = '';
+        } else {
+            alert('Champ vide !');
+        }
+
+    }
+}

src/pages/PizzaList.js

-import Component from '../components/Component.js';
 import PizzaThumbnail from '../components/PizzaThumbnail.js';
+import Page from './Page';
 
-export default class PizzaList extends Component {
+export default class PizzaList extends Page {
 	#pizzas;
 
 	constructor(pizzas) {
-		super('section', { name: 'class', value: 'pizzaList' });
+		super('pizzaList');
 		this.pizzas = pizzas;
 	}