Créer le nouveau header (du simulateur) #267

src/lib/components/NavBar.svelte

@@ -79,27 +79,30 @@
   }
 </script>
 
-<header class="relative z-50 w-full md:top-0">
+<nav class="relative z-50 w-full md:top-0">
   <div
-    class="mx-auto bg-le-jaune-very-dark px-2 shadow-md md:h-12 md:px-5 2xl:h-14"
+    class="mx-auto bg-le-jaune-very-dark px-2 shadow-md md:h-12 md:px-3 2xl:h-14"
   >
     <!-- Répartition des blocs sur la barre de navigation -->
     <div class="hidden h-full justify-between md:flex">
       <!-- Bloc gauche pour le logo AN et le logo "Simulateur LEXIMPACT" -->
       <div
-        class="flex h-full flex-1 items-center justify-between gap-2 xl:gap-5"
+        class="basis-1/3 h-full flex items-center justify-between gap-2 xl:gap-5"
       >
         <!-- Bouton accueil -->
         <a
           href={portalUrl}
-          class="flex h-full items-center gap-5 rounded-sm text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+          class="flex h-full items-center px-2 gap-5 rounded-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
         >
           <img
             class="w-12 items-start self-start 2xl:w-14"
             src="/logo-assemblee-nationale-blanc-blanc.png"
             alt="Logo de l'Assemblée nationale"
           />
-          <span class="hidden xl:inline-flex">Accueil</span>
+          <span class="hidden xl:inline-flex flex-col items-center">
+            <span class="text-xs tracking-widest leading-4">Accueil</span>
+            <span class="text-xxs tracking-wider">Leximpact</span>
+          </span>
         </a>
 
         <!-- Logo -->
@@ -114,14 +117,18 @@
             </div>
           -->
           <div
-            class="flex h-full flex-col justify-center rounded p-1 text-white"
+            class="h-full flex flex-col justify-center items-end rounded p-1 text-white"
           >
-            <span class="text-md !font-light !leading-5 2xl:text-lg"
-              >Simulateur</span
+            <span
+              class="text-sm uppercase font-light !leading-4 tracking-widest 2xl:text-lg"
             >
-            <span class="text-lg !uppercase !leading-4 2xl:text-xl"
-              >LexImpact</span
+              Leximpact
+            </span>
+            <span
+              class="text-md uppercase leading-4 tracking-wider 2xl:text-xl"
             >
+              Socio-Fiscal
+            </span>
           </div>
         </a>
       </div>
@@ -130,8 +137,7 @@
       <NavBarSearch isSearchActive={$isSearchActive} bind:searchQuery />
 
       <!-- Bloc droite pour les commandes avancées-->
-      <nav class="flex flex-1">
-        <ul class="flex flex-1 items-center justify-end gap-2 xl:gap-5">
+      <ul class="basis-1/3 flex items-center justify-end gap-2 xl:gap-5 pr-2">
         <!--Bouton tutoriel-->
         <li>
           <button
@@ -190,15 +196,11 @@
                     class="flex gap-1 rounded-sm border-b px-4 py-3 text-sm uppercase text-gray-600 hover:bg-gray-300 hover:bg-opacity-20 hover:text-black focus:outline-none"
                     on:click={() => goto(logoutUrl)}
                   >
-                      <span
-                        class="hidden whitespace-nowrap pl-1 md:inline-block"
+                    <span class="hidden whitespace-nowrap pl-1 md:inline-block"
                       >Se déconnecter</span
                     >
 
-                      <iconify-icon
-                        class="text-lg"
-                        icon="ri-logout-box-r-line"
-                      />
+                    <iconify-icon class="text-lg" icon="ri-logout-box-r-line" />
                   </button>
                 </div>
               </PersistentPopover>
@@ -206,18 +208,20 @@
           {/if}
         {/if}
       </ul>
-      </nav>
     </div>
 
     <!--Menu écran téléphone-->
     <div class="flex flex-col md:hidden">
-      <div class="flex h-14 items-center justify-between">
+      <div class="flex h-12 items-center justify-between">
         <!-- Première section pour le logo AN-->
-        <div class="flex flex-1">
+        <div class="flex flex-1 self-start">
           <!-- logo assemblee nationale -->
