site nav

assets/css/components/_newsletter-form.scss

@@ -1,5 +1,5 @@
 .form__newsletter {
-         margin-top: calc(var(--spacing)*2);
+margin-top: calc(var(--spacing)*2);
   --size: 24px;
   position: relative;
   display: flex;

assets/css/partials/_site-menu.scss

@@ -19,8 +19,15 @@
         right: -100vw;
     }
 
-    display: flex;
+
-    flex-direction: column;
+    .site-menu__inner{
+        height: 100%;
+        overflow: scroll;
+        @include hide-scroll();
+
+    }
+    // display: flex;
+    // flex-direction: column;
 
 
     .search-form{
@@ -28,31 +35,42 @@
         margin-bottom: calc(var(--spacing)*1);
     }
 
-    nav{
-        flex-grow: 1;
-        ul{ 
-            list-style-type: none;
-            text-transform: uppercase;
-            font-weight: 500;
-            li{
-                font-size: var(--fs-normal);
-                a{
-                    display: block;
-                    text-decoration: none;
-                    padding: 0.5em 0;
-                    &:hover{
-                        text-decoration: underline;
-                    }
-                }
-            }
 
-            .highlight{
+
-                text-transform: uppercase;
+    nav{
+          margin-top: calc(var(--spacing)*1.5);
+        ul{
+            list-style-type: none;
+            li{
+                margin-bottom: calc(var(--spacing)*0.5);
+            }
+            a{
+                text-decoration: none;
+                font-weight: 500;
             }
         }
+
     }
 
+    #nav-pages{
+        li{
+            text-transform: uppercase;
+        }
+
+    }
+
+    .support{
+  text-transform: uppercase;
+    }
+
+    #nav-aside{
+        margin-top: calc(var(--spacing)*1);
+    }
+
+
+
     .socials{
+              margin-top: calc(var(--spacing)*2);
         padding-bottom: calc(var(--spacing)*0.75);
     }
 }

assets/css/style.css

@@ -2996,37 +2996,43 @@ figcaption, .caption {
     right: -100vw;
   }
 }
-#site-menu {
+#site-menu .site-menu__inner {
-  display: flex;
+  height: 100%;
-  flex-direction: column;
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+#site-menu .site-menu__inner::-webkit-scrollbar {
+  display: none;
 }
 #site-menu .search-form {
   margin-top: calc(var(--spacing) * 1);
   margin-bottom: calc(var(--spacing) * 1);
 }
 #site-menu nav {
-  flex-grow: 1;
+  margin-top: calc(var(--spacing) * 1.5);
 }
 #site-menu nav ul {
   list-style-type: none;
-  text-transform: uppercase;
-  font-weight: 500;
 }
 #site-menu nav ul li {
-  font-size: var(--fs-normal);
+  margin-bottom: calc(var(--spacing) * 0.5);
 }
-#site-menu nav ul li a {
+#site-menu nav ul a {
-  display: block;
   text-decoration: none;
-  padding: 0.5em 0;
+  font-weight: 500;
 }
-#site-menu nav ul li a:hover {
+#site-menu #nav-pages li {
-  text-decoration: underline;
-}
-#site-menu nav ul .highlight {
   text-transform: uppercase;
 }
+#site-menu .support {
+  text-transform: uppercase;
+}
+#site-menu #nav-aside {
+  margin-top: calc(var(--spacing) * 1);
+}
 #site-menu .socials {
+  margin-top: calc(var(--spacing) * 2);
   padding-bottom: calc(var(--spacing) * 0.75);
 }
 

site/blueprints/pages/investigations.yml

@@ -3,8 +3,18 @@ title: Investigations
 tabs:
   contentTab:
     label: Contenu
-    sections:
+    icon: page
-      investigations: fields/investigations
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
+        sections:
+          investigations: fields/investigations
   highlightTab:
     label: Mise en avant
     icon: star

site/blueprints/pages/packages.yml

@@ -3,17 +3,27 @@ title: Dossiers
 tabs:
   contentTab:
     label: Contenu
