[javascript] Tailwind Header

Viewer

copydownloadembedprintName: Tailwind Header
  1. /* This example requires Tailwind CSS v2.0+ */
  2. import { Fragment } from 'react'
  3. import { Disclosure, Menu, Transition } from '@headlessui/react'
  4. import { BellIcon, MenuIcon, MoonIcon, XIcon } from '@heroicons/react/outline'
  5. import NextLink from 'next/link'
  6. import { useRouter } from 'next/router'
  7.  
  8. const navigation = [
  9.   { name: 'Home', href: '/', current: true },
  10.   { name: 'Event Bookings', href: '/events', current: false },
  11.   { name: 'Streaming', href: '#', current: false },
  12.   { name: 'Music', href: '#', current: false },
  13.   { name: 'Privacy Policy', href: '#', current: false },
  14.   { name: 'About', href: '/about', current: false }
  15. ]
  16.  
  17. function classNames(...classes) {
  18.   return classes.filter(Boolean).join(' ')
  19. }
  20.  
  21. export default function Header() {
  22.   const router = useRouter()
  23.   return (
  24.     <Disclosure
  25.       as="nav"
  26.       className="bg-slate-50 sticky top-0 z-50 border-2 opacity-80 w-full"
  27.     >
  28.       {({ open }) => (
  29.         <>
  30.           <div className="max-w-8xl x-auto px-2 sm:px-6 lg:px-8">
  31.             <div className="relative flex items-center justify-between h-16">
  32.               <div className="absolute inset-y-0 left-0 flex items-center md:hidden">
  33.                 {/* Mobile menu button*/}
  34.                 <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-black focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
  35.                   <span className="sr-only">Open main menu</span>
  36.                   {open ? (
  37.                     <XIcon className="block h-6 w-6" aria-hidden="true" />
  38.                   ) : (
  39.                     <MenuIcon className="block h-6 w-6" aria-hidden="true" />
  40.                   )}
  41.                 </Disclosure.Button>
  42.               </div>
  43.               <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
  44.                 <div className="flex-shrink-0 font-mono flex items-center">
  45.                   <NextLink href="/" passHref>
  46.                     <a className="inline-flex items-center justify-center p-2 mr-4">
  47.                       <span className="text-lg text-black font-bold uppercase tracking-widest">
  48.                         Noceur Media
  49.                       </span>
  50.                     </a>
  51.                   </NextLink>
  52.                 </div>
  53.                 <div className="hidden py-2 sm:block sm:ml-6">
  54.                   <div className="flex space-x-4">
  55.                     {navigation.map(item => (
  56.                       <NextLink key={item.name} href={item.href} passHref>
  57.                         <a
  58.                           className={classNames(
  59.                             item.current
  60.                               ? 'text-black font-bold bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400'
  61.                               : 'text-gray-700 hover:bg-gray-200 hover:text-gray-500 hover:underline hover:underline-offset-2',
  62.                             'px-3 py-2 rounded-md text-sm font-medium font-mono'
  63.                           )}
  64.                           aria-current={item.current ? 'page' : undefined}
  65.                         >
  66.                           {item.name}
  67.                         </a>
  68.                       </NextLink>
  69.                     ))}
  70.                   </div>
  71.                 </div>
  72.               </div>
  73.               <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
  74.                 <button
  75.                   type="button"
  76.                   className="p-1 rounded-full text-gray-400 hover:text-black focus:outline-none"
  77.                 >
  78.                   <span className="sr-only">View notifications</span>
  79.                   <MoonIcon
  80.                     className="h-6 w-6 md:hidden lg:inline-flex"
  81.                     aria-hidden="true"
  82.                   />
  83.                 </button>
  84.  
  85.                 {/* Profile dropdown */}
  86.                 <Menu as="div" className="ml-3 relative">
  87.                   <div>
  88.                     <Menu.Button className="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-white">
  89.                       <span className="sr-only">Open user menu</span>
  90.                       <img
  91.                         className="h-8 w-8 rounded-full"
  92.                         src="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"
  93.                         alt=""
  94.                       />
  95.                     </Menu.Button>
  96.                   </div>
  97.                   <Transition
  98.                     as={Fragment}
  99.                     enter="transition ease-out duration-100"
  100.                     enterFrom="transform opacity-0 scale-95"
  101.                     enterTo="transform opacity-100 scale-100"
  102.                     leave="transition ease-in duration-75"
  103.                     leaveFrom="transform opacity-100 scale-100"
  104.                     leaveTo="transform opacity-0 scale-95"
  105.                   >
  106.                     <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
  107.                       <Menu.Item>
  108.                         {({ active }) => (
  109.                           <a
  110.                             href="#"
  111.                             className={classNames(
  112.                               active ? 'bg-gray-100' : '',
  113.                               'block px-4 py-2 text-sm text-gray-700'
  114.                             )}
  115.                           >
  116.                             Settings
  117.                           </a>
  118.                         )}
  119.                       </Menu.Item>
  120.                       <Menu.Item>
  121.                         {({ active }) => (
  122.                           <a
  123.                             href="#"
  124.                             className={classNames(
  125.                               active ? 'bg-gray-100' : '',
  126.                               'block px-4 py-2 text-sm text-gray-700'
  127.                             )}
  128.                           >
  129.                             Sign out
  130.                           </a>
  131.                         )}
  132.                       </Menu.Item>
  133.                     </Menu.Items>
  134.                   </Transition>
  135.                 </Menu>
  136.               </div>
  137.             </div>
  138.           </div>
  139.  
  140.           <Disclosure.Panel className="lg:hidden">
  141.             <div className="px-2 pt-2 pb-3 space-y-1">
  142.               {navigation.map(item => (
  143.                 <Disclosure.Button
  144.                   key={item.name}
  145.                   as="a"
  146.                   href={item.href}
  147.                   className={classNames(
  148.                     item.current
  149.                       ? 'text-black bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400'
  150.                       : 'text-gray-400 hover:bg-gray-700 hover:text-white',
  151.                     'block px-3 py-2 rounded-md text-base font-medium'
  152.                   )}
  153.                   aria-current={item.current ? 'page' : undefined}
  154.                 >
  155.                   {item.name}
  156.                 </Disclosure.Button>
  157.               ))}
  158.             </div>
  159.           </Disclosure.Panel>
  160.         </>
  161.       )}
  162.     </Disclosure>
  163.   )
  164. }
  165.  

Editor

You can edit this paste and save as new:


File Description
  • Tailwind Header
  • Paste Code
  • 13 Dec-2021
  • 7.22 Kb
You can Share it: