More refactoring.

This commit is contained in:
Mike Cao 2023-01-30 21:44:07 -08:00
parent 5f15ad0807
commit 02a1438cfe
41 changed files with 196 additions and 721 deletions

View file

@ -1,32 +1,38 @@
import { useState } from 'react';
import { useIntl } from 'react-intl';
import { Icon, Text, Icons } from 'react-basics';
import { Icon, Text } from 'react-basics';
import classNames from 'classnames';
import { Dashboard, Logo, Profile, User, Users, Clock, Globe } from 'components/icons';
import ThemeButton from '../buttons/ThemeButton';
import Icons from 'components/icons';
import ThemeButton from 'components/buttons/ThemeButton';
import LanguageButton from 'components/buttons/LanguageButton';
import LogoutButton from 'components/buttons/LogoutButton';
import { labels } from 'components/messages';
import useUser from 'hooks/useUser';
import NavGroup from './NavGroup';
import styles from './NavBar.module.css';
export default function NavBar() {
const { user } = useUser();
const { formatMessage } = useIntl();
const [minimized, setMinimized] = useState(false);
const tooltipPosition = minimized ? 'right' : 'top';
const analytics = [
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Dashboard /> },
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Clock /> },
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> },
{ label: formatMessage(labels.queries), url: '/queries', icon: <Icons.Search /> },
];
const settings = [
{ label: formatMessage(labels.websites), url: '/settings/websites', icon: <Globe /> },
{ label: formatMessage(labels.users), url: '/settings/users', icon: <User /> },
{ label: formatMessage(labels.teams), url: '/settings/teams', icon: <Users /> },
{ label: formatMessage(labels.profile), url: '/settings/profile', icon: <Profile /> },
];
{ label: formatMessage(labels.websites), url: '/settings/websites', icon: <Icons.Globe /> },
user?.isAdmin && {
label: formatMessage(labels.users),
url: '/settings/users',
icon: <Icons.User />,
},
{ label: formatMessage(labels.teams), url: '/settings/teams', icon: <Icons.Users /> },
{ label: formatMessage(labels.profile), url: '/settings/profile', icon: <Icons.Profile /> },
].filter(n => n);
const handleMinimize = () => setMinimized(state => !state);
@ -34,7 +40,7 @@ export default function NavBar() {
<div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
<div className={styles.header} onClick={handleMinimize}>
<Icon size="lg">
<Logo />
<Icons.Logo />
</Icon>
<Text className={styles.text}>umami</Text>
<Icon size="sm" rotate={minimized ? -90 : 90} className={styles.icon}>