-    sections:
+    icon: page
-      packages:
+    columns:
-        label: Dossiers
+      - width: 1/3
-        type: pages
+        fields:
-        text: "{{ page.title }}"
+          chapo:
-        info: "{{ page.linkedContent.toPages.count }} contenus"
+            label: Introduction
-        layout: cards
+            type: writer
-        size: huge
+            nodes: false
-        search: true
+            buttons: false
-        image:
+      - width: 2/3
-          cover: true
+        sections:
-          ratio: 12/7
+          packages:
-        template: package
+            label: Dossiers
+            type: pages
+            text: "{{ page.title }}"
+            info: "{{ page.linkedContent.toPages.count }} contenus"
+            layout: cards
+            size: huge
+            search: true
+            image:
+              cover: true
+              ratio: 12/7
+            template: package
   seo: seo/page

site/snippets/footer.php

@@ -18,8 +18,8 @@
 
     <div class="list-links">
       <ul>
-        <li><a target="_blank" href="#">Mentions légales</a></li>
+        <li><a target="_blank" href="<?= page('mentions-legales')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Legal notices' : 'Mentions légales' ?></a></li>
-        <li><a target="_blank" href="#">Politique de confidentialité</a></li>
+        <li><a target="_blank" href="<?= page('politique-de-confidentialite')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Privacy policy' : 'Politique de confidentialité' ?></a></li>
       </ul>
       <ul class="hightlight">
         <li><a target="_blank" href="#">Contact</a></li>

site/snippets/header.php

@@ -43,10 +43,10 @@
 
     <nav id="nav-highlight">
         <ul>
-            <li><a href="/enquetes">Enquêtes</a></li>
+          <li><a href="<?= page('enquetes')->url() ?>"><?= t('investigations.title') ?></a></li>
-            <li><a href="/impacts">Impacts</a></li>
+          <li><a href="<?= page('impacts')->url() ?>"><?= t('impacts.title') ?></a></li>
-             <li><a href="/laboratoire">Laboratoire</a></li>
+          <li><a href="<?= page('ressources')->url() ?>"><?= t('resources.title') ?></a></li>
-            <li class="support"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
+          <li class="support highlight"><a href="https://soutenir.index.ngo/" target="_blank" rel="noopener"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Support us' : 'Soutenez-nous' ?></a></li>
         </ul>
     </nav>
 

site/snippets/nav.php

@@ -1,4 +1,5 @@
 <div id="site-menu">
+    <div class="site-menu__inner">
 <p class="baseline">Index est une ONG d’investigation numérique au service du public,
 de la vérité et de la justice.</p>
 
@@ -29,18 +30,15 @@ de la vérité et de la justice.</p>
 
 <nav id="nav-aside">
     <ul>
+        <li class="support highlight"><a href="https://soutenir.index.ngo/" target="_blank" rel="noopener"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Support us' : 'Soutenez-nous' ?></a></li>
         <li><a href="<?= page('contact')->url() ?>">Contact</a></li>
+        <li><a href="https://shop.index.ngo/" target="_blank" rel="noopener"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Shop' : 'Boutique' ?></a></li>
         <li><a href="<?= page('newsletter')->url() ?>">Newsletter</a></li>
-        <li class="support highlight"><a href="#">Soutenez-nous</a></li>
     </ul>
 </nav>
 
-<nav id="nav-legal">
+
-    <ul>
-        <li><a href="<?= page('mentions-legales')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Legal notices' : 'Mentions légales' ?></a></li>
-        <li><a href="<?= page('politique-de-confidentialite')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Privacy policy' : 'Politique de confidentialité' ?></a></li>
-    </ul>
-</nav>
 
 <?php snippet('socials') ?>
 </div>
+</div>

site/templates/investigations.php

@@ -4,11 +4,11 @@
 <header class="page__header">
     <h2 class="page__title"><?= $page->title() ?></h2>
 
-    <div class="description-medium">
+    <?php if ($page->chapo()->isNotEmpty()): ?>
-    <p>
+    <div class="page__description">
-        <?= $page->chapo() ?>
+        <p><?= $page->chapo() ?></p>
-    </p>
     </div>
+    <?php endif ?>
 </header>
 
 

site/templates/packages.php

@@ -6,7 +6,7 @@
     <h2 class="page__title"><?= $page->title() ?></h2>
 
     <?php if ($page->chapo()->isNotEmpty()): ?>
-    <div class="description-medium">
+    <div class="page__description">
         <p><?= $page->chapo() ?></p>
     </div>
     <?php endif ?>