merge

src/components/Menu.vue

@@ -1,8 +1,4 @@
 <template>
-  <!-- Changer le Menu actif
-    class="active" sur le <li>
-    aria-current="page" sur le <a>
-  -->
   <button
     @click="toggleExpand()"
     class="btn btn--white | rounded-xl"
@@ -42,9 +38,11 @@
           :key="mainItem.path"
           :class="{ active: isCurrent(mainItem) }"
         >
-          <a :href="mainItem.path" :aria-current="isCurrent(mainItem)">{{
-            mainItem.title
-          }}</a>
+          <router-link
+            :to="mainItem.path"
+            :aria-current="isCurrent(mainItem)"
+            >{{ mainItem.title }}</router-link
+          >
           <span v-if="mainItem.pill" class="pill pill--secondary">{{
             mainItem.pill
           }}</span>
@@ -54,7 +52,9 @@
         <summary>Projets en cours</summary>
         <ul>
           <li v-for="project in currentProjects">
-            <a :href="project.url" class="new">{{ project.title }}</a>
+            <router-link :to="project.url" class="new">{{
+              project.title
+            }}</router-link>
           </li>
         </ul>
       </details>
@@ -62,7 +62,9 @@
         <summary>Projets archivés</summary>
         <ul>
           <li v-for="project in archivedProjects">
-            <a :href="project.url" class="new">{{ project.title }}</a>
+            <router-link :to="project.url" class="new">{{
+              project.title
+            }}</router-link>
           </li>
         </ul>
       </details>
@@ -70,10 +72,10 @@
     <footer class="w-full">
       <ul class="flex">
         <li data-icon="user">
-          <a href="#">Profil</a>
+          <router-link to="/profil">Profil</router-link>
         </li>
         <li data-icon="logout">
-          <a href="/logout.php">Déconnexion</a>
+          <router-link to="/logout">Déconnexion</router-link>
         </li>
       </ul>
     </footer>
@@ -84,7 +86,9 @@
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
 import { useProjectsStore } from "../stores/projects";
+import { useRoute } from "vue-router";
 
+const route = useRoute();
 const isExpanded = ref(true);
 const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
 
@@ -118,7 +122,7 @@ function toggleExpand() {
 }
 
 function isCurrent(navItem) {
-  return navItem.path === window.location.pathname;
+  return navItem.path === route.path;
 }
 </script>
 
@@ -254,7 +258,6 @@ button[aria-controls="menu"][aria-expanded="false"] {
   background-color: var(--color-primary-10);
 }
 
-
 #menu details {
   font-family: var(--font-serif);
   background-size: 1px 21px;