fix #5 - Menu : dynamize inspirations 'Nouveautés' label

public/site/blueprints/sections/inspirations.yml

@@ -1,22 +1,9 @@
 type: pages
 headline: Inspirations
 template: inspiration
-layout: table
-columns:
-  title:
-    label: Titre
-    width: 3/12
-  date:
-    label: Date
-    value: "{{ page.date.toDate('YY/MM') }}"
-    width: 1/12
-  new:
-    label: Nouveauté
-    width: 1/12
-  description:
-    width: 7/12
 empty: Pas encore d’inspiration
-image: 
+layout: cards
+image:
   query: page.cover.toFile
   cover: true
-search: true
+search: true

public/site/controllers/site.php

@@ -6,6 +6,7 @@ return function ($page, $kirby, $site) {
   }
   $data = $page->toArray();
   $data['template'] = (string) $page->template();
+  $data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
 
   $userData = [
     "role" => (string) $kirby->user()->role(),

src/components/Menu.vue

@@ -44,9 +44,11 @@
             :aria-current="isCurrent(mainItem)"
             >{{ mainItem.title }}</router-link
           >
-          <span v-if="mainItem.pill" class="pill pill--secondary">{{
-            mainItem.pill
-          }}</span>
+          <span
+            v-if="mainItem.title === 'Notifications' && page?.newInspirations"
+            class="pill pill--secondary"
+            >{{ "Nouveautés" }}</span
+          >
         </li>
       </ul>
       <details v-if="currentProjects.length" open>
@@ -95,11 +97,13 @@ import { ref } from "vue";
 import { useProjectsStore } from "../stores/projects";
 import { useRoute } from "vue-router";
 import { useUserStore } from "../stores/user";
+import { usePageStore } from "../stores/page";
 
 const route = useRoute();
 const isExpanded = ref(true);
 const { user } = storeToRefs(useUserStore());
 const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
+const { page } = storeToRefs(usePageStore());
 
 const mainItems = [
   {
@@ -116,14 +120,12 @@ const mainItems = [
     title: "Réunions",
     path: "/reunions",
     icon: "calendar",
-    pill: false,
     disabled: true,
   },
   {
     title: "Inspirations",
     path: "/inspirations",
     icon: "inspiration",
-    pill: "Nouveauté",
   },
 ];
 
@@ -164,7 +166,9 @@ button[aria-controls="menu"][aria-expanded="false"] {
   padding: 1.125rem;
   transform: rotate(180deg);
 }
-button[aria-controls="menu"][aria-expanded="false"] + main > header:not([role="tablist"]) {
+button[aria-controls="menu"][aria-expanded="false"]
+  + main
+  > header:not([role="tablist"]) {
   margin-left: 4rem;
 }
 
@@ -190,7 +194,7 @@ button[aria-controls="menu"][aria-expanded="false"] + main > header:not([role="t
 @media (max-width: 1023px) {
   button[aria-controls="menu"][aria-expanded="true"] {
     left: 0;
-    margin-top: .4rem;
+    margin-top: 0.4rem;
   }
   #menu {
     position: fixed;