umami/components/common/HamburgerButton.js
2023-04-07 22:03:52 -07:00

46 lines
1.2 KiB
JavaScript

import { Button, Icon } from 'react-basics';
import { useState } from 'react';
import MobileMenu from './MobileMenu';
import Icons from 'components/icons';
import useMessages from 'hooks/useMessages';
import styles from './HamburgerButton.module.css';
export default function HamburgerButton() {
const { formatMessage, labels } = useMessages();
const [active, setActive] = useState(false);
const menuItems = [
{
label: formatMessage(labels.dashboard),
value: '/dashboard',
},
{ label: formatMessage(labels.realtime), value: '/realtime' },
{
label: formatMessage(labels.settings),
value: '/settings',
},
{
label: formatMessage(labels.profile),
value: '/settings/profile',
},
{ label: formatMessage(labels.logout), value: '/logout' },
];
function handleClick() {
setActive(state => !state);
}
function handleClose() {
setActive(false);
}
return (
<>
<Button className={styles.button} onClick={handleClick}>
<Icon>{active ? <Icons.Close /> : <Icons.Menu />}</Icon>
</Button>
{active && <MobileMenu items={menuItems} onClose={handleClose} />}
</>
);
}