From 893d173c59e99fe8f28dd4bace0dfaa4a540b300 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 10 Sep 2024 08:49:09 +0200
Subject: [PATCH] create projects store

---
 src/components/Inspirations.vue | 296 ++++++++++++++++++++++++++------
 src/components/Menu.vue         | 131 ++++++++++----
 src/components/Projects.vue     |  15 +-
 src/stores/api.js               |   2 +-
 src/stores/projects.js          |  12 ++
 src/views/Inspirations.vue      |  10 +-
 6 files changed, 360 insertions(+), 106 deletions(-)
 create mode 100644 src/stores/projects.js

diff --git a/src/components/Inspirations.vue b/src/components/Inspirations.vue
index 9168149..92eb9f3 100644
--- a/src/components/Inspirations.vue
+++ b/src/components/Inspirations.vue
@@ -9,8 +9,14 @@
     <TabPanel :projects="data.children" :currentTab="currentTab" />
   </template>
   -->
-  
-  <div id="inspiration-select" class="flex" style="--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')">
+
+  <div
+    id="inspiration-select"
+    class="flex"
+    style="
+      --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    "
+  >
     <label for="inspirations">Choisir une inspiration</label>
     <select id="inspirations">
       <option value="shape-of-nature" selected>Shape of Nature</option>
@@ -20,79 +26,262 @@
 
   <!-- TabPanel -->
   <section class="inspiration">
-    <header class="flex | text-center" style="--image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')"> <!-- $inspiration->cover()->url() -->
-      <h2 class="inspiration__title | font-serif | text-lg | new">Shape of Nature</h2> <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
-      <time class="inspiration__date | font-medium | text-sm" datatime="2024-04">Avril 2024</time> <!-- $inspiration->date() -->
-      <p class="inspiration__description">Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in consequat porta mauris hendrerit malesuada viverra turpis.</p> <!-- $inspiration->description() -->
+    <header
+      class="flex | text-center"
+      style="
+        --image: url('https://plus.unsplash.com/premium_photo-1675626791716-7f74187592f1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+      "
+    >
+      <!-- $inspiration->cover()->url() -->
+      <h2 class="inspiration__title | font-serif | text-lg | new">
+        Shape of Nature
+      </h2>
+      <!-- $inspiration->title() + class="new" if $inspiration->new()->isTrue() -->
+      <time class="inspiration__date | font-medium | text-sm" datatime="2024-04"
+        >Avril 2024</time
+      >
+      <!-- $inspiration->date() -->
+      <p class="inspiration__description">
+        Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
+        consequat porta mauris hendrerit malesuada viverra turpis.
+      </p>
+      <!-- $inspiration->description() -->
     </header>
     <div class="grid masonry">
-      <figure class="flex" style="--rows:2">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 2">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="false"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
-      <figure class="flex"  style="--rows:3">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 3">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="true"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
-      <figure class="flex" style="--rows:2">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 2">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="false"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
-      <figure class="flex" style="--rows:3">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 3">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="true"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
-      <figure class="flex" style="--rows:2">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 2">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="false"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
-      <figure class="flex" style="--rows:3">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 3">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="true"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
-      <figure class="flex" style="--rows:2">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="false" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 2">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="false"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1683099788350-82529fe1ba75?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
-      <figure class="flex" style="--rows:3">
-        <button class="favorite" aria-label="Ajouter aux favoris" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');">
-          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z" fill="currentColor" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <figure class="flex" style="--rows: 3">
+        <button
+          class="favorite"
+          aria-label="Ajouter aux favoris"
+          aria-pressed="true"
+          onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true');"
+        >
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 40 40"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.49289 22.5821C5.50453 22.5937 5.51646 22.6051 5.52866 22.6161L19.3287 35.1161C19.7097 35.4613 20.2903 35.4613 20.6713 35.1161L34.4713 22.6161C34.4835 22.6051 34.4955 22.5937 34.5071 22.5821C38.7044 18.3848 37.6545 12.2706 34.2529 8.87931C32.5281 7.15976 30.1519 6.07621 27.4679 6.26656C25.0319 6.43932 22.4673 7.65151 20 10.1579C17.5321 7.65095 14.9651 6.43633 12.5266 6.25964C9.83985 6.06497 7.45863 7.14246 5.72977 8.85914C2.3178 12.247 1.27257 18.3618 5.49289 22.5821Z"
+              fill="currentColor"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
           </svg>
         </button>
-        <img src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww" alt="">
+        <img
+          src="https://images.unsplash.com/photo-1541643600914-78b084683601?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cGFyZnVtJTIwcGFja2FnaW5nfGVufDB8fDB8fHww"
+          alt=""
+        />
       </figure>
     </div>
   </section>
-
 </template>
 
 <script setup>
@@ -109,7 +298,6 @@ api.fetchPageData("inspirations").then((res) => (data.value = res));
 </script>
 
 <style scoped>
-
 /* Select */
 #inspiration-select {
   --direction: column;
@@ -125,7 +313,7 @@ api.fetchPageData("inspirations").then((res) => (data.value = res));
   margin-bottom: var(--space-16);
 }
 #inspiration-select::before {
