Level 2
Navbar
import { useState } from "react";
import { Link } from "@inertiajs/react";
export default function Navbar({ auth }) {
const [show, setShow] = useState(false);
const onShowClick = () => {
if (show == false) {
setShow(true);
} else setShow(false);
};
return (
<>
<header className="hidden lg:flex justify-between items-center py-7">
<div className="items-center">
<Link href="index.html">
<h1 className="text-secondary font-bold font-roboto text-[20px]">
GH|<span className="text-white">Techs</span>
</h1>
</Link>
</div>
<div>
<ul className="flex items-center gap-8 capitalize">
<li className="text-white text-sm hover:text-secondary ease-in duration-300 active">
<Link href="index.html">Home</Link>
</li>
<li className="text-white text-sm hover:text-secondary ease-in duration-300">
<Link href="courses.html">Course</Link>
</li>
<li className="text-white text-sm hover:text-secondary ease-in duration-300">
<Link href="products.html">Shop</Link>
</li>
<li className="text-white text-sm hover:text-secondary ease-in duration-300">
<Link href="projects.html">Projects</Link>
</li>
<li className="text-white text-sm hover:text-secondary ease-in duration-300">
<Link href="blogs.html">Blog</Link>
</li>
<li className="text-white text-sm hover:text-secondary ease-in duration-300">
<Link href="contact.html">Contact</Link>
</li>
<li className="text-white text-sm hover:bg-secondary ease-in duration-300 border border-secondary rounded py-1 px-4">
<Link href="hire.html">Hire Us</Link>
</li>
</ul>
</div>
<div className="flex gap-6">
<Link
href=""
className="text-white hover:rotate-45 transition duration-300"
title="Search"
>
<i className="fa-light fa-magnifying-glass"></i>
</Link>
<Link
href="favourite.html"
className="text-white relative hover:rotate-12 transition duration-300"
title="Favourite Course"
>
<i className="fa-light fa-heart"></i>
<span className="absolute -right-2 -top-2 w-4 h-4 rounded-full flex items-center justify-center bg-secondary text-white text-xs">
4
</span>
</Link>
<Link
href="cart.html"
className="text-white relative hover:rotate-12 transition duration-300"
title="Cart"
>
<i className="fa-light fa-cart-shopping"></i>
<span className="absolute -right-3 -top-2 w-4 h-4 rounded-full flex items-center justify-center bg-secondary text-white text-xs">
8
</span>
</Link>
{auth.user ? (
<>
<Link
href={route("dashboard")}
className="text-white hover:rotate-180 transition duration-300"
title="Dashboard"
>
<i className="fa-light fa-grid-2"></i>
</Link>
<Link
href={route("logout")}
method="post"
as="button"
className="text-white hover:rotate-180 transition duration-300"
title="Logout"
>
<i className="fa-light fa-right-from-bracket"></i>
</Link>
</>
) : (
<Link
href={route("login")}
className="text-white hover:rotate-180 transition duration-300"
title="Login"
>
<i className="fa-light fa-left-to-bracket"></i>
</Link>
)}
</div>
</header>
{/* visible header in mobile tabs */}
<header className="flex justify-between items-center pt-5 lg:hidden">
<div className="items-center">
<Link href="index.html">
<h1 className="text-secondary font-bold font-roboto text-[20px]">
GH|<span className="text-white">T</span>
</h1>
</Link>
</div>
<div className="flex gap-5">
<Link
href=""
className="text-white hover:rotate-45 transition duration-300"
title="Search"
>
<i className="fa-light fa-magnifying-glass"></i>
</Link>
<Link
href="favourite.html"
className="text-white relative hover:rotate-12 transition duration-300"
title="Favourite Course"
>
<i className="fa-light fa-heart"></i>
<span className="absolute -right-2 -top-2 w-4 h-4 rounded-full flex items-center justify-center bg-secondary text-white text-xs">
4
</span>
</Link>
<Link
href="cart.html"
className="text-white relative hover:rotate-12 transition duration-300"
title="Cart"
>
<i className="fa-light fa-cart-shopping"></i>
<span className="absolute -right-3 -top-2 w-4 h-4 rounded-full flex items-center justify-center bg-secondary text-white text-xs">
8
</span>
</Link>
{auth.user ? (
<>
<Link
href="dashboard.html"
className="text-white hover:rotate-180 transition duration-300"
title="Dashboard"
>
<i className="fa-light fa-grid-2"></i>
</Link>
<Link
href={route("logout")}
method="post"
as="button"
className="text-white hover:rotate-180 transition duration-300"
title="Logout"
>
<i className="fa-light fa-right-from-bracket"></i>
</Link>
</>
) : (
<Link
href={route("login")}
className="text-white hover:rotate-180 transition duration-300"
title="Login"
>
<i className="fa-light fa-left-to-bracket"></i>
</Link>
)}
</div>
<div className="items-center">
<button
className="text-white"
onClick={() => setShow(true)}
>
<i className="fa-light fa-bars"></i>
</button>
</div>
{show && (
<div className="absolute top-0 left-0 w-full bg-tertiary text-white z-10">
<ul className="flex flex-col text-sm text-center gap-5 p-3 pb-5 pt-5 capitalize">
<li className="text-white hover:text-primary ease-in duration-300 active">
<Link href="index.html">Home</Link>
</li>
<li className="text-white hover:text-primary ease-in duration-300">
<Link href="courses.html">Course</Link>
</li>
<li className="text-white hover:text-primary ease-in duration-300">
<Link href="products.html">Shop</Link>
</li>
<li className="text-white hover:text-primary ease-in duration-300">
<Link href="projects.html">Project</Link>
</li>
<li className="text-white hover:text-primary ease-in duration-300">
<Link href="blogs.html">Blog</Link>
</li>
<li className="text-white hover:text-primary ease-in duration-300">
<Link href="contact.html">Contact</Link>
</li>
<li className="items-center mx-auto text-white text-sm hover:bg-primary ease-in duration-300 border border-primary rounded py-1 px-4">
<Link href="hire.html">Hire Us</Link>
</li>
</ul>
<div className="absolute top-[0.7rem] right-7">
<button
className="text-white hover:text-primary"
onClick={() => setShow(false)}
>
<i className="fa-sharp fa-light fa-xmark"></i>
</button>
</div>
</div>
)}
</header>
</>
);
}