watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 08:07:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Updated navigation.

Browse source
This commit is contained in:
Mike Cao 2023-03-21 21:28:36 -07:00
parent 611169c65f
commit fc2a8f3d9f
13 changed files with 156 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

61
components/layout/NavBar.js
View file

@ -1,69 +1,50 @@
import { useState } from 'react';
import { useIntl } from 'react-intl';
import { Icon, Text } from 'react-basics';
import Link from 'next/link';
import classNames from 'classnames';
import Icons from 'components/icons';
import ThemeButton from 'components/input/ThemeButton';
import LanguageButton from 'components/input/LanguageButton';
import LogoutButton from 'components/input/LogoutButton';
import { labels } from 'components/messages';
import useUser from 'hooks/useUser';
import NavGroup from './NavGroup';
import ProfileButton from 'components/input/ProfileButton';
import styles from './NavBar.module.css';
import useConfig from 'hooks/useConfig';
import useMessages from 'hooks/useMessages';
export default function NavBar() {
const { user } = useUser();
const { cloudMode } = useConfig();
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const [minimized, setMinimized] = useState(false);
const tooltipPosition = minimized ? 'right' : 'top';
const analytics = [
const links = [
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> },
];
const settings = [
!cloudMode && {
label: formatMessage(labels.websites),
url: '/settings/websites',
icon: <Icons.Globe />,
},
user?.isAdmin && {
label: formatMessage(labels.users),
url: '/settings/users',
icon: <Icons.User />,
},
!cloudMode && {
label: formatMessage(labels.teams),
url: '/settings/teams',
icon: <Icons.Users />,
},
{ label: formatMessage(labels.profile), url: '/settings/profile', icon: <Icons.Profile /> },
!cloudMode && { label: formatMessage(labels.settings), url: '/settings', icon: <Icons.Gear /> },
].filter(n => n);
const handleMinimize = () => setMinimized(state => !state);
return (
<div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
<div className={styles.header} onClick={handleMinimize}>
<div className={styles.logo} onClick={handleMinimize}>
<Icon size="lg">
<Icons.Logo />
</Icon>
<Text className={styles.text}>umami</Text>
<Icon size="sm" rotate={minimized ? -90 : 90} className={styles.icon}>
<Icons.ChevronDown />
</Icon>
</div>
<NavGroup title={formatMessage(labels.analytics)} items={analytics} minimized={minimized} />
<NavGroup title={formatMessage(labels.settings)} items={settings} minimized={minimized} />
<div className={styles.footer}>
<div className={styles.buttons}>
<ThemeButton tooltipPosition={tooltipPosition} />
<LanguageButton tooltipPosition={tooltipPosition} />
{!cloudMode && <LogoutButton tooltipPosition={tooltipPosition} />}
</div>
<div className={styles.links}>
{links.map(({ url, icon, label }) => {
return (
<Link key={url} href={url}>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</Link>
);
})}
</div>
<div className={styles.actions}>
<ThemeButton />
<LanguageButton />
{!cloudMode && <ProfileButton />}
</div>
</div>
);