-  content: '';
+  content: "";
   position: absolute;
   left: var(--space-8);
   width: 2.75rem;
@@ -144,8 +332,7 @@ api.fetchPageData("inspirations").then((res) => (data.value = res));
   --row-gap: var(--space-8);
   clear: both;
   height: 15rem; /* 240px */
-  background: 
-    linear-gradient(to right, transparent, var(--color-white-50) 100%),
+  background: linear-gradient(to right, transparent, var(--color-white-50) 100%),
     var(--image);
   background-repeat: no-repeat;
   background-size: cover;
@@ -154,7 +341,7 @@ api.fetchPageData("inspirations").then((res) => (data.value = res));
   border-radius: var(--rounded-lg);
 }
 .inspiration__title.new::after {
-  content: 'Nouveauté';
+  content: "Nouveauté";
   display: inline-block;
   font-family: var(--font-sans);
   font-size: var(--text-sm);
@@ -166,12 +353,11 @@ api.fetchPageData("inspirations").then((res) => (data.value = res));
   padding: var(--space-4) var(--space-12);
   transform: translateY(-0.1em);
 }
-.inspiration__date, 
+.inspiration__date,
 .inspiration__description {
   color: var(--color-grey-700);
 }
 
-
 /* Masonry */
 .masonry {
   --gap: var(--space-8);
@@ -194,7 +380,6 @@ api.fetchPageData("inspirations").then((res) => (data.value = res));
   object-fit: cover;
 }
 
