Add disabled style to menu item #5

src/components/Menu.vue

@@ -36,12 +36,11 @@
           v-for="mainItem in mainItems"
           :data-icon="mainItem.icon"
           :key="mainItem.path"
-          :class="{ active: isCurrent(mainItem) }"
+          :class="{ active: isCurrent(mainItem), disabled: mainItem.disabled }"
         >
           <router-link
             :to="mainItem.path"
             :aria-current="isCurrent(mainItem)"
-            :disabled="mainItem.disabled ? true : undefined"
             >{{ mainItem.title }}</router-link
           >
           <span v-if="mainItem.pill" class="pill pill--secondary">{{
@@ -108,7 +107,7 @@ const mainItems = [
     title: "Réunions",
     path: "/reunions",
     icon: "calendar",
-    pill: "Dans 2h",
+    pill: false,
     disabled: true,
   },
   {
@@ -232,6 +231,13 @@ button[aria-controls="menu"][aria-expanded="false"] {
   min-height: 2.75rem; /* 44px */
 }
 
+#menu li.disabled {
+  opacity: .5;
+}
+#menu li.disabled a::before {
+  cursor: not-allowed;
+}
+
 #menu li[data-count]::after {
   content: attr(data-count);
   display: inline-block;