watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 15:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

New mobile menu.

Browse source
This commit is contained in:
Mike Cao 2022-02-28 18:39:37 -08:00
parent 18efd4d101
commit 34ad1d9c39
14 changed files with 189 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

79
components/layout/Header.js
View file

@ -1,71 +1,48 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Link from 'components/common/Link';
import Icon from 'components/common/Icon';
import LanguageButton from 'components/settings/LanguageButton';
import ThemeButton from 'components/settings/ThemeButton';
import HamburgerButton from 'components/common/HamburgerButton';
import UpdateNotice from 'components/common/UpdateNotice';
import UserButton from 'components/settings/UserButton';
import Button from 'components/common/Button';
import Logo from 'assets/logo.svg';
import styles from './Header.module.css';
import useLocale from 'hooks/useLocale';
import XMark from 'assets/xmark.svg';
import Bars from 'assets/bars.svg';
import useUser from 'hooks/useUser';
import { HOMEPAGE_URL } from 'lib/constants';
export default function Header() {
const { user } = useUser();
const [active, setActive] = useState(false);
const { dir } = useLocale();
function handleClick() {
setActive(state => !state);
}
return (
<nav className="container" dir={dir}>
<>
{user?.is_admin && <UpdateNotice />}
<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>
</div>
<Button
className={styles.burger}
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>
</div>
<header className={classNames(styles.header, 'row')}>
<div className={styles.title}>
<Icon icon={<Logo />} size="large" className={styles.logo} />
<Link href={user ? '/' : HOMEPAGE_URL}>umami</Link>
</div>
</div>
</nav>
<HamburgerButton />
{user && (
<div className={styles.links}>
<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 className={styles.buttons}>
<ThemeButton />
<LanguageButton menuAlign="right" />
{user && <UserButton />}
</div>
</header>
</>
);
}