Created
March 24, 2023 18:38
-
-
Save gtchakama/4002acca83931ae385bd828393161f71 to your computer and use it in GitHub Desktop.
NavBar - Tailwind CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react' | |
import { Dialog } from '@headlessui/react' | |
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline' | |
const navigation = [ | |
{ name: 'Product', href: '#' }, | |
{ name: 'Features', href: '#' }, | |
{ name: 'Marketplace', href: '#' }, | |
{ name: 'Company', href: '#' }, | |
] | |
export default function Navigation() { | |
const [mobileMenuOpen, setMobileMenuOpen] = useState(false) | |
return ( | |
<header className="bg-white"> | |
<nav className="mx-auto flex max-w-7xl items-center justify-between gap-x-6 p-6 lg:px-8" aria-label="Global"> | |
<div className="flex lg:flex-1"> | |
<a href="#" className="-m-1.5 p-1.5"> | |
<span className="sr-only">Your Company</span> | |
<img className="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" /> | |
</a> | |
</div> | |
<div className="hidden lg:flex lg:gap-x-12"> | |
{navigation.map((item) => ( | |
<a key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-gray-900"> | |
{item.name} | |
</a> | |
))} | |
</div> | |
<div className="flex flex-1 items-center justify-end gap-x-6"> | |
<a href="#" className="hidden lg:block lg:text-sm lg:font-semibold lg:leading-6 lg:text-gray-900"> | |
Log in | |
</a> | |
<a | |
href="#" | |
className="rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" | |
> | |
Sign up | |
</a> | |
</div> | |
<div className="flex lg:hidden"> | |
<button | |
type="button" | |
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" | |
onClick={() => setMobileMenuOpen(true)} | |
> | |
<span className="sr-only">Open main menu</span> | |
<Bars3Icon className="h-6 w-6" aria-hidden="true" /> | |
</button> | |
</div> | |
</nav> | |
<Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}> | |
<div className="fixed inset-0 z-10" /> | |
<Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"> | |
<div className="flex items-center gap-x-6"> | |
<a href="#" className="-m-1.5 p-1.5"> | |
<span className="sr-only">Your Company</span> | |
<img | |
className="h-8 w-auto" | |
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" | |
alt="" | |
/> | |
</a> | |
<a | |
href="#" | |
className="ml-auto rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" | |
> | |
Sign up | |
</a> | |
<button | |
type="button" | |
className="-m-2.5 rounded-md p-2.5 text-gray-700" | |
onClick={() => setMobileMenuOpen(false)} | |
> | |
<span className="sr-only">Close menu</span> | |
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> | |
</button> | |
</div> | |
<div className="mt-6 flow-root"> | |
<div className="-my-6 divide-y divide-gray-500/10"> | |
<div className="space-y-2 py-6"> | |
{navigation.map((item) => ( | |
<a | |
key={item.name} | |
href={item.href} | |
className="-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" | |
> | |
{item.name} | |
</a> | |
))} | |
</div> | |
<div className="py-6"> | |
<a | |
href="#" | |
className="-mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" | |
> | |
Log in | |
</a> | |
</div> | |
</div> | |
</div> | |
</Dialog.Panel> | |
</Dialog> | |
</header> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment