umami/components/layout/NavBar.js

66 lines
2.1 KiB
JavaScript
Raw Normal View History

2023-03-24 18:55:20 +01:00
import { Icon, Text, Row, Column } from 'react-basics';
2023-03-22 05:28:36 +01:00
import Link from 'next/link';
import classNames from 'classnames';
2023-01-31 06:44:07 +01:00
import Icons from 'components/icons';
2023-02-04 17:59:52 +01:00
import ThemeButton from 'components/input/ThemeButton';
import LanguageButton from 'components/input/LanguageButton';
2023-03-22 05:28:36 +01:00
import ProfileButton from 'components/input/ProfileButton';
import styles from './NavBar.module.css';
2023-02-28 05:03:04 +01:00
import useConfig from 'hooks/useConfig';
2023-03-22 05:28:36 +01:00
import useMessages from 'hooks/useMessages';
2023-03-23 19:46:49 +01:00
import { useRouter } from 'next/router';
2023-04-10 05:22:28 +02:00
import HamburgerButton from '../common/HamburgerButton';
2023-04-21 17:00:42 +02:00
export function NavBar() {
2023-03-23 19:46:49 +01:00
const { pathname } = useRouter();
2023-02-28 05:03:04 +01:00
const { cloudMode } = useConfig();
2023-03-22 05:28:36 +01:00
const { formatMessage, labels } = useMessages();
2023-03-22 05:28:36 +01:00
const links = [
2023-03-24 18:55:20 +01:00
{ label: formatMessage(labels.dashboard), url: '/dashboard' },
{ label: formatMessage(labels.realtime), url: '/realtime' },
2023-05-20 18:02:08 +02:00
{ label: formatMessage(labels.reports), url: '/reports' },
2023-03-24 18:55:20 +01:00
!cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
2023-01-31 06:44:07 +01:00
].filter(n => n);
return (
2023-03-24 18:55:20 +01:00
<div className={classNames(styles.navbar)}>
<Row>
<Column className={styles.left}>
<div className={styles.logo}>
<Icon size="lg">
<Icons.Logo />
</Icon>
<Text className={styles.text}>umami</Text>
</div>
<div className={styles.links}>
{links.map(({ url, label }) => {
return (
<Link
key={url}
href={url}
className={classNames({ [styles.selected]: pathname.startsWith(url) })}
>
<Text>{label}</Text>
</Link>
);
})}
</div>
</Column>
<Column className={styles.right}>
<div className={styles.actions}>
<ThemeButton />
<LanguageButton />
2023-04-07 05:34:02 +02:00
<ProfileButton />
2023-03-24 18:55:20 +01:00
</div>
2023-04-10 05:22:28 +02:00
<div className={styles.mobile}>
<HamburgerButton />
</div>
2023-03-24 18:55:20 +01:00
</Column>
</Row>
</div>
);
}
2023-04-21 17:00:42 +02:00
export default NavBar;