import { MenuAlt3Icon, XIcon } from "@heroicons/react/outline"; import Image from "next/image"; import Link from "next/link"; import React, { useState } from "react"; import classnames from "classnames"; import { useRouter } from "next/router"; import classNames from "classnames"; function Navbar() { const [open, setOpen] = useState(false); return ( <nav className={classnames( "sticky lg:hidden top-0 left-0 right-0 h-16 z-50 border-gray-200 py-2.5", { " bg-gray-50 dark:bg-dark-600": open, "rounded bg-white dark:bg-dark-900": !open, } )} > <div className="container flex flex-wrap justify-between items-center mx-auto pl-1 pr-2"> <Link href="/"> <a className="relative h-10 w-10"> <span className="absolute left-0"> <Image src="/usd_side.png" width="100%" height="100%" objectFit="contain" alt="CryptoMetrics Icon" priority={true} className={classNames("transition-all duration-200", { "opacity-100": open, "opacity-0": !open, })} /> </span> <span className="absolute left-0"> <Image src="/usd_front.png" width="100%" height="100%" objectFit="contain" alt="CryptoMetrics Icon" priority={true} className={classNames("transition-all duration-200", { "opacity-0": open, })} /> </span> </a> </Link> <button onClick={() => setOpen((open) => !open)}> {open ? ( <XIcon className="w-6 h-6 dark:text-white" /> ) : ( <MenuAlt3Icon className="w-6 h-6 dark:text-white" /> )} </button> </div> <div className={classnames( "w-full bg-gray-50 dark:bg-dark-600 px-10 pt-2 pb-6 rounded-b-3xl", { "hidden rounded-2xl": !open, "block shadow-xl": open, } )} > <ul className="flex flex-col"> <NavbarListItem href="/" title="Home" /> <NavbarListItem href="/compare" title="Compare" /> </ul> </div> </nav> ); } function NavbarListItem({ href, title }) { const router = useRouter(); return ( <li> <Link href={href}> <a className={classnames("block rounded-xl p-3 mt-2", { "bg-blue-600 text-white": router.pathname === href, "bg-gray-100 dark:bg-dark-900 dark:text-white": router.pathname !== href, })} > {title} </a> </Link> </li> ); } export default Navbar;