umami/components/layout/NavBar.js

60 lines
1.9 KiB
JavaScript
Raw Normal View History

import { useState } from 'react';
2023-03-24 18:55:20 +01:00
import { Icon, Text, Row, Column } from 'react-basics';
2023-03-22 05:28:36 +01:00
import Link from 'next/link';
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';
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-03-23 19:46:49 +01:00
import { useRouter } from 'next/router';
export default function NavBar() {
2023-03-23 19:46:49 +01:00
const { pathname } = useRouter();
2023-02-28 05:03:04 +01:00
const { cloudMode } = useConfig();
2023-03-22 05:28:36 +01:00
const { formatMessage, labels } = useMessages();
2023-03-22 05:28:36 +01:00
const links = [
2023-03-24 18:55:20 +01:00
{ label: formatMessage(labels.dashboard), url: '/dashboard' },
{ label: formatMessage(labels.realtime), url: '/realtime' },
!cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
2023-01-31 06:44:07 +01:00
].filter(n => n);
return (
2023-03-24 18:55:20 +01:00
<div className={classNames(styles.navbar)}>
<Row>
<Column className={styles.left}>
<div className={styles.logo}>
<Icon size="lg">
<Icons.Logo />
</Icon>
<Text className={styles.text}>umami</Text>
</div>
<div className={styles.links}>
{links.map(({ url, label }) => {
return (
<Link
key={url}
href={url}
className={classNames({ [styles.selected]: pathname.startsWith(url) })}
>
<Text>{label}</Text>
</Link>
);
})}
</div>
</Column>
<Column className={styles.right}>
<div className={styles.actions}>
<ThemeButton />
<LanguageButton />
2023-04-07 05:34:02 +02:00
<ProfileButton />
2023-03-24 18:55:20 +01:00
</div>
</Column>
</Row>
</div>
);
}