somewhat better

src/lib/components/TitleBar.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export let data;
+  const pages = data.pages;
+  let active_page = pages["accueil"];
+  function changePage(pageName: string): void {
+    const pageKey = pageName.toLowerCase();
+    if (pages[pageKey as keyof typeof pages]) {
+      active_page = pages[pageKey as keyof typeof pages];
+    }
+  }
+</script>
+
+<nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
+  <div class="flex items-center justify-between">
+    <a
+      on:click={() => changePage("Accueil")}
+      class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
+      >livecoding.fr</a
+    >
+    <!-- Mobile menu button -->
+    <div on:click={toggleNavbar} class="flex md:hidden">
+      <button
+        type="button"
+        class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-6 h-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+  <div
+    class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
+      ? 'flex'
+      : 'hidden'}"
+  >
+    <a
+      on:click={() => changePage("Evenements")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden"
+      >Évènements</a
+    >
+    <a
+      on:click={() => changePage("Membres")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden">Membres</a
+    >
+    <a
+      on:click={() => changePage("Outils")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden">Outils</a
+    >
+    <a
+      on:click={() => changePage("Guides")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden">Guides</a
+    >
+    <a
+      on:click={() => changePage("Réseaux")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden">Réseaux</a
+    >
+    <a
+      on:click={() => changePage("Ressources")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden"
+      >Ressources</a
+    >
+    <a
+      on:click={() => changePage("Presse")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden">Presse</a
+    >
+    <a
+      on:click={() => changePage("Contact")}
+      class="text-gray-100 hover:text-orange-300 flex md:hidden">Contact</a
+    >
+  </div>
+</nav>
+