-          <a class="w-16" href={portalUrl}>
+          <a
+            class="w-16 hover:bg-gray-400 hover:bg-opacity-20 active:bg-gray-400 active:bg-opacity-40"
+            href={portalUrl}
+          >
             <img
-              class=" items-start object-scale-down px-2 pb-2 pt-0"
+              class="items-start object-scale-down px-2 pb-1 pt-0"
               src="/logo-assemblee-nationale-blanc-blanc.png"
               alt="Logo de l'Assemblée nationale"
             />
@@ -227,10 +231,10 @@
         <!-- Deuxième section pour le logo LexImpat-->
         <div class="flex">
           <div
-            class="flex h-full flex-1 flex-col items-center rounded p-1 text-white"
+            class="flex h-full flex-1 flex-col items-center rounded p-1 text-white uppercase"
           >
-            <span class="text-lg font-light leading-5">Simulateur</span>
-            <span class="text-xl uppercase leading-5">LexImpact</span>
+            <span class="font-light leading-4">LexImpact</span>
+            <span class="text-lg leading-5">Socio-Fiscal</span>
           </div>
           <!-- PLF
             <div
@@ -274,7 +278,7 @@
                 To: "opacity-0 scale-95"
             -->
           <div
-            class="absolute right-0 top-0 z-50 mt-28 flex w-full flex-col rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            class="absolute right-0 top-0 z-50 mt-24 flex w-full flex-col rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             role="menu"
             aria-orientation="vertical"
             aria-labelledby="user-menu"
@@ -344,7 +348,7 @@
 
   {#if searchQuery.length > 0}
     <div
-      class="absolute top-28 w-full overflow-hidden rounded-b-lg border bg-white shadow-lg md:left-[calc((100%-350px)/2)] md:top-12 md:w-[350px] lg:left-[calc((100%-500px)/2)] lg:w-[500px] 2xl:left-[calc((100%-600px)/2)] 2xl:top-14 2xl:w-[600px]"
+      class="absolute top-24 w-full overflow-hidden rounded-b-lg border bg-white shadow-lg md:left-[calc((100%-350px)/2)] md:top-12 md:w-[350px] lg:left-[calc((100%-500px)/2)] lg:w-[500px] 2xl:left-[calc((100%-600px)/2)] 2xl:top-14 2xl:w-[600px]"
     >
       <ul class="max-h-56 list-none overflow-y-auto py-2 md:max-h-[80vh]">
         {#if searchResults.length > 0}
@@ -379,4 +383,4 @@
       </ul>
     </div>
   {/if}
-</header>
+</nav>

src/lib/components/search/NavBarSearch.svelte

@@ -3,17 +3,17 @@
   export let searchQuery: string
 </script>
 
-<section class="flex h-14 items-center md:h-full">
+<section class="flex items-center h-12 pt-1.5 pb-2 md:p-0 md:h-full">
   <div
     class="flex w-full overflow-hidden rounded-t-md border-b-2 border-b-le-jaune bg-gray-100 px-2 md:w-[350px] lg:w-[500px] 2xl:w-[600px]"
   >
     <iconify-icon
-      class="mx-1 self-center p-1 text-lg text-black"
+      class="md:mx-1 self-center p-1 text-lg text-black"
       icon="ri-search-line"
     />
     <input
       autocomplete="off"
-      class="w-full px-3 py-2 border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
+      class="w-full px-1 py-1.5 md:px-3 md:py-2 border-none bg-transparent text-sm text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-base"
       id="navbar_search"
       placeholder="impôt sur le revenu, CSG, ..."
       type="search"
@@ -21,7 +21,7 @@
     />
     {#if isSearchActive}
       <iconify-icon
-        class="mx-1 cursor-pointer self-center p-1 text-black"
+        class="md:mx-1 cursor-pointer self-center p-1 text-black"
         icon="ri-close-line"
         width="20"
         height="20"

tailwind.config.cjs

@@ -70,6 +70,9 @@ const config = {
           950: "#161501",
         },
       },
+      fontSize: {
+        'xxs': ['0.625rem', '0.75rem']
+      },
       keyframes: {
         blinker: {
           "50%": { opacity: "60%" },