nav - show subtitles

assets/css/src/nav.css

@@ -163,6 +163,11 @@ button.see-more {
   display: inline-block;
   padding-left: var(--unit--horizontal);
 }
+
+.panel .text__title h5 {
+  margin-top: calc(var(--unit--vertical) / 2);
+}
+
 .panel__collection--years .text:first-child .text__infos {
   padding-left: var(--unit--horizontal);
 }

site/snippets/nav__texts--all.php

@@ -1,32 +1,37 @@
 <ul class="texts 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();
+      $author = $article->author()->toPage() == null ? 'inconnu' : $article->author()->toPage()->title();
       ?>
-    <li 
+  <li class="text" x-data="{ 
-      class="text"
-      x-data="{ 
         title: '<?= str_replace("'", "\'", $article->title()->value()) ?>',
         author: '<?= $author ?>',
         category: '<?= $article->category() ?>',
         keywords: '<?= $article->keywords() ?>',
-      }"
+      }" x-show="
-      x-show="
         slugify(title).includes(slugify(search)) 
         || slugify(author).includes(slugify(search))
         || slugify(category).includes(slugify(search))
         || slugify(keywords).includes(slugify(search))
-      "
+      ">
-    >
+    <a href="<?= $article->url() ?>"
-      <a href="<?= $article->url() ?>" class="text__title no-underline">
+      class="text__title no-underline">
       <h4><?= $article->title() ?></h4>
+      <?php if ($article->subtitle()->isNotEmpty()): ?>
+        <p><?= $article->subtitle() ?></p>
+      <?php endif ?>
     </a>
     <div class="text__infos">
       <p>
         <span class="light">par</span>
-            <a class="author" href="/auteurs/<?= Str::slug($author) ?>"><?= $author ?></a><br>
+        <a class="author"
-            <span class="light">publié le </span><?= $article->published()->toDate('d/m/Y') ?><br>
+          href="/auteurs/<?= Str::slug($author) ?>"><?= $author ?></a><br>
-            <span class="light">dans</span> <a href="<?= $article->parent()->url() ?>"><?= $article->parent()->title() ?></a> / <a href="/categories/<?= $article->category() ?>"><?= $article->category() ?></a>
+        <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>

site/snippets/nav__texts--collection.php

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