Tailwind UI navbar component problem on mobile

[TheoGegout]

Hi !
I rewrite a Tailwind UI component from React to Svelte, everything work great but there is a little problem on the sidebar and I don't know if I did something wrong or if its a bug on the Transition or Dialog component?

Svelte Navbar Component :
`<script>
import "../app.css";

import {
Dialog,
Transition,
TransitionChild,
Popover,
PopoverGroup,
PopoverButton,
PopoverPanel,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
} from "@rgossiaux/svelte-headlessui";
import {
Bars3Icon,
MagnifyingGlassIcon,
ShoppingCartIcon,
UserIcon,
XMarkIcon,
ChevronDownIcon,
} from "@babeard/svelte-heroicons/outline";

const navigation = {
categories: [
{
name: "Men",
featured: [
{ name: "Sleep", href: "#" },
{ name: "Swimwear", href: "#" },
{ name: "Underwear", href: "#" },
],
collection: [
{ name: "Everything", href: "#" },
{ name: "Core", href: "#" },
{ name: "New Arrivals", href: "#" },
{ name: "Sale", href: "#" },
],
categories: [
{ name: "Basic Tees", href: "#" },
{ name: "Artwork Tees", href: "#" },
{ name: "Bottoms", href: "#" },
{ name: "Underwear", href: "#" },
{ name: "Accessories", href: "#" },
],
brands: [
{ name: "Full Nelson", href: "#" },
{ name: "My Way", href: "#" },
{ name: "Re-Arranged", href: "#" },
{ name: "Counterfeit", href: "#" },
{ name: "Significant Other", href: "#" },
],
},
{
name: "Lingerie",
featured: [
{ name: "Sleep", href: "#" },
{ name: "Swimwear", href: "#" },
{ name: "Underwear", href: "#" },
],
collection: [
{ name: "Everything", href: "#" },
{ name: "Core", href: "#" },
{ name: "New Arrivals", href: "#" },
{ name: "Sale", href: "#" },
],
categories: [
{ name: "Basic Tees", href: "#" },
{ name: "Artwork Tees", href: "#" },
{ name: "Bottoms", href: "#" },
{ name: "Underwear", href: "#" },
{ name: "Accessories", href: "#" },
],
brands: [
{ name: "Full Nelson", href: "#" },
{ name: "My Way", href: "#" },
{ name: "Re-Arranged", href: "#" },
{ name: "Counterfeit", href: "#" },
{ name: "Significant Other", href: "#" },
],
},
{
name: "Women",
featured: [
{ name: "Sleep", href: "#" },
{ name: "Swimwear", href: "#" },
{ name: "Underwear", href: "#" },
],
collection: [
{ name: "Everything", href: "#" },
{ name: "Core", href: "#" },
{ name: "New Arrivals", href: "#" },
{ name: "Sale", href: "#" },
],
categories: [
{ name: "Basic Tees", href: "#" },
{ name: "Artwork Tees", href: "#" },
{ name: "Bottoms", href: "#" },
{ name: "Underwear", href: "#" },
{ name: "Accessories", href: "#" },
],
brands: [
{ name: "Full Nelson", href: "#" },
{ name: "My Way", href: "#" },
{ name: "Re-Arranged", href: "#" },
{ name: "Counterfeit", href: "#" },
{ name: "Significant Other", href: "#" },
],
},
{
name: "Men",
featured: [
{ name: "Casual", href: "#" },
{ name: "Boxers", href: "#" },
{ name: "Outdoor", href: "#" },
],
collection: [
{ name: "Everything", href: "#" },
{ name: "Core", href: "#" },
{ name: "New Arrivals", href: "#" },
{ name: "Sale", href: "#" },
],
categories: [
{ name: "Artwork Tees", href: "#" },
{ name: "Pants", href: "#" },
{ name: "Accessories", href: "#" },
{ name: "Boxers", href: "#" },
{ name: "Basic Tees", href: "#" },
],
brands: [
{ name: "Significant Other", href: "#" },
{ name: "My Way", href: "#" },
{ name: "Counterfeit", href: "#" },
{ name: "Re-Arranged", href: "#" },
{ name: "Full Nelson", href: "#" },
],
},
],
};

let isOpen = false;
</script>

(isOpen = false)} >

  <div class="fixed inset-0 z-40 flex">
    <TransitionChild
      enter="transition ease-in-out duration-300 transform"
      enterFrom="-translate-x-full"
      enterTo="translate-x-0"
      leave="transition ease-in-out duration-300 transform"
      leaveFrom="translate-x-0"
      leaveTo="-translate-x-full"
    >
      <Dialog
        class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"
      >
        <div class="flex px-4 pt-5 pb-2">
          <button
            type="button"
            class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400"
            on:click={() => (isOpen = false)}
          >
            <span class="sr-only">Close menu</span>
            <XMarkIcon class="h-6 w-6" aria-hidden="true" />
          </button>
        </div>

        <!-- Links  -->
        <TabGroup as="div" class="mt-2">
          <div class="border-b border-gray-200">
            <TabList class="-mb-px flex space-x-8 px-4">
              {#each navigation.categories as category}
                <Tab
                  class={({ selected }) =>
                    selected
                      ? "border-rose-800 text-rose-800 relative z-10 -mb-px flex items-center border-b-2 pt-px text-base font-medium transition-colors duration-200 ease-out"
                      : "border-transparent text-gray-700 hover:text-gray-800 relative z-10 -mb-px flex items-center border-b-2 pt-px text-base font-medium transition-colors duration-200 ease-out"}
                >
                  {category.name}
                </Tab>
              {/each}
            </TabList>
          </div>
          <TabPanels>
            {#each navigation.categories as category}
              <TabPanel class="space-y-12 px-4 pt-10 pb-6">
                <div class="grid grid-cols-1 items-start gap-y-10 gap-x-6">
                  <div class="grid grid-cols-1 gap-y-10 gap-x-6">
                    <div>
                      <p
                        id="mobile-featured-heading"
                        class="font-medium text-gray-900"
                      >
                        Featured
                      </p>
                      <ul
                        aria-labelledby="mobile-featured-heading"
                        class="mt-6 space-y-6"
                      >
                        {#each category.featured as item}
                          <li class="flex">
                            <a href={item.href} class="text-gray-500">
                              {item.name}
                            </a>
                          </li>
                        {/each}
                      </ul>
                    </div>
                    <div>
                      <p
                        id="mobile-categories-heading"
                        class="font-medium text-gray-900"
                      >
                        Categories
                      </p>
                      <ul
                        aria-labelledby="mobile-categories-heading"
                        class="mt-6 space-y-6"
                      >
                        {#each category.categories as item}
                          <li class="flex">
                            <a href={item.href} class="text-gray-500">
                              {item.name}
                            </a>
                          </li>
                        {/each}
                      </ul>
                    </div>
                  </div>
                  <div class="grid grid-cols-1 gap-y-10 gap-x-6">
                    <div>
                      <p
                        id="mobile-collection-heading"
                        class="font-medium text-gray-900"
                      >
                        Collection
                      </p>
                      <ul
                        aria-labelledby="mobile-collection-heading"
                        class="mt-6 space-y-6"
                      >
                        {#each category.collection as item}
                          <li class="flex">
                            <a href={item.href} class="text-gray-500">
                              {item.name}
                            </a>
                          </li>
                        {/each}
                      </ul>
                    </div>

                    <div>
                      <p
                        id="mobile-brand-heading"
                        class="font-medium text-gray-900"
                      >
                        Brands
                      </p>
                      <ul
                        aria-labelledby="mobile-brand-heading"
                        class="mt-6 space-y-6"
                      >
                        {#each category.brands as item}
                          <li class="flex">
                            <a href={item.href} class="text-gray-500">
                              {item.name}
                            </a>
                          </li>
                        {/each}
                      </ul>
                    </div>
                  </div>
                </div>
              </TabPanel>
            {/each}
          </TabPanels>
        </TabGroup>

        <div class="space-y-6 border-t border-gray-200 py-6 px-4">
          <div class="flow-root">
            <a href="/" class="-m-2 block p-2 font-medium text-gray-900">
              Create an account
            </a>
          </div>
          <div class="flow-root">
            <a href="/" class="-m-2 block p-2 font-medium text-gray-900">
              Sign in
            </a>
          </div>
        </div>
      </Dialog>
    </TransitionChild>
  </div>
</Dialog>

Get free delivery on orders over $100

      <div
        class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6"
      >
        <a
          href="/"
          class="text-sm font-medium text-white hover:text-gray-100"
        >
          Create an account
        </a>
        <span class="h-6 w-px bg-gray-600" aria-hidden="true" />
        <a
          href="/"
          class="text-sm font-medium text-white hover:text-gray-100"
        >
          Sign in
        </a>
      </div>
    </div>
  </div>

  <!-- Secondary navigation  -->
  <div class="bg-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="border-b border-gray-200">
        <div class="flex h-16 items-center justify-between">
          <!-- Logo (lg+)  -->
          <div class="hidden lg:flex lg:items-center">
            <a href="/">
              <span class="sr-only">Your Company</span>
              <img
                class="h-8 w-auto"
                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
                alt=""
              />
            </a>
          </div>

          <div class="hidden h-full lg:flex">
            <!-- Mega menus  -->
            <PopoverGroup class="ml-8">
              <div class="flex h-full justify-center space-x-8">
                {#each navigation.categories as category}
                  <Popover class="flex" let:open>
                    <div class="relative flex">
                      <PopoverButton
                        class={`${
                          open
                            ? "border-rose-800 text-rose-800"
                            : "border-transparent text-gray-700 hover:text-gray-800"
                        } relative z-10 -mb-px flex items-center border-b-2 pt-px text-base font-medium transition-colors duration-200 ease-out`}
                      >
                        {category.name}
                      </PopoverButton>
                    </div>

                    {#if open}
                      <Transition
                        enter="transition ease-out duration-200"
                        enterFrom="opacity-0"
                        enterTo="opacity-100"
                        leave="transition ease-in duration-150"
                        leaveFrom="opacity-100"
                        leaveTo="opacity-0"
                      >
                        <PopoverPanel
                          class="absolute inset-x-0 top-full text-gray-500 sm:text-sm"
                        >
                          <div
                            class="absolute inset-0 top-1/2 bg-white shadow"
                            aria-hidden="true"
                          />

                          <div class="relative bg-white">
                            <div class="mx-auto max-w-7xl px-8">
                              <div
                                class="grid grid-cols-2 items-start gap-y-10 gap-x-8 pt-10 pb-12"
                              >
                                <div
                                  class="grid grid-cols-2 gap-y-10 gap-x-8"
                                >
                                  <div>
                                    <p
                                      id="desktop-featured-heading"
                                      class="font-medium text-gray-900"
                                    >
                                      Featured
                                    </p>
                                    <ul
                                      aria-labelledby="desktop-featured-heading"
                                      class="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
                                    >
                                      {#each category.featured as item}
                                        <li class="flex">
                                          <a
                                            href={item.href}
                                            class="hover:text-gray-800"
                                          >
                                            {item.name}
                                          </a>
                                        </li>
                                      {/each}
                                    </ul>
                                  </div>
                                  <div>
                                    <p
                                      id="desktop-categories-heading"
                                      class="font-medium text-gray-900"
                                    >
                                      Categories
                                    </p>
                                    <ul
                                      aria-labelledby="desktop-categories-heading"
                                      class="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
                                    >
                                      {#each category.categories as item}
                                        <li class="flex">
                                          <a
                                            href={item.href}
                                            class="hover:text-gray-800"
                                          >
                                            {item.name}
                                          </a>
                                        </li>
                                      {/each}
                                    </ul>
                                  </div>
                                </div>
                                <div
                                  class="grid grid-cols-2 gap-y-10 gap-x-8"
                                >
                                  <div>
                                    <p
                                      id="desktop-collection-heading"
                                      class="font-medium text-gray-900"
                                    >
                                      Collection
                                    </p>
                                    <ul
                                      aria-labelledby="desktop-collection-heading"
                                      class="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
                                    >
                                      {#each category.collection as item}
                                        <li class="flex">
                                          <a
                                            href={item.href}
                                            class="hover:text-gray-800"
                                          >
                                            {item.name}
                                          </a>
                                        </li>
                                      {/each}
                                    </ul>
                                  </div>

                                  <div>
                                    <p
                                      id="desktop-brand-heading"
                                      class="font-medium text-gray-900"
                                    >
                                      Brands
                                    </p>
                                    <ul
                                      aria-labelledby="desktop-brand-heading"
                                      class="mt-6 space-y-6 sm:mt-4 sm:space-y-4"
                                    >
                                      {#each category.brands as item}
                                        <li class="flex">
                                          <a
                                            href={item.href}
                                            class="hover:text-gray-800"
                                          >
                                            {item.name}
                                          </a>
                                        </li>
                                      {/each}
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </PopoverPanel>
                      </Transition>
                    {/if}
                  </Popover>
                {/each}
              </div>
            </PopoverGroup>
          </div>

          <!-- Mobile menu and search (lg-)  -->
          <div class="flex flex-1 items-center lg:hidden">
            <button
              type="button"
              class="-ml-2 rounded-md bg-white p-2 text-gray-400"
              on:click={() => (isOpen = true)}
            >
              <span class="sr-only">Open menu</span>
              <Bars3Icon class="h-6 w-6" aria-hidden="true" />
            </button>

            <!-- Search  -->
            <a href="/" class="ml-2 p-2 text-gray-400 hover:text-gray-500">
              <span class="sr-only">Search</span>
              <MagnifyingGlassIcon class="h-6 w-6" aria-hidden="true" />
            </a>
          </div>

          <!-- Logo (lg-)  -->
          <a href="/" class="lg:hidden">
            <span class="sr-only">Your Company</span>
            <img
              src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
              alt=""
              class="h-8 w-auto"
            />
          </a>

          <div class="flex flex-1 items-center justify-end">
            <div class="flex items-center lg:ml-8">
              <div class="flex space-x-8">
                <div class="hidden lg:flex">
                  <a
                    href="/"
                    class="-m-2 p-2 text-gray-400 hover:text-gray-500"
                  >
                    <span class="sr-only">Search</span>
                    <MagnifyingGlassIcon
                      class="h-6 w-6"
                      aria-hidden="true"
                    />
                  </a>
                </div>

                <div class="flex">
                  <a
                    href="/"
                    class="-m-2 p-2 text-gray-400 hover:text-gray-500"
                  >
                    <span class="sr-only">Account</span>
                    <UserIcon class="h-6 w-6" aria-hidden="true" />
                  </a>
                </div>
              </div>

              <span
                class="mx-4 h-6 w-px bg-gray-200 lg:mx-6"
                aria-hidden="true"
              />

              <div class="flow-root">
                <a href="/" class="group -m-2 flex items-center p-2">
                  <ShoppingCartIcon
                    class="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
                    aria-hidden="true"
                  />
                  <span
                    class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800"
                    >0</span
                  >
                  <span class="sr-only">items in cart, view bag</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

`