-
 /* Favorite button */
 .favorite {
   position: absolute;
@@ -207,5 +392,4 @@ api.fetchPageData("inspirations").then((res) => (data.value = res));
 .favorite[aria-pressed="true"] {
   color: var(--color-brand);
 }
-
 </style>
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 7403cc1..08d5bed 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -1,8 +1,33 @@
 <template>
-  <button @click="toggleExpand()" class="btn btn--white | rounded-lg" aria-controls="menu" :aria-expanded="isExpanded">
-    <svg aria-labelledby="menu-toggle" class="icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <title id="menu-toggle">{{ isExpanded ? 'Masquer le menu' : 'Afficher le menu' }}</title>
-    <path d="M10.6751 2.625L3.00007 10.3125C2.94028 10.3686 2.89263 10.4364 2.86005 10.5116C2.82748 10.5869 2.81067 10.668 2.81067 10.75C2.81067 10.832 2.82748 10.9131 2.86005 10.9884C2.89263 11.0636 2.94028 11.1314 3.00007 11.1875L10.6751 18.875M17.1876 2.625L9.50007 10.3125C9.38555 10.4293 9.32141 10.5864 9.32141 10.75C9.32141 10.9136 9.38555 11.0707 9.50007 11.1875L17.1876 18.875" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Changer le Menu actif
+    class="active" sur le <li>
+    aria-current="page" sur le <a>
+  -->
+  <button
+    @click="toggleExpand()"
+    class="btn btn--white | rounded-lg"
+    aria-controls="menu"
+    :aria-expanded="isExpanded"
+  >
+    <svg
+      aria-labelledby="menu-toggle"
+      class="icon"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title id="menu-toggle">
+        {{ isExpanded ? "Masquer le menu" : "Afficher le menu" }}
+      </title>
+      <path
+        d="M10.6751 2.625L3.00007 10.3125C2.94028 10.3686 2.89263 10.4364 2.86005 10.5116C2.82748 10.5869 2.81067 10.668 2.81067 10.75C2.81067 10.832 2.82748 10.9131 2.86005 10.9884C2.89263 11.0636 2.94028 11.1314 3.00007 11.1875L10.6751 18.875M17.1876 2.625L9.50007 10.3125C9.38555 10.4293 9.32141 10.5864 9.32141 10.75C9.32141 10.9136 9.38555 11.0707 9.50007 11.1875L17.1876 18.875"
+        stroke="currentColor"
+        stroke-width="1.25"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
   </button>
   <div v-if="isExpanded" id="menu" class="flex | rounded-lg">
@@ -11,19 +36,18 @@
     </header>
     <nav class="w-full | flow">
       <ul class="flex">
-        <li data-icon="home" class="active">
-          <a href="/" aria-current="page">Home</a>
-        </li>
-        <li data-icon="megaphone" data-count="4">
-          <a href="/notifications">Notifications</a>
-        </li>
-        <li data-icon="calendar">
-          <a href="/reunions">Réunions</a>
-          <span class="pill pill--secondary">Dans 2h</span>
-        </li>
-        <li data-icon="inspiration">
-          <a href="/inspirations">Inspirations</a>
-          <span class="pill pill--secondary">Nouveauté</span>
+        <li
+          v-for="mainItem in mainItems"
+          data-icon="calendar"
+          :key="mainItem.path"
+          :class="{ active: isCurrent(mainItem) }"
+        >
+          <a :href="mainItem.path" :aria-current="isCurrent(mainItem)">{{
+            mainItem.title
+          }}</a>
+          <span v-if="mainItem.pill" class="pill pill--secondary">{{
+            mainItem.pill
+          }}</span>
         </li>
       </ul>
       <details open>
@@ -56,8 +80,46 @@
   </div>
 </template>
 
-<style scoped>
+<script setup>
+import { ref } from "vue";
 
+const isExpanded = ref(true);
+
+const mainItems = [
+  {
+    title: "Home",
+    path: "/",
+    icon: "home",
+  },
+  {
+    title: "Notifications",
+    path: "/notifications",
+    icon: "megaphone",
+  },
+  {
+    title: "Réunions",
+    path: "/reunions",
+    icon: "calendar",
+    pill: "Dans 2h",
+  },
+  {
+    title: "Inspirations",
+    path: "/inspirations",
+    icon: "inspirations",
+    pill: "Nouveauté",
+  },
+];
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+}
+
+function isCurrent(navItem) {
+  return navItem.path === window.location.pathname;
+}
+</script>
+
+<style scoped>
 button[aria-controls="menu"] {
   position: fixed;
   z-index: 10;
@@ -116,7 +178,7 @@ button[aria-controls="menu"][aria-expanded="false"] {
   z-index: 1;
 }
 #menu header::before {
-  content: '';
+  content: "";
   display: block;
   position: absolute;
   top: -1rem;
@@ -124,7 +186,12 @@ button[aria-controls="menu"][aria-expanded="false"] {
   right: 0;
   bottom: -2rem;
   z-index: -1;
-  background: linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 75%, transparent 100%);
+  background: linear-gradient(
+    to bottom,
+    var(--color-background) 0%,
+    var(--color-background) 75%,
+    transparent 100%
+  );
 }
 
 #menu nav {
@@ -169,7 +236,7 @@ button[aria-controls="menu"][aria-expanded="false"] {
 }
 
 #menu li a::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -184,7 +251,13 @@ button[aria-controls="menu"][aria-expanded="false"] {
 #menu details {
   font-family: var(--font-serif);
   background-size: 1px 21px;
