redesign nav and logo

assets/css/src/generic.css

@@ -79,10 +79,12 @@ body {
 }
 
 /* ================= BUTTONS ================= */
-.toggle-btn--left::after {
+.toggle-btn--left::after,
+.plus-btn::after {
   margin-left: var(--unit--horizontal);
 }
-.toggle-btn--left::after {
+.toggle-btn--left::after,
+.plus-btn::after {
   content: "+";
 }
 .toggle-btn--left.open::after {

assets/css/src/header.css

@@ -1,4 +1,42 @@
 #main-header {
+  position: fixed;
+  box-sizing: border-box;
+  width: 100vw;
+}
+
+#logo * {
+  font-size: 26.65vw;
+  font-weight: var(--font-weight-extra-bold);
+}
+
+#logo span {
+  height: 20vw;
+  width: 100vw;
+  box-sizing: border-box;
+  padding-right: 1vw;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+#logo {
+  text-align: right;
+}
+
+#logo #actuel,
+#logo #inactuel {
+  mix-blend-mode: difference;
+}
+
+#logo #inactuel {
+  transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+#main-header.minimized #inactuel {
+  margin-top: -20vw;
+  transform: translateX(-2px) translateY(-2px);
+}
+
+/* #main-header {
   position: fixed;
   z-index: 3;
   top: 0;
@@ -41,7 +79,7 @@
 
 #main-header.minimized #logo #inactuel {
   top: 0.1vw;
-}
+} */
 
 body {
   --entry-btns-height: 10svh;
@@ -91,15 +129,11 @@ button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
   content: "+";
 }
-.entry-btn--left::after {
+button.open-nav::after {
   margin-left: var(--unit--horizontal);
 }
-.entry-btn--right::before {
-  margin-right: var(--unit--horizontal);
-}
 
-#entry-btns .entry-btn--left::before,
+button.open-nav::after {
-#entry-btns .entry-btn--right::after {
   content: "";
   position: absolute;
   background-color: transparent;
@@ -109,13 +143,6 @@ button.toggle.right::before {
   transition: all 0.5s var(--curve-sine);
 }
 
-#entry-btns .entry-btn--left::before {
-  right: 0;
-}
-#entry-btns .entry-btn--right::after {
-  left: 0;
-}
-
 #entry-btns.minimized {
   color: #000;
 }
