umami/components/layout/Header.js

73 lines
2.6 KiB
JavaScript
Raw Normal View History

import React, { useState } from 'react';
2021-05-15 10:29:39 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-05 07:45:05 +02:00
import { useSelector } from 'react-redux';
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';
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';
2021-06-08 06:25:45 +02:00
import Button from 'components/common/Button';
2020-08-07 07:03:02 +02:00
import Logo from 'assets/logo.svg';
2020-08-05 07:45:05 +02:00
import styles from './Header.module.css';
2021-05-15 10:29:39 +02:00
import useLocale from 'hooks/useLocale';
2021-05-16 08:27:48 +02:00
import { rtlLocales } from 'lib/lang';
2021-06-08 06:25:45 +02:00
import XMark from 'assets/xmark.svg';
import Bars from 'assets/bars.svg';
2020-07-24 04:56:55 +02:00
export default function Header() {
2020-08-05 07:45:05 +02:00
const user = useSelector(state => state.user);
const [active, setActive] = useState(false);
const { locale } = useLocale();
function handleClick() {
setActive(state => !state);
}
2020-08-05 07:45:05 +02:00
2020-07-24 04:56:55 +02:00
return (
2021-05-16 08:27:48 +02:00
<nav className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>
{user?.is_admin && <UpdateNotice />}
2020-08-15 10:17:15 +02:00
<div className={classNames(styles.header, 'row align-items-center')}>
<div className={styles.nav}>
<div className="">
<div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div>
2020-08-07 07:03:02 +02:00
</div>
2021-06-08 06:25:45 +02:00
<Button
className={styles.burger}
2021-06-08 06:25:45 +02:00
icon={active ? <XMark /> : <Bars />}
onClick={handleClick}
/>
{user && (
<div className={styles.items}>
<div className={active ? classNames(styles.active) : ''}>
<Link href="/dashboard">
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
</Link>
<Link href="/realtime">
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
</Link>
<Link href="/settings">
<FormattedMessage id="label.settings" defaultMessage="Settings" />
</Link>
</div>
</div>
)}
<div className={styles.items}>
<div className={active ? classNames(styles.active) : ''}>
<div className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />
{user && <UserButton />}
</div>
</div>
2020-09-10 01:43:37 +02:00
</div>
2020-09-08 00:25:09 +02:00
</div>
2020-08-05 07:45:05 +02:00
</div>
</nav>
2020-07-24 04:56:55 +02:00
);
}