2023-08-24 06:29:16 +02:00
|
|
|
import { createPortal } from 'react-dom';
|
2022-03-12 01:04:05 +01:00
|
|
|
import classNames from 'classnames';
|
2023-09-29 14:29:22 +02:00
|
|
|
import { usePathname } from 'next/navigation';
|
2023-01-31 06:44:07 +01:00
|
|
|
import Link from 'next/link';
|
2022-03-01 03:39:37 +01:00
|
|
|
import styles from './MobileMenu.module.css';
|
|
|
|
|
2023-11-14 06:36:52 +01:00
|
|
|
export function MobileMenu({
|
|
|
|
items = [],
|
|
|
|
onClose,
|
|
|
|
}: {
|
|
|
|
items: any[];
|
|
|
|
className?: string;
|
|
|
|
onClose: () => void;
|
2023-11-14 06:58:23 +01:00
|
|
|
}): any {
|
2023-09-29 14:29:22 +02:00
|
|
|
const pathname = usePathname();
|
2023-04-12 22:40:19 +02:00
|
|
|
|
2023-11-14 06:58:23 +01:00
|
|
|
const Items = ({ items, className }: { items: any[]; className?: string }): any => (
|
2023-04-12 22:40:19 +02:00
|
|
|
<div className={classNames(styles.items, className)}>
|
2023-11-14 06:36:52 +01:00
|
|
|
{items.map(({ label, url, children }: { label: string; url: string; children: any[] }) => {
|
2023-04-13 02:43:08 +02:00
|
|
|
const selected = pathname.startsWith(url);
|
2023-04-12 22:40:19 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Link
|
2023-04-13 02:43:08 +02:00
|
|
|
key={url}
|
|
|
|
href={url}
|
2023-04-12 22:40:19 +02:00
|
|
|
className={classNames(styles.item, { [styles.selected]: selected })}
|
|
|
|
onClick={onClose}
|
|
|
|
>
|
|
|
|
{label}
|
|
|
|
</Link>
|
|
|
|
{children && <Items items={children} className={styles.submenu} />}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
2023-08-24 06:29:16 +02:00
|
|
|
return createPortal(
|
2023-01-31 06:44:07 +01:00
|
|
|
<div className={classNames(styles.menu)}>
|
2023-04-12 22:40:19 +02:00
|
|
|
<Items items={items} />
|
2023-08-24 06:29:16 +02:00
|
|
|
</div>,
|
|
|
|
document.body,
|
2022-03-01 03:39:37 +01:00
|
|
|
);
|
|
|
|
}
|
2023-04-21 17:00:42 +02:00
|
|
|
|
|
|
|
export default MobileMenu;
|