nav - finish nav expanded dynamic columns

assets/css/src/nav.css

@@ -2,8 +2,6 @@
 
 .expanded-nav,
 .main-nav {
-  padding: 1rem;
-  padding-right: var(--space-m);
 }
 
 /* Expanded nav */
@@ -12,20 +10,27 @@
   position: fixed;
   width: 100%;
   box-sizing: border-box;
-  top: -20rem;
+  top: -32rem;
   z-index: 2;
   background-color: var(--color-brown-light);
   display: grid;
-  grid-template-columns: 1fr 4fr 1fr;
+  grid-template-columns: 2fr 8fr 1fr;
   transition: top 0.5s var(--curve-quick-slow);
+  padding: 2rem var(--space-m) 2rem 1rem;
+  border-bottom: var(--border);
 }
 .expanded-nav.open {
   top: 0rem;
 }
 
+.expanded-nav__logo-link {
+  height: fit-content;
+}
+
 .expanded-nav__columns {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  row-gap: 6rem;
 }
 
 .expanded-nav .close-btn {
@@ -68,6 +73,8 @@
   justify-content: space-between;
   align-items: center;
   border-bottom: var(--border);
+  padding: 1rem;
+  padding-right: var(--space-m);
 }
 
 .main-nav__right {

assets/js/functions.js

@@ -0,0 +1,23 @@
+let handleClick;
+
+function expandNav(nodes) {
+  nodes.expandedNav.classList.add("open");
+
+  nodes.burgerBtn.setAttribute("aria-expanded", true);
+  nodes.closeNavBtn.setAttribute("aria-expanded", true);
+
+  handleClick = () => closeNav(nodes);
+  nodes.main.addEventListener("click", handleClick);
+}
+
+function closeNav(nodes) {
+  console.log("close nav");
+  nodes.expandedNav.classList.remove("open");
+
+  nodes.burgerBtn.setAttribute("aria-expanded", false);
+  nodes.closeNavBtn.setAttribute("aria-expanded", false);
+
+  nodes.main.removeEventListener("click", handleClick);
+}
+
+export { expandNav, closeNav };

assets/js/script.js

@@ -1,24 +1,15 @@
+import { expandNav, closeNav } from "./functions.js";
+
 document.addEventListener("DOMContentLoaded", () => {
-  // Functions
-  function expandNav() {
-    expandedNav.classList.add("open");
-
-    burgerBtn.setAttribute("aria-expanded", true);
-    closeNavBtn.setAttribute("aria-expanded", true);
-  }
-  function closeNav() {
-    expandedNav.classList.remove("open");
-
-    burgerBtn.setAttribute("aria-expanded", false);
-    closeNavBtn.setAttribute("aria-expanded", false);
-  }
-
   // Variables
-  const burgerBtn = document.querySelector(".burger-btn");
-  const closeNavBtn = document.querySelector(".expanded-nav .close-btn");
-  const expandedNav = document.querySelector(".expanded-nav");
+  const nodes = {
+    burgerBtn: document.querySelector(".burger-btn"),
+    closeNavBtn: document.querySelector(".expanded-nav .close-btn"),
+    expandedNav: document.querySelector(".expanded-nav"),
+    main: document.querySelector("main"),
+  };
 
   // Listeners
-  burgerBtn.addEventListener("click", expandNav);
-  closeNavBtn.addEventListener("click", closeNav);
+  nodes.burgerBtn.addEventListener("click", () => expandNav(nodes));
+  nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes));
 });