import { Fragment } from 'react' import { Disclosure, Menu, Transition } from '@headlessui/react' import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline' const user = { name: 'Tom Cook', email: 'tom@example.com', imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', } const navigation = [ { name: 'Dashboard', href: '#', current: true }, { name: 'Team', href: '#', current: false }, { name: 'Projects', href: '#', current: false }, { name: 'Calendar', href: '#', current: false }, { name: 'Reports', href: '#', current: false }, ] const userNavigation = [ { name: 'Your Profile', href: '#' }, { name: 'Settings', href: '#' }, { name: 'Sign out', href: '#' }, ] function classNames(...classes) { return classes.filter(Boolean).join(' ') } export default function Example() { return ( <> {/* This example requires updating your template: ``` ``` */}

{({ open }) => ( <>

{navigation.map((item) => ( {item.name} ))}

{/* Profile dropdown */}

Open user menu

{userNavigation.map((item) => ( {({ active }) => ( {item.name} )} ))}

{/* Mobile menu button */} Open main menu {open ? (

{navigation.map((item) => ( {item.name} ))}

{user.name}

{user.email}

{userNavigation.map((item) => ( {item.name} ))}

)}

Dashboard

{/* Your content */}

) }