| "use client" |
| import { default as Image } from 'next/image' |
| import { useRouter } from 'next/navigation' |
| import { ReactNode, useState } from 'react' |
| |
| function SubgroupItem({ |
| title, |
| router |
| }: { |
| title: string, |
| router: ReturnType<typeof useRouter> |
| }) { |
| return ( |
| <div |
| className="cursor-pointer text-slate-200 hover:bg-white hover:bg-opacity-5 px-2 py-1 rounded" |
| onClick={() => void router.push(title.toLowerCase())} |
| > |
| {title} |
| </div> |
| ) |
| } |
| |
| function Subgroup({ |
| title, |
| children, |
| router |
| }: { |
| title: string, |
| children: ReactNode, |
| router: ReturnType<typeof useRouter> |
| }) { |
| const [showChild, setShowChild] = useState<boolean>(false) |
| return ( |
| <div |
| className="flex space-y-1" |
| onMouseLeave={() => void setShowChild(false)} |
| > |
| <div |
| className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer" |
| onClick={() => router.push(title.toLowerCase())} |
| onMouseEnter={() => void setShowChild(true)} |
| > |
| {title} |
| </div> |
| { |
| (children) |
| ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}> |
| { children } |
| </div> |
| : null |
| } |
| </div> |
| ) |
| } |
| |
| function NavItem({ |
| title, |
| router, |
| subgroups |
| }: { |
| title: string, |
| router: ReturnType<typeof useRouter>, |
| subgroups?: ReturnType<typeof SubgroupItem | typeof Subgroup>[] |
| }) { |
| |
| const [showChild, setShowChild] = useState<boolean>(false) |
| |
| return ( |
| <div |
| className="flex flex-col space-y-1" |
| onMouseLeave={() => void setShowChild(false)} |
| > |
| <div |
| className="w-fit px-3 text-slate-200 hover:bg-white hover:bg-opacity-5 rounded py-1 cursor-pointer" |
| onClick={() => router.push(title.toLowerCase())} |
| onMouseEnter={() => void setShowChild(true)} |
| > |
| {title} |
| </div> |
| { |
| (subgroups && subgroups.length > 0) |
| ? <div className={`bg-[#383838] bg-opacity-75 w-fit rounded flex flex-col space-y-1 p-1 ${showChild ? "opacity-100" : "opacity-0"}`}> |
| { |
| subgroups.map((item, i) => <div key={i}>{item}</div>) |
| } |
| </div> |
| : null |
| } |
| </div> |
| ) |
| } |
| |
| export default function NavBar() { |
| const r = useRouter(); |
| |
| return ( |
| <nav className="flex h-12 pt-2 px-4 space-x-5 bg-slate-900 border-b-black border-b"> |
| <a href="/"> |
| <Image src="/vercel.svg" alt="null" height={50} width={50} /> |
| </a> |
| <NavItem title="Characters" router={r} subgroups={[ |
| <Subgroup title="Main Characters" router={r}> |
| <SubgroupItem title="Leonel Morales" router={r}/> |
| <SubgroupItem title="Aina Brazinger" router={r}/> |
| </Subgroup> |
| ]}/> |
| <NavItem title="Places" router={r} /> |
| <NavItem title="Factions" router={r} /> |
| <NavItem title="Zones" router={r} /> |
| </nav> |
| ) |
| } |