feat: implemente drawer for header on mobile and tablet screens

app/app.vue

@@ -1,12 +1,10 @@
 <template>
   <UApp :locale="fr">
-    <div class="flex flex-col min-h-screen">
+    <div class="flex flex-col min-h-screen img-background">
       <HeaderItem />
-      <NuxtLayout>
-        <div class="pt-28 px-4 flex-1">
-          <NuxtPage />
-        </div>
-      </NuxtLayout>
+      <main class="pt-28 px-4 flex-1">
+        <NuxtPage />
+      </main>
       <FooterItem />
     </div>
   </UApp>

app/assets/css/main.css

@@ -5,6 +5,20 @@ body {
   font-family: var(--font-main);
   background-color: var(--depth);
   scroll-behavior: smooth;
+  background-image: url('https://res.cloudinary.com/dbihnwsar/image/upload/f_auto,q_auto/v1772911031/EgNIdozXsAEzP9m-protected-intensity-LOW-V2_q1xony.jpg');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  background-color: #f5f0eb;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.92);
+  z-index: 0;
+  pointer-events: none;
 }
 
 .font-heading {

app/components/EntitesItem.vue

@@ -3,7 +3,7 @@
     v-for="entite in props.entites"
     :key="entite.id"
     :to="formateLink(entite.id)"
-    class="border rounded-lg p-4 hover:shadow-lg hover:bg-white transition flex gap-2"
+    class="border rounded-lg p-4 backdrop-blur-xs hover:shadow-lg hover:bg-white transition flex gap-2"
   >
     <div v-if="entite.image_url" class="w-20 h-20 rounded-full overflow-hidden shrink-0">
       <NuxtImg

app/components/HeaderItem.vue

@@ -1,40 +1,133 @@
 <template>
   <header
     v-if="data"
-    class="fixed inset-x-0 w-[90vw] mx-auto bg-white/30 rounded-full mt-4 backdrop-blur-sm z-50 shadow-lg"
+    class="fixed inset-x-0 w-[90vw] mx-auto bg-white/70 md:bg-white/50 rounded-full mt-4 backdrop-blur-xs z-50 shadow-lg"
   >
     <nav class="flex items-center justify-between p-4">
       <NuxtLink
         :to="data.title.link"
         :aria-label="data.title.ariaLabel"
-        class="font-heading text-2xl flex items-center gap-2"
+        class="font-heading text-xl lg:text-2xl flex items-center gap-2"
       >
         <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
         {{ data.title.text }}
       </NuxtLink>
-      <div class="flex items-center gap-6">
+
+      <div class="hidden md:flex items-center text-sm lg:text-base gap-6 lg:gap-9">
         <NuxtLink
           v-for="page in data.pages"
           :key="page.text"
           :to="page.link"
           :aria-label="page.text"
-          class=""
         >
           {{ page.text }}
         </NuxtLink>
       </div>
+
       <NuxtLink
         :to="data.contact.link"
         :aria-label="data.contact.ariaLabel"
-        class="flex items-center gap-1 rounded-full px-8 py-2 bg-black text-white"
+        class="hidden md:flex items-center text-xs rounded-full px-4 py-1 bg-black text-white lg:text-sm lg:px-6 hover:bg-gray-600 transition-colors"
       >
-        <!-- <UIcon name="line-md:chat-round-dots-filled" /> -->
         {{ data.contact.text }}
       </NuxtLink>
+      <button
+        class="mr-2 md:hidden h-10 w-10 flex items-center justify-center rounded-md hover:bg-black/10 transition-colors"
+        @click="openDrawer"
+      >
+        <UIcon name="line-md:align-justify" class="text-2xl" />
+      </button>
     </nav>
   </header>
+
+  <Teleport v-if="data" to="body">
+    <Transition name="fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 bg-black/30 z-50 backdrop-blur-sm"
+        @click="closeDrawer"
+      />
+    </Transition>
+
+    <Transition name="slide">
+      <div
+        v-if="isOpen"
+        class="fixed top-0 right-0 h-full w-75 bg-white z-50 shadow-xl p-6 flex flex-col gap-8"
+      >
+        <button
+          class="self-end h-10 w-10 flex items-center justify-center rounded-md hover:bg-black/10 transition-colors"
+          @click="closeDrawer"
+        >
+          <UIcon name="line-md:close" class="text-2xl" />
+        </button>
+
+        <NuxtLink
+          :to="data.title.link"
+          class="font-heading text-2xl flex items-center gap-2"
+          @click="closeDrawer"
+        >
+          <UIcon name="fluent-emoji-high-contrast:leaf-fluttering-in-wind" />
+          {{ data.title.text }}
+        </NuxtLink>
+
+        <nav class="flex flex-col gap-6 text-lg">
+          <NuxtLink
+            v-for="page in data.pages"
+            :key="page.text"
+            :to="page.link"
+            class="w-full text-center"
+            @click="closeDrawer"
+          >
+            {{ page.text }}
+          </NuxtLink>
+        </nav>
+
+        <NuxtLink
+          :to="data.contact.link"
+          class="mt-auto rounded-full bg-black text-white text-center py-2 px-4 hover:bg-gray-600 transition-colors"
+          @click="closeDrawer"
+        >
+          {{ data.contact.text }}
+        </NuxtLink>
+      </div>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
   const { data } = await useAsyncData('header', () => queryCollection('header').first())
+
+  const isOpen = ref(false)
+
+  const closeDrawer = () => {
+    isOpen.value = false
+  }
+
+  const openDrawer = () => {
+    isOpen.value = true
+  }
+
+  defineShortcuts({
+    o: () => (isOpen.value = !isOpen.value),
+  })
 </script>
+
+<style lang="css">
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: transform 0.3s ease;
+  }
+  .slide-enter-from,
+  .slide-leave-to {
+    transform: translateX(100%);
+  }
+</style>

