2023-01-19 00:05:39 +01:00
|
|
|
import { useState } from 'react';
|
2023-01-31 06:44:07 +01:00
|
|
|
import { Icon, Text } from 'react-basics';
|
2023-03-22 05:28:36 +01:00
|
|
|
import Link from 'next/link';
|
2023-01-19 00:05:39 +01:00
|
|
|
import classNames from 'classnames';
|
2023-01-31 06:44:07 +01:00
|
|
|
import Icons from 'components/icons';
|
2023-02-04 17:59:52 +01:00
|
|
|
import ThemeButton from 'components/input/ThemeButton';
|
|
|
|
import LanguageButton from 'components/input/LanguageButton';
|
2023-03-22 05:28:36 +01:00
|
|
|
import ProfileButton from 'components/input/ProfileButton';
|
2023-01-19 00:05:39 +01:00
|
|
|
import styles from './NavBar.module.css';
|
2023-02-28 05:03:04 +01:00
|
|
|
import useConfig from 'hooks/useConfig';
|
2023-03-22 05:28:36 +01:00
|
|
|
import useMessages from 'hooks/useMessages';
|
2023-01-19 00:05:39 +01:00
|
|
|
|
|
|
|
export default function NavBar() {
|
2023-02-28 05:03:04 +01:00
|
|
|
const { cloudMode } = useConfig();
|
2023-03-22 05:28:36 +01:00
|
|
|
const { formatMessage, labels } = useMessages();
|
2023-01-19 00:05:39 +01:00
|
|
|
const [minimized, setMinimized] = useState(false);
|
2023-01-28 06:53:13 +01:00
|
|
|
|
2023-03-22 05:28:36 +01:00
|
|
|
const links = [
|
2023-01-31 06:44:07 +01:00
|
|
|
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
|
|
|
|
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> },
|
2023-03-22 05:28:36 +01:00
|
|
|
!cloudMode && { label: formatMessage(labels.settings), url: '/settings', icon: <Icons.Gear /> },
|
2023-01-31 06:44:07 +01:00
|
|
|
].filter(n => n);
|
2023-01-19 00:05:39 +01:00
|
|
|
|
|
|
|
const handleMinimize = () => setMinimized(state => !state);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
|
2023-03-22 05:28:36 +01:00
|
|
|
<div className={styles.logo} onClick={handleMinimize}>
|
2023-01-19 00:05:39 +01:00
|
|
|
<Icon size="lg">
|
2023-01-31 06:44:07 +01:00
|
|
|
<Icons.Logo />
|
2023-01-19 00:05:39 +01:00
|
|
|
</Icon>
|
|
|
|
<Text className={styles.text}>umami</Text>
|
|
|
|
</div>
|
2023-03-22 05:28:36 +01:00
|
|
|
<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 />}
|
2023-01-19 00:05:39 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|