added heroicons to nav

This commit is contained in:
Sentientsoap 2023-12-12 13:05:09 +01:00
parent c027c645db
commit 031cd6e2bb

View file

@ -1,6 +1,11 @@
"use client" "use client"
import { import {
Button, BriefcaseIcon,
EnvelopeIcon,
HomeIcon,
UsersIcon,
} from "@heroicons/react/24/outline"
import {
Navbar, Navbar,
NavbarBrand, NavbarBrand,
NavbarContent, NavbarContent,
@ -9,11 +14,13 @@ import {
NavbarMenuItem, NavbarMenuItem,
NavbarMenuToggle, NavbarMenuToggle,
} from "@nextui-org/react" } from "@nextui-org/react"
import Image from "next/image" import Image from "next/image"
import Link from "next/link" import Link from "next/link"
import { usePathname } from "next/navigation" import { usePathname } from "next/navigation"
import { useState } from "react" import { useState } from "react"
export default function Nav() { export default function Nav() {
const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false) const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false)
const currentRoute = usePathname() const currentRoute = usePathname()
@ -23,21 +30,26 @@ export default function Nav() {
label: "Home", label: "Home",
href: "/", href: "/",
current: currentRoute === "/", current: currentRoute === "/",
icon: <HomeIcon className="h-6 w-6"/>
}, },
{ {
label: "Team", label: "Team",
href: "/team", href: "/team",
current: currentRoute === "/team", current: currentRoute === "/team",
icon: <UsersIcon className="h-6 w-6"/>
}, },
{ {
label: "Services", label: "Services",
href: "/services", href: "/services",
current: currentRoute === "/services", current: currentRoute === "/services",
icon: <BriefcaseIcon className="h-6 w-6"/>
}, },
{ {
label: "Contact", label: "Contact",
href: "/contact", href: "/contact",
current: currentRoute === "/contact", current: currentRoute === "/contact",
icon: <EnvelopeIcon className="h-6 w-6"/>
}, },
] ]
@ -59,7 +71,10 @@ export default function Nav() {
aria-current={item.current ? "page" : undefined} aria-current={item.current ? "page" : undefined}
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
> >
{item.label} <div className="flex-row items-center flex m-4 space-x-2">
{item.icon}
<span>{item.label}</span>
</div>
</Link> </Link>
</NavbarMenuItem> </NavbarMenuItem>
))} ))}