85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
import { Link } from "react-router-dom";
|
|
import PropTypes from "prop-types";
|
|
import { useTranslation } from "react-i18next";
|
|
import clsx from "clsx";
|
|
import { useState } from "react";
|
|
|
|
function SubMenu({ items, isVisible, onLinkClick }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"absolute left-0 z-50 shadow-sm top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary",
|
|
isVisible ? "block" : "hidden"
|
|
)}
|
|
>
|
|
{items.map((subItem, index) => (
|
|
<div
|
|
key={index}
|
|
className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4"
|
|
onClick={onLinkClick}
|
|
>
|
|
<Link to={subItem.path}>{t(subItem.name)}</Link>
|
|
</div>
|
|
))}
|
|
<svg
|
|
className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
|
|
width="16"
|
|
height="13"
|
|
viewBox="0 0 16 13"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MenuBar({ menuItems }) {
|
|
const { t } = useTranslation();
|
|
const [activeMenu, setActiveMenu] = useState(null);
|
|
return (
|
|
<div className="flex justify-between pt-5 pb-2 text-base font-body">
|
|
{menuItems.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative pb-3 cursor-pointer"
|
|
onMouseEnter={() => setActiveMenu(index)}
|
|
onMouseLeave={() => setActiveMenu(null)}
|
|
>
|
|
<Link to={item.path}>{t(item.name)}</Link>
|
|
{item.submenu.length > 0 && <SubMenu items={item.submenu} isVisible={ activeMenu === index } onLinkClick={() => setActiveMenu(null)}/>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
MenuBar.propTypes = {
|
|
menuItems: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
name: PropTypes.string.isRequired,
|
|
submenu: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
name: PropTypes.string.isRequired,
|
|
path: PropTypes.string.isRequired,
|
|
})
|
|
),
|
|
path: PropTypes.string,
|
|
})
|
|
).isRequired,
|
|
};
|
|
|
|
SubMenu.propTypes = {
|
|
items: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
name: PropTypes.string.isRequired,
|
|
path: PropTypes.string.isRequired,
|
|
})
|
|
).isRequired,
|
|
isVisible: PropTypes.bool.isRequired,
|
|
onLinkClick: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default MenuBar;
|