60 lines
2.2 KiB
JavaScript
60 lines
2.2 KiB
JavaScript
import { Link } from "react-router-dom";
|
|
import PropTypes from "prop-types";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
function SubMenu({ items }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="absolute left-0 z-50 invisible transition-all duration-200 -translate-y-6 shadow-sm opacity-0 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 group-hover:visible group-hover:translate-y-0 group-hover:opacity-100">
|
|
{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">
|
|
<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();
|
|
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 group">
|
|
{t(item.name)}
|
|
{item.submenu.length > 0 && <SubMenu items={item.submenu} />}
|
|
</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
|
|
};
|
|
|
|
export default MenuBar;
|