umami/components/layout/Header.js

46 lines
1.5 KiB
JavaScript
Raw Normal View History

2020-07-24 04:56:55 +02:00
import React from 'react';
2020-09-06 02:27:01 +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';
import UserButton from '../common/UserButton';
import Icon from '../common/Icon';
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';
2020-09-08 00:25:09 +02:00
import LanguageButton from '../common/LanguageButton';
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);
2020-07-24 04:56:55 +02:00
return (
2020-08-15 10:17:15 +02:00
<header className="container">
<div className={classNames(styles.header, 'row align-items-center')}>
<div className="col-12 col-md-3">
2020-08-07 07:03:02 +02:00
<div className={styles.title}>
2020-08-09 08:48:43 +02:00
<Icon icon={<Logo />} size="large" className={styles.logo} />
2020-08-23 07:01:14 +02:00
<Link href={user ? '/' : 'https://umami.is'}>umami</Link>
2020-08-07 07:03:02 +02:00
</div>
2020-08-05 07:45:05 +02:00
</div>
<div className="col-12 col-md-9">
2020-09-10 01:43:37 +02:00
<div className={styles.nav}>
{user ? (
<>
<Link href="/dashboard">
2020-09-17 07:29:40 +02:00
<FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />
2020-09-10 01:43:37 +02:00
</Link>
<Link href="/settings">
2020-09-17 07:29:40 +02:00
<FormattedMessage id="label.settings" defaultMessage="Settings" />
2020-09-10 01:43:37 +02:00
</Link>
<LanguageButton menuAlign="right" />
<UserButton />
</>
) : (
2020-09-08 00:25:09 +02:00
<LanguageButton menuAlign="right" />
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>
2020-07-24 04:56:55 +02:00
</header>
);
}