add function to navigate

This function will replace the <main> content with the selected page and make active it's respective navigation <li> on header.
HectorVilas · Apr 27, 2023 · 23ab97f · 23ab97f
1 parent 010a37b
commit 23ab97f
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/modules/functions.js b/modules/functions.js
@@ -1,3 +1,6 @@
+import home from "./pages/home.js";
+import shop from "./pages/shop.js";
+
 export function addToCart() {
   const thisCard = this.closest('.shop-card');
   const thisCardMainBtn = thisCard.querySelector('.shop-card-buy');
@@ -41,3 +44,21 @@ export function toggleFavorite() {
     favIcon.classList.add('has-content');
   };
 }
+
+export function goToPage(page) {
+  const main = document.querySelector('main');
+  const previousNavActive = document.querySelector('#navigation .active');
+  const headerNav = document.querySelector(`.nav-${page}`);
+  let sections;
+
+  previousNavActive?.classList?.remove('active');
+  headerNav.classList.add('active');
+  if (page === 'home') {
+    sections = home();
+  } else if (page === 'shop') {
+    sections = shop();
+  };
+
+  main.replaceChildren(...sections);
+  window.scrollTo(0, 0);
+}