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));
 });

site/snippets/footer.php

@@ -1,3 +1,4 @@
+</main>
 <footer class="main-footer">
   <h1 class="logo">
     <span>Nouveau</span>

site/snippets/header.php

@@ -15,7 +15,7 @@
       <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/fr.js"></script>
       <?= js('/assets/js/calendar.js') ?>
     <?php endif ?>
-    <?= js('/assets/js/script.js', 'defer') ?>
+    <script src="<?= url('assets/js/script.js') ?>" type="module" defer></script>
     <?php if ($page->color()->exists()): ?>
         <style>
           :root {
@@ -29,3 +29,4 @@
       <?php snippet('header-banner') ?>
   <?php endif ?>
   <?php snippet('nav') ?>
+  <main>

site/snippets/nav.php

@@ -1,7 +1,7 @@
 <header class="main-header">
   <div class="main-header__infos-banner"></div>
+  <a href="/" title="Aller à l'accueil">
   <nav class="main-nav main-nav--small">
-    <a href="/" title="Aller à l'accueil">
       <h1 class="logo">
         <span>
           N<span class="logo__detail">ouveau</span>
@@ -34,7 +34,7 @@
   </nav>
 </header>
 <nav class="expanded-nav">
-  <a href="/" title="Aller à l'accueil">
+  <a class="expanded-nav__logo-link" href="/" title="Aller à l'accueil">
     <h1 class="logo">
       <span>
         N<span class="logo__detail">ouveau</span>