@@ -139,12 +166,12 @@ button.toggle.right::before {
 }
 
 @media screen and (min-width: 640px) {
-  #logo {
+  /* #logo {
     width: 100%;
   }
   #logo * {
     font-size: 25.8vw;
-  }
+  } */
 
   .page-cover:not(
       [data-template="author"] .page-cover,

assets/css/src/nav.css

@@ -3,43 +3,59 @@
   display: none;
 }
 .panel {
+  display: none;
   position: fixed;
+  overflow: auto;
   width: 100vw;
   height: 100dvh;
   top: 0;
   background-color: #000;
   outline: 1px solid #fff;
   transition: all 0.5s var(--curve-sine);
-  z-index: 2;
+  z-index: 3;
-  padding-top: calc(var(--unit--vertical) * 5);
   box-sizing: border-box;
 
-  display: flex;
   flex-direction: column;
 }
 
-.search,
+.panel.panel--visible {
-.panel__items {
+  display: flex;
-  padding: 0 var(--unit--horizontal);
 }
 
-.panel--left {
+.panel header {
-  left: calc(-100vw - 1px);
+  position: sticky;
-}
+  top: 0;
-.panel--right {
+  z-index: 1;
-  right: calc(-100vw - 1px);
+  background-color: #000;
+  padding: var(--unit--vertical) var(--unit--horizontal);
+  padding-bottom: 0;
 }
 
-.panel--left.open {
+.sort-btns {
-  left: 0;
+  box-sizing: border-box;
 }
-.panel--right.open {
+
-  right: 0;
+.sort-btns button {
+  all: unset;
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 2vw;
+}
+
+.sort-btns button:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.sort-btns button.active {
+  text-decoration: underline;
+  text-underline-offset: 4px;
 }
 
 .search {
   position: relative;
   width: 100%;
+  margin-top: var(--unit--vertical);
   background-color: #000;
   z-index: 1;
   top: 0;
@@ -66,24 +82,26 @@
   width: 1.2rem;
   height: 1.2rem;
   padding: 0.5rem;
-  bottom: 0;
+  right: 0;
-  right: var(--unit--horizontal);
+  transform: translateX(0.5rem) translateY(0.2rem);
-  transform: translateX(0.5rem) translateY(-0.2rem);
 }
 button.search__icon {
   cursor: pointer;
 }
 
-.panel__items {
+.panel__collection {
   scroll-behavior: smooth;
   height: 100%;
-  padding-top: var(--unit--vertical);
   overflow: auto;
+  padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
 .panel-close {
+  position: fixed;
+  box-sizing: border-box;
+  bottom: 0;
   justify-content: center;
-  width: calc(100% - 2 * var(--unit--horizontal));
+  width: 100%;
   outline: none;
   border-top: 1px solid #fff;
   font-size: var(--font-size-m);
@@ -119,7 +137,7 @@ button.search__icon {
 }
 
 .panel-item-content__texts {
-  margin-top: var(--unit--vertical);
+  padding: var(--unit--vertical) var(--unit--horizontal);
 }
 
 /* ================= TEXT ITEM ================= */

assets/css/src/texts.css

@@ -17,11 +17,6 @@
   font-family: "Switzer-Variable", sans-serif;
 }
 
-#logo * {
-  font-size: 25vw;
-  font-weight: var(--font-weight-extra-bold);
-}
-
 h1,
 h1 *,
 h2,
@@ -45,7 +40,7 @@ h2 {
 h3,
 .h3 {
   font-size: var(--font-size-xl);
-  color: var(--color-secondary);
+  color: var(--color-primary);
 }
 
 article h2 {

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

site/collections/categories.php

@@ -1,41 +1,44 @@
 <?php
 
-function createCategories($textsPage) {
+function createEmptyCategories() {    
-    $categories = array();
+    $categories = new Pages();    
-    foreach ($textsPage->categories()->split() as $category) {
+    foreach (page('textes')->categories()->split() as $categoryName) {
-        $categories[$category] = array(
+        $category = new Page([
-          'title' => $category,
+            'slug' => Str::slug($categoryName),
-          'texts' => new Pages()
+            'template' => 'category',
-        );
+            'status' => 'listed',
+            'content' => [
+                'title' => $categoryName,
+            ],
+            'children' => []
+        ]);
+
+        $categories->add($category);
     }    
+
     return $categories;
 }
 
-function fillCategoriesWithTexts($emptyCategories, $texts) {
+
-    $filledCategories = $emptyCategories;
+function createCategories() {
-    foreach ($texts as $text) {
+    $emptyCategories = createEmptyCategories();
+    foreach (page('textes')->grandChildren() as $text) {
         try {
-            $textCategory = $text->category()->value();
+            $textCategoryName = $text->category()->value();
-            $filledCategories[$textCategory]['texts']->add($text);
+            $emptyCategories
+                ->findBy('slug', Str::slug($textCategoryName))
+                ->children()
+                ->add($text);
         } catch (\Throwable $th) {
-            throw new Exception(json_encode($th->getFile() . ' : ' . $th->getMessage()));
+            throw new Exception($th->getFile() . ' : ' . $th->getMessage());
         }
     }
-
+    return $emptyCategories->filter(function ($category) {
-    // exclude empty categories
+        return $category->children()->count() > 0;
-    return array_filter($filledCategories, function($category) {
-        return count($category['texts']) > 0;
     });
 }
 
 return function ($site) {
-    $textsPage = $site->find('textes');
+    $categories = createCategories();
-    $years = $textsPage->children();
+    return $categories;
-    $texts = $years->children()->index();
-
-    $emptyCategories = createCategories($textsPage);
-
-    $filledCategories = fillCategoriesWithTexts($emptyCategories, $texts);
-
-    return $filledCategories;
 };

site/snippets/cover.php

@@ -14,13 +14,7 @@ $isOpen = isset($isOpen) ? $isOpen : false;
     </div>
   <?php endif ?>
 </header>
-<div id="entry-btns">
+
-  <button
+<button
-    class="entry-btn entry-btn--left toggle-btn--left"
+  class="open-nav"
-    onclick="togglePanel('left', event)"
+>textes</button>
-  >années</button>
-  <button
-    class="entry-btn entry-btn--right toggle-btn--right"
-    onclick="togglePanel('right', event)"
-  >categories</button>
-</div>

site/snippets/header.php

@@ -36,11 +36,11 @@ $entryTopPos = $entryTopPos ?? 20;
   </head>
   <body class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>" data-template="<?= $page->template() ?>" >
     <header id="main-header">
-      <div id="logo" >
+      <a id="logo" href="/" class="no-line">
-        <a id="logo__link" href="/" class="no-line">
+        <h1>
-          <h1 id="actuel">actuel</h1>
+          <span id="actuel">actuel</span>
-          <h1 id="inactuel">inactuel</h1>
+          <span id="inactuel">inactuel</span>
-        </a>
+        </h1>
-      </div>
+      </a>
     </header>
     <?php snippet('nav') ?>

site/snippets/nav.php

@@ -1,17 +1,37 @@
-<?php snippet('desktop-nav') ?>
+<nav 
-
+  class="panel"
-<?php snippet('panel--years') ?>
+  x-data="{search: ''}"
-  
+>
-  <button 
+  <header>
-    onclick="togglePanel('years')" 
+    <p class="sort-btns">
-    class="panel-close"
+      <button class="sort-btn sort-btn--years active">années</span></button>
-  >fermer</button>
+      <button class="sort-btn sort-btn--categories">catégories</button>
-</nav>
+      <button class="sort-btn sort-btn--all">voir tout</button>
-
+    </p>
-<?php snippet('panel--categories') ?>
+    <div class="search">
-  
+      <input 
-  <button 
+        class="search__input" 
-    onclick="togglePanel('categories')" 
+        type="text" 
-    class="panel-close"
+        placeholder="Chercher" 
-  >fermer</button>
+        x-model="search"
+      >
+      <img 
+        x-show="search.length === 0"
+        src="<?= url('assets/images/icons/search.svg') ?>" 
+        class="search__icon"
+        alt="Icône loupe indiquant le champ de recherche."
+      >
+      <button 
+        x-show="search.length > 0"
+        @click="search = ''"
+        class="search__icon"
+      >
+        <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
+      </button>
+    </div>
+  </header>
+  <?php snippet('nav__texts--all') ?>
+  <?php snippet('nav__texts--collection', ["collection" => "categories"]) ?>
+  <?php snippet('nav__texts--collection', ["collection" => "years"]) ?>
+  <button class="panel-close">fermer</button>
 </nav>

site/snippets/nav__texts--all.php

@@ -0,0 +1,32 @@
+<ul class="panel__all-texts panel-item-content__texts hidden">
+  <?php foreach(page('textes')->grandChildren()->sortBy('published', 'desc') as $article): ?>
+    <?php
+      $author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
+    ?>
+    <li 
+      class="text"
+      x-data="{ 
+        title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
+        author: '<?= $author ?>',
+        category: '<?= $article->category() ?>',
+      }"
+      x-show="
+        slugify(title).includes(slugify(search)) 
+        || slugify(author).includes(slugify(search))
+        || slugify(category).includes(slugify(search))
+      "
+    >
+      <a href="<?= $article->url() ?>" class="text__title no-line">
+        <h4><?= $article->title() ?></h4>
+      </a>
+      <div class="text__infos">
+        <p>
+            <span class="light">par</span>
+            <a class="author" href="/auteurs/<?= Str::slug($author) ?>"><?= $author ?></a><br>
+            <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+            <span class="light">dans</span> <a href="<?= $article->parent()->toPage()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+        </p>
+      </div>
+    </li>
+  <?php endforeach ?>
+</ul>

site/snippets/nav__texts--collection.php

@@ -0,0 +1,75 @@
+<ul class="panel__collection panel__collection--<?= $collection ?><?= e($collection == 'categories', ' hidden') ?>">
+  <?php foreach($kirby->collection($collection) as $section): ?>
+  <li 
+    class="panel__item "
+    x-data='{ isOpen: false }'
+  >
+    <a class="no-line" href="#<?= $section->slug() ?>" id="<?= $section->slug() ?>">
+      <button 
+        class="panel__toggle-btn"
+        :class="isOpen ? '' : 'short'"
+        @click="isOpen = !isOpen" 
+      >
+        <h3><?= $section->title() ?></h3>
+        <div 
+          class="panel__toggle-icon" 
+          x-text="isOpen || search.length > 0 ? '-' : '+'"
+        ></div>
+      </button>
+    </a>
+    <div
+      class="panel-item-content"
+      x-show="isOpen || search.length > 0"
+      x-data='{ edito: false }'
+    >
+      <?php if ($collection === "years"): ?>
+        <div 
+          class="panel-item-content__edito"
+          :class="edito ? '' : 'short'"
+          x-show="search.length === 0"
+        >
+          <?= $section->edito() ?>
+        </div>
+        <button 
+          :class="edito ? 'open' : 'close'"
+          x-show="search.length === 0"
+          class="see-more toggle-btn toggle-btn--left" 
+          @click="edito = !edito"
+        >Lire</button>
+      <?php endif ?>
+      <ul class="panel-item-content__texts">
+        <?php foreach($section->children() as $article): ?>
+          <?php
+            $author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
+          ?>
+          <li 
+            class="text"
+            x-data="{ 
+              title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
+              author: '<?= $author ?>',
+              category: '<?= $article->category() ?>',
+            }"
+            x-show="
+              slugify(title).includes(slugify(search)) 
+              || slugify(author).includes(slugify(search))
+              || slugify(category).includes(slugify(search))
+            "
+          >
+            <a href="<?= $article->url() ?>" class="text__title no-line">
+              <h4><?= $article->title() ?></h4>
+            </a>
+            <div class="text__infos">
+              <p>
+                  <span class="light">par</span>
+                  <a class="author" href="/auteurs/<?= Str::slug($author) ?>"><?= $author ?></a><br>
+                  <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+                  <span class="light">dans</span> <a href="<?= $article->parent()->toPage()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+              </p>
+            </div>
+          </li>
+        <?php endforeach ?>
+      </ul>
+    </div>
+  </li>
+  <?php endforeach ?>
+</ul>

site/snippets/panel--categories.php

@@ -1,92 +0,0 @@
-<nav 
-  class="panel panel--right panel--categories"
-  x-data="{search: ''}"
->
-  <div class="search">
-    <input 
-      class="search__input" 
-      type="text" 
-      placeholder="titre / auteur / année / catégorie" 
-      x-model="search"
-    >
-    <img 
-      x-show="search.length === 0"
-      src="<?= url('assets/images/icons/search.svg') ?>" 
-      class="search__icon"
-      alt="Icône loupe indiquant le champ de recherche."
-    >
-    <button 
-      x-show="search.length > 0"
-      @click="search = ''"
-      class="search__icon"
-    >
-      <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
-    </button>
-  </div>
-  <ul class="panel__items">
-    <?php
-      $categories = $kirby->collection('categories');
-      shuffle($categories);
-      foreach($categories as $category): 
-    ?>
-    <li 
-      class="panel__item "
-      x-data='{ isOpen: false }'
-    >
-      <a class="no-line" href="#<?= $category['title'] ?>" id="<?= $category['title'] ?>">
-        <button 
-          class="panel__toggle-btn"
-          :class="isOpen ? '' : 'short'"
-          @click="isOpen = !isOpen" 
-        >
-          <h3><?= $category['title'] ?></h3>
-          <div 
-            class="panel__toggle-icon" 
-            x-text="isOpen || search.length > 0 ? '-' : '+'"
-          ></div>
-        </button>
-      </a>
-      <div
-        class="panel-item-content"
-        x-show="isOpen || search.length > 0"
-      >
-        <ul class="panel-item-content__texts">
-          <?php
-            $category['texts'];
-            foreach($category['texts'] as $article): 
-          ?>
-          <?php
-            $author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
-          ?>
-            <li 
-              class="text"
-              x-data="{ 
-                title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
-                author: '<?= $author ?>',
-                yearParent: '<?= $article->parent()->title()->value() ?>',
-                category: '<?= $article->category() ?>',
-              }"
-              x-show="
-                slugify(title).includes(slugify(search)) 
-                || slugify(author).includes(slugify(search))
-                || slugify(yearParent).includes(slugify(search))
-                || slugify(category).includes(slugify(search))
-              "
-            >
-              <a href="<?= $article->url() ?>" class="text__title no-line">
-                <h4><?= $article->title() ?></h4>
-              </a>
-              <div class="text__infos">
-                <p>
-                    <span class="light">par</span><a class="author" href="/auteurs/<?= Str::slug($author) ?>"><?= $author ?></a><br>
-                    <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
-                    <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
-                </p>
-              </div>
-            </li>
-          <?php endforeach ?>
-        </ul>
-      </div>
-    </li>
-    <?php endforeach ?>
-  </ul>

site/snippets/panel--years.php

@@ -1,100 +0,0 @@
-<nav 
-  class="panel panel--left panel--years"
-  x-data="{search: ''}"
->
-  <div class="search">
-    <input 
-      class="search__input" 
-      type="text" 
-      placeholder="titre / auteur / année / catégorie" 
-      x-model="search"
-    >
-    <img 
-      x-show="search.length === 0"
-      src="<?= url('assets/images/icons/search.svg') ?>" 
-      class="search__icon"
-      alt="Icône loupe indiquant le champ de recherche."
-    >
-    <button 
-      x-show="search.length > 0"
-      @click="search = ''"
-      class="search__icon"
-    >
-      <img src="<?= url('assets/images/icons/close.svg') ?>" alt="">
-    </button>
-  </div>
-  <ul class="panel__items">
-    <?php foreach($kirby->collection('years') as $year): ?>
-    <li 
-      class="panel__item "
-      x-data='{ isOpen: false }'
-    >
-      <a class="no-line" href="#<?= $year->slug() ?>" id="<?= $year->slug() ?>">
-        <button 
-          class="panel__toggle-btn"
-          :class="isOpen ? '' : 'short'"
-          @click="isOpen = !isOpen" 
-        >
-          <h3><?= $year->title() ?></h3>
-          <div 
-            class="panel__toggle-icon" 
-            x-text="isOpen || search.length > 0 ? '-' : '+'"
-          ></div>
-        </button>
-      </a>
-      <div
-        class="panel-item-content"
-        x-show="isOpen || search.length > 0"
-        x-data='{ edito: false }'
-      >
-        <div 
-          class="panel-item-content__edito"
-          :class="edito ? '' : 'short'"
-          x-show="search.length === 0"
-        >
-          <?= $year->edito() ?>
-        </div>
-        <button 
-          :class="edito ? 'open' : 'close'"
-          x-show="search.length === 0"
-          class="see-more toggle-btn toggle-btn--left" 
-          @click="edito = !edito"
-        >Lire</button>
-        <ul class="panel-item-content__texts">
-          <?php foreach($year->children() as $article): ?>
-            <?php
-              $author = $article->author()->toPage() == null ? "inconnu" : $article->author()->toPage()->title();
-            ?>
-            <li 
-              class="text"
-              x-data="{ 
-                title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
-                author: '<?= $author ?>',
-                yearParent: '<?= $article->parent()->title()->value() ?>',
-                category: '<?= $article->category() ?>',
-              }"
-              x-show="
-                slugify(title).includes(slugify(search)) 
-                || slugify(author).includes(slugify(search))
-                || slugify(yearParent).includes(slugify(search))
-                || slugify(category).includes(slugify(search))
-              "
-            >
-              <a href="<?= $article->url() ?>" class="text__title no-line">
-                <h4><?= $article->title() ?></h4>
-              </a>
-              <div class="text__infos">
-                <p>
-                    <span class="light">par</span>
-                    <a class="author" href="/auteurs/<?= Str::slug($author) ?>"><?= $author ?></a><br>
-                    <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
-                    <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
-                </p>
-              </div>
-            </li>
-          <?php endforeach ?>
-        </ul>
-      </div>
-    </li>
-    <?php endforeach ?>
-  </ul>

vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [vue()],
+});