Untitled

mail@pastecode.io avatar
unknown
javascript
2 years ago
7.5 kB
8
Indexable
Never
/* 
As headlessui is using the React Context API to handle the state of the menu and this is 
Next 13, we have to tell Next to use client side rendering.
*/
'use client';

import { Fragment } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { Popover, Transition } from '@headlessui/react'
import {
	Bars2Icon,
	XMarkIcon,
	AtSymbolIcon,
	CubeIcon,
	ChatBubbleOvalLeftEllipsisIcon,
	ClipboardDocumentCheckIcon,
  IdentificationIcon,
} from '@heroicons/react/24/outline'
// import { ChevronDownIcon } from '@heroicons/react/solid'

const menuLinks = [
  {
    name: 'SERVICES',
    description: 'Get a better understanding of the sericves Tmutla offers.',
    href: '/services',
    icon: CubeIcon,
  },
	{
    name: 'CONTACT',
    description: 'Reach out and contact us',
    href: '/contact',
    icon: ChatBubbleOvalLeftEllipsisIcon,
  },
  // {
  //   name: 'RESOURCES',
  //   description: 'Build your knowledge through our expertise',
  //   href: '/resources',
  //   icon: ClipboardDocumentCheckIcon,
  // },
	{
    name: 'ABOUT',
    description: 'Learn about us, who we are, and what we do',
    href: '/about',
    icon: IdentificationIcon,
  },
	 // {
  //   name: 'EVENTS',
  //   description: 'Participate in one of our events, ask questions, get involved, and learn.',
  //   href: '/events',
  //   icon: AtSymbolIcon,
  // },
  // {
  //   name: 'ARTICLES',
  //   description: "See what we have been up to through out industry insights.",
  //   href: '/articles',
  //   icon: AtSymbolIcon,
  // },
]

// function classNames(...classes) {
//   return classes.filter(Boolean).join(' ')
// }

export default function Navbar() {
  return (
    <Popover className="relative w-full z-50 border-gray-900 border-b-2">
      {({ open }) => (
        <>
          <div className="w-full mx-auto sm:px-6">
            <div className="flex justify-between items-center border-b-2 border-gray-100 md:space-x-10">
              <div className="flex justify-start lg:w-0 lg:flex-1">
					<Link
						href='/'
						className="-m-3 p-3 flex items-center flex"
					>
						<span className="sr-only">Workflow</span>
						<img
							className="w-18 h-14 md:w-32 md:h-24 "
							src="/raccoon-200x139.png"
							alt="Big Trash Panda Logo"
						/>
					</Link>
              </div>
              <div className="md:hidden">
                <Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-red hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red">
                  <>
					<span className="sr-only">Open menu</span>
                  	<Bars2Icon className="h-6 w-6" aria-hidden="true" />
									</>
				</Popover.Button>
              </div>
              <Popover.Group as="nav" className="hidden md:flex space-x-10">
                <Popover className="relative">
                  {({ open }) => (
                    
    				<Transition
    					show={open}
    					as={Fragment}
    					enter="transition ease-out duration-200"
    					enterFrom="opacity-0 translate-y-1"
    					enterTo="opacity-100 translate-y-0"
    					leave="transition ease-in duration-150"
    					leaveFrom="opacity-100 translate-y-0"
    					leaveTo="opacity-0 translate-y-1"
    				>
    					<Popover.Panel
    						static
    						className="absolute bottom-0 z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2"
    					>
    						<div className="shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
    							<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
    								{menuLinks.map((item) => (
    									<Link
    										key={item.name}
    										href={item.href}
    										className="-m-3 p-3 flex items-start hover:bg-gray-50"
    									>
    										<div className="flex">
    											<item.icon className="flex-shrink-0 h-6 w-6 text-red" aria-hidden="true" />
    											<div className="ml-4">
    												<p className="text-base font-medium text-gray-900">{item.name}</p>
    												<p className="mt-1 text-sm text-gray-500">{item.description}</p>
    											</div>
    										</div>
    									</Link>
    								))}
    							</div>
    						</div>
    					</Popover.Panel>
    				</Transition>

                  )}
                </Popover>
								
					{menuLinks.map((item) => (
						<Link
							key={item.name}
							href={item.href}
							className="px-2 lg:px-6 py-4 flex items-center border-gray-900 text-gray-900 hover:text-gray-700 hover:shadow-lg hover:scale-120 transition ease-in-out delay-250"
						>
							<span className="text-base font-medium">{item.name}</span>
						</Link>
					))}	
							
              </Popover.Group>
              
            </div>
          </div>

          <Transition
            show={open}
            as={Fragment}
            enter="duration-200 ease-out"
            enterFrom="opacity-0 scale-95"
            enterTo="opacity-100 scale-100"
            leave="duration-100 ease-in"
            leaveFrom="opacity-100 scale-100"
            leaveTo="opacity-0 scale-95"
          >
            <Popover.Panel
              focus
              static
              className="absolute top-0 bottom-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
            >
              <div className="shadow-lg ring-1 ring-black ring-opacity-5 bg-white">
                <div className="pt-5 pb-6 px-5">
                  <div className="flex items-center justify-between">
                    <div>
												Big Trash Panda
                    </div>
                    <div className="-mr-2">
                      <Popover.Button className="bg-white p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                        <span className="sr-only">Close menu</span>
                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                      </Popover.Button>
                    </div>
                  </div>
                  <div className="mt-6">
                    <nav className="grid gap-y-8">
                      {menuLinks.map((item) => (
                        <Link
                          key={item.name}
                          href={item.href}
                          className="-m-3 p-3 flex items-center hover:bg-gray-50 flex"
                        >
							<item.icon className="flex-shrink-0 h-6 w-6 text-red-dark" aria-hidden="true" />
							<span className="ml-3 text-base font-medium text-gray-900">{item.name}</span>
                        </Link>
                      ))}
                    </nav>
                  </div>
                </div>
                <div className="py-6 px-5 space-y-6">
					<div className="lg:hidden w-2/3 pt-6 py-2 px-4 flex flex-col border-t-4 border-solid border-red">
						{/* <Link href="/report-breach">
							<button className="mb-3 w-full transition duration-500 ease-in-out transform hover:-translate-x-1 hover:scale-110 p-3 bg-red text-black hover:bg-red-light">REPORT A BREACH</button>
						</Link> */}
						Give us a call:
						<a className="pt-3 w-full" href="tel:1-503-884-7615">503-884-7615</a>
					</div>
                </div>
              </div>
            </Popover.Panel>
          </Transition>
        </>
      )}
    </Popover>
  )
}