fix: nav items on mobile are not clicking full width

This commit is contained in:
Rotimi Best
2024-04-21 00:49:50 +01:00
parent 00e7352b49
commit 11bdb0ed1c
@@ -108,9 +108,9 @@
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li> <li class="text-gray-800 font-semibold text-sm cursor-pointer">Pricing</li>
</a> </a>
<!-- Docs --> <!-- Docs -->
<a href="/docs" target="_blank"> <!-- <a href="/docs" target="_blank">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Docs</li> <li class="text-gray-800 font-semibold text-sm cursor-pointer">Docs</li>
</a> </a> -->
<!-- Blog --> <!-- Blog -->
<a href="/blog"> <a href="/blog">
<li class="text-gray-800 font-semibold text-sm cursor-pointer">Blog</li> <li class="text-gray-800 font-semibold text-sm cursor-pointer">Blog</li>
@@ -186,7 +186,7 @@
{#if showsubNav} {#if showsubNav}
<div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}> <div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
{#each superpowers as superpower} {#each superpowers as superpower}
<a href="/#{superpower.key}"> <a href="/#{superpower.key}" on:click={handleShowNav}>
<p <p
class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5" class="font-normal text-xs text-gray-700 hover:bg-gray-100 rounded-lg py-2.5 pl-5"
> >
@@ -198,32 +198,39 @@
{/if} {/if}
</li> </li>
<!-- Pricing --> <!-- Pricing -->
<li <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-xl w-full"
on:click={handleShowNav}
href="/pricing"
> >
<a on:click={handleShowNav} href="/#pricing"> Pricing </a> <li>Pricing</li>
</li> </a>
<!-- Docs --> <!-- Docs -->
<li <!-- <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
on:click={handleShowNav}
href="/docs"
target="_blank"
> >
<a on:click={handleShowNav} href="/docs" target="_blank"> Docs </a> <li>Docs</li>
</li> </a> -->
<!-- Blog --> <!-- Blog -->
<li <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
on:click={handleShowNav}
href="/blog"
> >
<a on:click={handleShowNav} href="/blog"> Blog </a> <li>Blog</li>
</li> </a>
<!-- More Features --> <!-- More Features -->
<li <a
class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full" class="text-gray-800 font-semibold text-sm md:text-lg cursor-pointer hover:bg-gray-100 py-3 px-4 rounded-md w-full"
on:click={handleShowNav}
href="/#morefeatures"
> >
<a on:click={handleShowNav} href="/#morefeatures"> More features </a> <li>More features</li>
</li> </a>
</ul> </ul>
</nav> </nav>
<div class="flex items-start flex-col gap-y-2 mt-5 border-t-[1px] pt-5"> <div class="flex items-start flex-col gap-y-2 mt-5 border-t-[1px] pt-5">