-  background-image: repeating-linear-gradient(0deg, var(--color-grey-50), var(--color-grey-50) 1px, transparent 1px, transparent);
+  background-image: repeating-linear-gradient(
+    0deg,
+    var(--color-grey-50),
+    var(--color-grey-50) 1px,
+    transparent 1px,
+    transparent
+  );
   background-repeat: repeat-x;
 }
 #menu details > summary {
@@ -196,12 +269,12 @@ button[aria-controls="menu"][aria-expanded="false"] {
   width: fit-content;
 }
 #menu details .new::after {
-  content: 'Nouvelles modifications';
+  content: "Nouvelles modifications";
   color: transparent;
   position: relative;
   display: inline-block;
-  width: .375rem; /* 6px */
-  height: .375rem; /* 6px */
+  width: 0.375rem; /* 6px */
+  height: 0.375rem; /* 6px */
   border-radius: var(--rounded-full);
   background-color: var(--color-primary-100);
   margin-left: var(--space-8);
@@ -209,11 +282,3 @@ button[aria-controls="menu"][aria-expanded="false"] {
   overflow: hidden;
 }
 </style>
-
-<script setup>
-import { ref } from 'vue';
-const isExpanded = ref(true);
-function toggleExpand() {
-  isExpanded.value = !isExpanded.value;
-} 
-</script>
diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index d1c7c09..def905e 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -1,22 +1,21 @@
 <template>
   <h2 id="tabslist" class="sr-only">Projets</h2>
-  <template v-if="data">
-    <Tabs :projects="data.children" @update:currentTab="changeTab" />
-    <TabPanel :projects="data.children" :currentTab="currentTab" />
+  <template v-if="projects.children">
+    <Tabs :projects="projects.children" @update:currentTab="changeTab" />
+    <TabPanel :projects="projects.children" :currentTab="currentTab" />
   </template>
 </template>
 <script setup>
 import Tabs from "./Tabs.vue";
 import TabPanel from "./TabPanel.vue";
-import { useApiStore } from "../stores/api";
+import { useProjectsStore } from "../stores/projects";
 import { ref } from "vue";
+import { storeToRefs } from "pinia";
+
+const { projects } = storeToRefs(useProjectsStore());
 
-const data = ref(null);
 const currentTab = ref("current");
 
-const api = useApiStore();
-api.fetchPageData("projects").then((res) => (data.value = res));
-
 function changeTab(newValue) {
   currentTab.value = newValue;
 }
diff --git a/src/stores/api.js b/src/stores/api.js
index fcac154..c073916 100644
--- a/src/stores/api.js
+++ b/src/stores/api.js
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-export const useApiStore = defineStore("counter", () => {
+export const useApiStore = defineStore("api", () => {
   /**
    * Asynchronously fetches JSON data corresponding to a given path.
    *
diff --git a/src/stores/projects.js b/src/stores/projects.js
new file mode 100644
index 0000000..74ea97d
--- /dev/null
+++ b/src/stores/projects.js
@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+import { useApiStore } from "./api.js";
+import { ref } from "vue";
+
+export const useProjectsStore = defineStore("projects", () => {
+  const projects = ref([]);
+
+  const api = useApiStore();
+  api.fetchPageData("projects").then((json) => (projects.value = json));
+
+  return { projects };
+});
diff --git a/src/views/Inspirations.vue b/src/views/Inspirations.vue
index b5a768c..075566e 100644
--- a/src/views/Inspirations.vue
+++ b/src/views/Inspirations.vue
@@ -1,11 +1,7 @@
 <template>
   <h1 class="sr-only">{{ data.content.title }}</h1>
   <div class="with-sidebar">
-    <!-- Changer le Menu actif
-      class="active" sur le <li>
-      aria-current="page" sur le <a>
-    -->
-    <Menu /> 
+    <Menu />
     <main>
       <Inspirations />
     </main>
@@ -23,6 +19,4 @@ const { data } = defineProps({
 // ....
 </script>
 
-<style scoped>
-  
-</style>
\ No newline at end of file
+<style scoped></style>