106 lines
3 KiB
TypeScript
106 lines
3 KiB
TypeScript
"use client"
|
|
import {
|
|
BriefcaseIcon,
|
|
EnvelopeIcon,
|
|
HomeIcon,
|
|
UsersIcon,
|
|
} from "@heroicons/react/24/outline"
|
|
import {
|
|
Navbar,
|
|
NavbarBrand,
|
|
NavbarContent,
|
|
NavbarItem,
|
|
NavbarMenu,
|
|
NavbarMenuItem,
|
|
NavbarMenuToggle,
|
|
} from "@nextui-org/react"
|
|
|
|
import Image from "next/image"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { useState } from "react"
|
|
|
|
|
|
export default function Nav() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState<boolean | undefined>(false)
|
|
const currentRoute = usePathname()
|
|
|
|
const menuItems = [
|
|
{
|
|
label: "Home",
|
|
href: "/",
|
|
current: currentRoute === "/",
|
|
icon: <HomeIcon className="h-6 w-6"/>
|
|
},
|
|
{
|
|
label: "Team",
|
|
href: "/team",
|
|
current: currentRoute === "/team",
|
|
icon: <UsersIcon className="h-6 w-6"/>
|
|
|
|
},
|
|
{
|
|
label: "Services",
|
|
href: "/services",
|
|
current: currentRoute === "/services",
|
|
icon: <BriefcaseIcon className="h-6 w-6"/>
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "/contact",
|
|
current: currentRoute === "/contact",
|
|
icon: <EnvelopeIcon className="h-6 w-6"/>
|
|
},
|
|
]
|
|
|
|
return (
|
|
<>
|
|
<Navbar
|
|
className={`relative ${
|
|
isMenuOpen ? "" : "rounded-b-full"
|
|
} bg-primary-800 text-primary-50 shadow-sm shadow-primary-600 sm:rounded-b-none`}
|
|
isMenuOpen={isMenuOpen || false}
|
|
onMenuOpenChange={setIsMenuOpen}
|
|
>
|
|
<NavbarMenuToggle className="absolute left-8 flex md:hidden" />
|
|
<NavbarMenu>
|
|
{menuItems.map((item) => (
|
|
<NavbarMenuItem key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
aria-current={item.current ? "page" : undefined}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<div className="flex-row items-center flex m-4 space-x-2">
|
|
{item.icon}
|
|
<span>{item.label}</span>
|
|
</div>
|
|
</Link>
|
|
</NavbarMenuItem>
|
|
))}
|
|
</NavbarMenu>
|
|
<NavbarBrand className="hidden md:flex">
|
|
<Image src="/Isacon logo RGB_1.png" alt="Isacon" width={50} height={50} />
|
|
</NavbarBrand>
|
|
<NavbarContent className="w-full md:hidden" justify="center">
|
|
<NavbarBrand className="justify-center md:hidden">
|
|
<Image src="/Isacon logo RGB_1.png" alt="Isacon" width={50} height={50} />
|
|
</NavbarBrand>
|
|
</NavbarContent>
|
|
<NavbarContent className="hidden gap-16 md:flex" justify="center">
|
|
{menuItems.map((item) => (
|
|
<NavbarItem key={item.href} isActive={item.current}>
|
|
<Link
|
|
className={item.current ? "border-b-2 border-b-primary-50" : ""}
|
|
href={item.href}
|
|
aria-current={item.current ? "page" : undefined}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</NavbarItem>
|
|
))}
|
|
</NavbarContent>
|
|
</Navbar>
|
|
</>
|
|
)
|
|
}
|