app/components/HeroItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="mx-auto w-[75%] max-w-7xl flex flex-row gap-4 rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
+    class="mx-auto w-[75%] max-w-7xl flex flex-row gap-4 backdrop-blur-xs rounded-4xl bg-white/30 p-10 shadow-lg items-center mt-15 h-150"
   >
     <div class="w-[30%] h-full flex flex-col gap-4 text-center justify-center mx-12">
       <h1 class="text-4xl font-heading">{{ data?.hero?.heading }}</h1>
@@ -62,7 +62,7 @@
     if (item === 'genealogie') {
       return '/genealogie'
     }
-    return '#search'
+    return '#weekipedia'
   }
 
   //TODO remove this when all images will be on cloudinary

app/components/SearchItem.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
     <div id="weekipedia" class="pt-30 mb-10 max-w-7xl mx-auto">
-      <h1 class="font-heading text-5xl mb-6">Encyclopédie</h1>
+      <h1 class="font-heading text-5xl mb-6">Wëekipedia</h1>
       <div class="mb-6 space-y-4">
         <input
           v-model="searchValue"
           type="text"
           placeholder="Rechercher..."
           class="border px-4 py-2 rounded w-full"
         />
-        <div class="flex gap-2">
+        <div class="flex flex-wrap gap-2">
           <UButton
             :color="typeFilter === 'tous' ? 'primary' : 'secondary'"
             class="text-white px-4 py-2 rounded"

app/pages/entites/[id].vue

@@ -14,7 +14,7 @@
         <UIcon name="gg:gender-male" />
       </div>
       <p class="capitalize">{{ entite.type }}</p>
-      <p>Description : {{ entite.description }}</p>
+      <p class="whitespace-pre-line">{{ entite.description }}</p>
       <p v-if="entite.vivant">Espèce vivante</p>
       <p v-if="entite.dangereux">Espèce dangeureuse</p>
       <p v-if="entite.hostile">Espèce hostile</p>

content/header/navigation.json

@@ -2,7 +2,7 @@
   "title": {
     "img": "/images/test.png",
     "ariaLabel": "Logo de Weena et la légende de Noor",
-    "text": "Wiki Weëna et la Légende de Noor",
+    "text": "Weëna et la Légende de Noor",
     "link": "/"
   },
   "contact": {