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

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;