Closed TheoGegout closed 2 years ago
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 : `
Featured
Categories
Collection
Brands
Get free delivery on orders over $100
</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>
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 : `