umami/components/layout/Header.js

60 lines
2.1 KiB
JavaScript
Raw Normal View History

import { useRouter } from 'next/router';
2021-05-15 10:29:39 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-05 07:45:05 +02:00
import classNames from 'classnames';
2020-08-08 05:36:57 +02:00
import Link from 'components/common/Link';
2020-09-20 10:33:39 +02:00
import Icon from 'components/common/Icon';
import LanguageButton from 'components/settings/LanguageButton';
import ThemeButton from 'components/settings/ThemeButton';
2022-03-01 03:39:37 +01:00
import HamburgerButton from 'components/common/HamburgerButton';
2020-09-26 13:04:44 +02:00
import UpdateNotice from 'components/common/UpdateNotice';
2020-09-21 06:31:53 +02:00
import UserButton from 'components/settings/UserButton';
2022-03-01 03:39:37 +01:00
import { HOMEPAGE_URL } from 'lib/constants';
2022-08-29 05:20:54 +02:00
import useConfig from 'hooks/useConfig';
2022-08-09 23:58:27 +02:00
import useUser from 'hooks/useUser';
import Logo from 'assets/logo.svg';
import styles from './Header.module.css';
2020-07-24 04:56:55 +02:00
2022-10-13 01:29:44 +02:00
export default function Header() {
const { user } = useUser();
const { pathname } = useRouter();
2022-08-09 23:58:27 +02:00
const { updatesDisabled } = useConfig();
const isSharePage = pathname.includes('/share/');
const allowUpdate = user?.isAdmin && !updatesDisabled && !isSharePage;
2020-08-05 07:45:05 +02:00
2020-07-24 04:56:55 +02:00
return (
2022-03-01 03:39:37 +01:00
<>
2022-08-09 23:58:27 +02:00
{allowUpdate && <UpdateNotice />}
2022-03-01 03:39:37 +01:00
<header className={classNames(styles.header, 'row')}>
<div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} />
2022-08-09 23:58:27 +02:00
<Link href={isSharePage ? HOMEPAGE_URL : '/'}>umami</Link>
2022-03-01 03:39:37 +01:00
</div>
2022-03-01 03:39:37 +01:00
{user && (
<>
<HamburgerButton />
<div className={styles.links}>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
<Link href="/realtime">
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
2022-10-13 00:35:33 +02:00
</Link>
{!process.env.isCloudMode && (
<Link href="/settings">
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
)}
</div>
</>
2022-03-01 03:39:37 +01:00
)}
<div className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />
2022-10-13 01:29:44 +02:00
{user && <UserButton />}
2020-09-08 00:25:09 +02:00
</div>
2022-03-01 03:39:37 +01:00
</header>
</>
2020-07-24 04:56:55 +02:00
);
}