NavBarAffairesSociales.svelte

<script lang="ts">
  import { page, session } from "$app/stores"

  // let open = false
  let openUserMenu = false

  $: pageUrlPath = $page.path.replace(/\/+$/, "") || "/"

  $: title = $session.title

  // function activeMenuItem(href: string) {
  //   return pageUrlPath === href || pageUrlPath.startsWith(href + "/")
  // }
</script>

<nav class="bg-le-jaune h-14 shadow-md max-w-9xl mx-auto px-2 sm:px-6 lg:px-8">
  <!-- Création d'un div sur l'ensemble de la nav bar pour répartir les blocs-->
  <div class="hidden sm:flex  justify-between">
    <!-- Premier div pour le logo AN et le menu A propos-->
    <div class="flex w-64 items-center">
      <!-- logo assemblee nationale -->
      <a href="/">
        <img
          class=" pr-2 pl-2 pb-4 pt-0 w-16  object-scale-down items-start "
          src="/logo-assemblee-nationale-blanc-blanc.png"
          alt="Logo de l'Assemblée nationale"
        />
      </a>
      <!-- À propos dropdown -->
      <div class="flex space-x-5 justify-start ml-2 items-center">
        <div class="">
          <button
            aria-expanded={openUserMenu}
            aria-haspopup="true"
            class=" text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
            id="user-menu"
            on:click={() => (openUserMenu = !openUserMenu)}
            type="button"
          >
            <span class="sr-only">Open user menu</span>
            À propos
          </button>
        </div>
        {#if openUserMenu}
          <!--
                Dropdown menu

                Entering: "transition ease-out duration-100"
                  From: "transform opacity-0 scale-95"
                  To: "transform opacity-100 scale-100"
                Leaving: "transition ease-in duration-75"
                  From: "transform opacity-100 scale-100"
                  To: "transform opacity-0 scale-95"
              -->
          <div
            class="absolute mt-14 mr-6 left-16 top-0 w-64 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
            role="menu"
            aria-orientation="vertical"
            aria-labelledby="user-menu"
          >
            <a
              href="/a-propos"
              class="border-b block px-4 py-3 font-bold text-sm text-gray-700 hover:bg-gray-100"
              role="menuitem">À propos de LexImpact</a
            >
            <a
              href="/comment-fonctionnent-les-simulateurs"
              class="border-b-4 block px-4 py-3 text-sm text-gray-700 hover:bg-gray-100"
              role="menuitem"
              >Comment fonctionnent les simulateurs LexImpact ?</a