73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
|
import React, { useState } from 'react'
|
||
|
|
import Link from 'next/link';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
|
||
|
|
import Button from './Button';
|
||
|
|
import { MenuItem } from './Navbar'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
item: MenuItem;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Dropdown(props: Props) {
|
||
|
|
const { item } = props;
|
||
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||
|
|
const menuItems = item?.children ? item.children : [];
|
||
|
|
const lastIndex = menuItems.length - 1;
|
||
|
|
|
||
|
|
const toggle = () => {
|
||
|
|
setIsOpen(old => !old);
|
||
|
|
}
|
||
|
|
|
||
|
|
const transClass = isOpen
|
||
|
|
?
|
||
|
|
"flex"
|
||
|
|
:
|
||
|
|
"hidden";
|
||
|
|
|
||
|
|
function isLastItem (currentItem: MenuItem) {
|
||
|
|
return lastIndex == menuItems.indexOf(currentItem)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="relative">
|
||
|
|
<Button
|
||
|
|
className="hover:text-britton-light font-semibold text-lg uppercase"
|
||
|
|
onClick={toggle}
|
||
|
|
>{item.title}</Button>
|
||
|
|
<div className={`absolute top-8 z-30 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
|
||
|
|
{
|
||
|
|
menuItems.map(item =>
|
||
|
|
<>
|
||
|
|
<Link
|
||
|
|
key={item.route}
|
||
|
|
className="hover:bg-britton-dark hover:text-britton-neutral text-center px-2 py-1"
|
||
|
|
href={item?.route || ''}
|
||
|
|
onClick={toggle}
|
||
|
|
>
|
||
|
|
{item.title}
|
||
|
|
</Link>
|
||
|
|
<div className={classnames(
|
||
|
|
"h-px bg-britton-accent",
|
||
|
|
{"hidden" : isLastItem(item)}
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{
|
||
|
|
isOpen
|
||
|
|
?
|
||
|
|
<div
|
||
|
|
className="fixed top-0 right-0 bottom-0 left-0 z-20 bg-britton-dark/40"
|
||
|
|
onClick={toggle}
|
||
|
|
></div>
|
||
|
|
:
|
||
|
|
<></>
|
||
|
|
}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|