add expanded menu

assets/css/src/generic.css

@@ -1,3 +1,7 @@
+.sr-only {
+  display: none;
+}
+
 body.progress * {
   cursor: progress !important;
 }

assets/css/src/nav.css

@@ -1,17 +1,86 @@
 /* Nav */
+
+.expanded-nav,
+.main-nav {
+  padding: 1rem;
+  padding-right: var(--space-m);
+}
+
+/* Expanded nav */
+
+.expanded-nav {
+  position: fixed;
+  width: 100%;
+  box-sizing: border-box;
+  top: -20rem;
+  z-index: 2;
+  background-color: var(--color-brown-light);
+  display: grid;
+  grid-template-columns: 1fr 4fr 1fr;
+  transition: top 0.5s var(--curve-quick-slow);
+}
+.expanded-nav.open {
+  top: 0rem;
+}
+
+.expanded-nav__columns {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.expanded-nav .close-btn {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+}
+
+.expanded-nav .close-btn__line,
+.expanded-nav .close-btn__line::before {
+  content: "";
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  position: absolute;
+}
+
+.expanded-nav .close-btn__line {
+  transform: rotate(-45deg);
+}
+.expanded-nav .close-btn__line::before {
+  transform: rotate(90deg);
+}
+
+.expanded-nav__category {
+  margin-bottom: 1rem;
+}
+.expanded-nav__subcategory {
+  font-size: var(--font-size-s);
+}
+
+/* Header */
+
 .main-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: var(--border);
-  padding: 1rem;
 }
 
 .main-nav__right {
   display: flex;
+  align-items: center;
 }
 
-.main-nav__right > *:not(:last-child) {
+.main-nav__featured-pages {
+  display: flex;
+}
+
+.main-nav__right > *:not(:last-child),
+.main-nav__featured-pages li:not(:last-child) {
   margin-right: 2.69rem;
 }
 

assets/css/src/variables.css

@@ -10,7 +10,7 @@
   --font-size-h2: 1.875rem;
   --font-size-h1: 2.8125rem;
 
-  --curve-quick-slow: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --curve-quick-slow: cubic-bezier(0.455, 0.03, 0.515, 0.955);
   --padding-vertical: 2rem;
   --space-m: 4vw;
 

assets/js/script.js

@@ -0,0 +1,24 @@
+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");
+
+  // Listeners
+  burgerBtn.addEventListener("click", expandNav);
+  closeNavBtn.addEventListener("click", closeNav);
+});

site/blueprints/pages/section.yml

@@ -18,4 +18,12 @@ tabs:
           - text
           - image
           - links-list
+  paramsTab:
+    label: Paramètres
+    icon: cog
+    fields:
+      isIndexed:
+        label: Titre de section affichée dans le menu développé ?
+        type: toggle
+        default: true
   filesTab: tabs/files

site/collections/featured-pages.php

@@ -0,0 +1,7 @@
+<?php
+
+return function() {
+  $featuredPages = new Pages([page('transmission'), page('programme')]);
+
+  return $featuredPages;
+};

site/snippets/header.php

@@ -15,6 +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') ?>
     <?php if ($page->color()->exists()): ?>
         <style>
           :root {

site/snippets/nav.php

@@ -15,8 +15,8 @@
       </h1>
     </a>
     <div class="main-nav__right">
-      <ul>
-        <?php foreach($site->children()->listed() as $navItem): ?>  
+      <ul class="main-nav__featured-pages">
+        <?php foreach($kirby->collection('featured-pages') as $navItem): ?>  
           <li>
             <a href="<?= $navItem->url() ?>"><?= $navItem->title() ?></a>
           </li>
@@ -26,9 +26,43 @@
       <button class="main-nav__search">
         <?= svg('/assets/images/icons/search.svg') ?>
       </button>
-      <button class="burger-btn">
+      <button class="burger-btn" aria-expanded="false" title="Ouvrir le menu">
+        <span class="sr-only">Ouvrir le menu</span>
         <span class="burger-btn__line"></span>
       </button>
     </div>
   </nav>
-</header>
+</header>
+<nav class="expanded-nav">
+  <a href="/" title="Aller à l'accueil">
+    <h1 class="logo">
+      <span>
+        N<span class="logo__detail">ouveau</span>
+      </span>
+      <span>
+        T<span class="logo__detail">héâtre</span>
+      </span>
+      <span>
+        B<span class="logo__detail">esançon</span>
+      </span>
+    </h1>
+  </a>
+  <ul class="expanded-nav__columns">
+    <?php foreach($site->children()->listed() as $category): ?>
+        <li>
+          <h4 class="expanded-nav__category"><?= $category->title() ?></h4>
+          <ul>
+            <?php foreach($category->children() as $subcategory): ?>
+                <?php if ($subcategory->isIndexed() == 'true'): ?>
+                  <li><a class="expanded-nav__subcategory" href="<?= $subcategory->url() ?>"><?= $subcategory->title() ?></a></li>
+                <?php endif ?>
+            <?php endforeach ?>
+          </ul>
+        </li>
+    <?php endforeach ?>
+  </ul>
+  <button class="close-btn" title="Fermer le menu">
+    <span class="sr-only">Fermer le menu</span>
+    <span class="close-btn__line"></span>
+  </button>
+</nav>

site/templates/home.php

@@ -9,7 +9,7 @@
   </div>
 </section>
 
-<?php snippet('calendar-strip') ?>
+<?php //snippet('calendar-strip') ?>
 
 <?php 
   $currentSeason = page('programme')->children()->first()->children();