diff --git a/src/Router.js b/src/Router.js index d5df3679fcabcb2dac8be4a1f686e6dbf13a183b..f2b5cf069957296bbd827342ebff357fe7e47c44 100644 --- a/src/Router.js +++ b/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 => { diff --git a/src/main.js b/src/main.js index 88d19a457d8b171cefc49b4bf9d81bd390771ce6..27416c2695c7eaa3677dee79c60949a2d60f28b0 100644 --- a/src/main.js +++ b/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); +}; diff --git a/src/pages/Page.js b/src/pages/Page.js index 8ccf3ed8dc481d6f0e94cc52d421f76a533a0ae1..1f64e0ced76bd6944625624ea79fe2814d61cd08 100644 --- a/src/pages/Page.js +++ b/src/pages/Page.js @@ -8,5 +8,6 @@ export default class Page extends Component { } mount(element) { this.element = element; + element.querySelector('.mainMenu>li>a'); } }