Skip to content

Instantly share code, notes, and snippets.

@mcnaveen
Created May 21, 2024 13:43
Show Gist options
  • Save mcnaveen/14c42723fc7da2e90dfd5a1a322dcc5f to your computer and use it in GitHub Desktop.
Save mcnaveen/14c42723fc7da2e90dfd5a1a322dcc5f to your computer and use it in GitHub Desktop.
<nav className="flex transition-opacity duration-150 ease-out fixed sm:top-0 max-sm:bottom-0 max-sm:dark:bg-black/60 max-sm:bg-background/50 max-sm:h-[86px] z-10 justify-center sm:justify-between max-sm:px-4 sm:flex-col sm:min-h-dvh bottom-t sm:border-r sm:w-[70px] w-full border-border">
<div className="flex sm:flex-col items-center max-sm:pb-[calc(env(safe-area-inset-bottom)/3)] max-sm:gap-6 gap-3 text-primary">
<a
href="/"
className="active:opacity-85 mt-2 mb-2 hidden sm:block group"
>
<p>Nav Item</p>
</Link>
<p>Nav Item</p>
<p>Nav Item</p>
<p>Nav Item</p>
<p>Nav Item</p>
<AddIcon className="max-sm:order-3 sm:mt-2" />
</div>
<div className="hidden sm:flex sm:flex-col items-center max-sm:gap-6 max-sm:ml-4 gap-3 sm:mb-4">
<p>Menu Item</p>
</div>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment