umami/components/common/HamburgerButton.js

56 lines
1.5 KiB
JavaScript
Raw Normal View History

import { Button, Icon } from 'react-basics';
2022-03-01 03:39:37 +01:00
import { useState } from 'react';
2023-01-31 06:44:07 +01:00
import MobileMenu from './MobileMenu';
import Icons from 'components/icons';
2023-04-08 07:03:52 +02:00
import useMessages from 'hooks/useMessages';
2023-04-10 05:22:28 +02:00
import useConfig from 'hooks/useConfig';
2022-03-01 03:39:37 +01:00
export default function HamburgerButton() {
2023-04-08 07:03:52 +02:00
const { formatMessage, labels } = useMessages();
2022-03-01 03:39:37 +01:00
const [active, setActive] = useState(false);
2023-04-10 05:22:28 +02:00
const { cloudMode } = useConfig();
2022-03-01 03:39:37 +01:00
2023-04-08 07:03:52 +02:00
const menuItems = [
{
label: formatMessage(labels.dashboard),
2023-04-13 02:43:08 +02:00
url: '/dashboard',
2023-04-08 07:03:52 +02:00
},
2023-04-13 02:43:08 +02:00
{ label: formatMessage(labels.realtime), url: '/realtime' },
2023-04-10 05:22:28 +02:00
!cloudMode && {
2023-04-08 07:03:52 +02:00
label: formatMessage(labels.settings),
2023-04-13 02:43:08 +02:00
url: '/settings',
2023-04-12 22:40:19 +02:00
children: [
{
label: formatMessage(labels.websites),
2023-04-13 02:43:08 +02:00
url: '/settings/websites',
2023-04-12 22:40:19 +02:00
},
{
label: formatMessage(labels.teams),
2023-04-13 02:43:08 +02:00
url: '/settings/teams',
2023-04-12 22:40:19 +02:00
},
{
label: formatMessage(labels.users),
2023-04-13 02:43:08 +02:00
url: '/settings/users',
2023-04-12 22:40:19 +02:00
},
],
2023-04-08 07:03:52 +02:00
},
{
label: formatMessage(labels.profile),
2023-04-13 02:43:08 +02:00
url: '/settings/profile',
2023-04-08 07:03:52 +02:00
},
2023-04-13 02:43:08 +02:00
!cloudMode && { label: formatMessage(labels.logout), url: '/logout' },
2023-04-10 05:22:28 +02:00
].filter(n => n);
2022-03-01 03:39:37 +01:00
2023-04-10 05:22:28 +02:00
const handleClick = () => setActive(state => !state);
const handleClose = () => setActive(false);
2022-03-01 03:39:37 +01:00
return (
<>
2023-04-10 05:22:28 +02:00
<Button variant="quiet" onClick={handleClick}>
2023-01-31 06:44:07 +01:00
<Icon>{active ? <Icons.Close /> : <Icons.Menu />}</Icon>
</Button>
2022-03-01 03:39:37 +01:00
{active && <MobileMenu items={menuItems} onClose={handleClose} />}
</>
);
}