redesign nav and logo

assets/js/script.js

@@ -204,4 +204,42 @@ document.addEventListener("DOMContentLoaded", () => {
       event.stopPropagation();
     });
   });
+
+  const navSortBtns = document.querySelectorAll("nav .sort-btn");
+  const navSections = document.querySelectorAll(
+    ".panel__all-texts, .panel__collection"
+  );
+
+  navSortBtns.forEach((sortBtn) => {
+    sortBtn.addEventListener("click", () => {
+      navSortBtns.forEach((btn) => btn.classList.remove("active"));
+      sortBtn.classList.add("active");
+
+      const sections = {
+        "sort-btn--all": ".panel__all-texts",
+        "sort-btn--years": ".panel__collection--years",
+        "sort-btn--categories": ".panel__collection--categories",
+      };
+
+      navSections.forEach((navSection) => navSection.classList.add("hidden"));
+
+      Object.keys(sections).forEach((key) => {
+        if (sortBtn.classList.contains(key)) {
+          document.querySelector(sections[key]).classList.remove("hidden");
+        }
+      });
+    });
+  });
+
+  const panelNav = document.querySelector(".panel");
+
+  const openNavBtn = document.querySelector("button.open-nav");
+  openNavBtn.addEventListener("click", () => {
+    panelNav.classList.add("panel--visible");
+  });
+
+  const closeNavBtn = document.querySelector(".panel-close");
+  closeNavBtn.addEventListener("click", () => {
+    panelNav.classList.remove("panel--visible");
+  });
 });