watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 23:27:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Updated layout for settings pages.

Browse source
This commit is contained in:
Mike Cao 2023-03-24 10:55:20 -07:00
parent 9260e5bc33
commit 43ef6884df
16 changed files with 124 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

67
components/layout/NavBar.js
View file

@ -1,5 +1,5 @@
import { useState } from 'react';
import { Icon, Text } from 'react-basics';
import { Icon, Text, Row, Column } from 'react-basics';
import Link from 'next/link';
import classNames from 'classnames';
import Icons from 'components/icons';
@ -15,42 +15,45 @@ export default function NavBar() {
const { pathname } = useRouter();
const { cloudMode } = useConfig();
const { formatMessage, labels } = useMessages();
const [minimized, setMinimized] = useState(false);
const links = [
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Icons.Dashboard /> },
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Icons.Clock /> },
!cloudMode && { label: formatMessage(labels.settings), url: '/settings', icon: <Icons.Gear /> },
{ label: formatMessage(labels.dashboard), url: '/dashboard' },
{ label: formatMessage(labels.realtime), url: '/realtime' },
!cloudMode && { label: formatMessage(labels.settings), url: '/settings' },
].filter(n => n);
const handleMinimize = () => setMinimized(state => !state);
return (
<div className={classNames(styles.navbar, { [styles.minimized]: minimized })}>
<div className={styles.logo} onClick={handleMinimize}>
<Icon size="lg">
<Icons.Logo />
</Icon>
<Text className={styles.text}>umami</Text>
</div>
<div className={styles.links}>
{links.map(({ url, icon, label }) => {
return (
<Link
key={url}
href={url}
className={classNames({ [styles.selected]: pathname.startsWith(url) })}
>
<Text>{label}</Text>
</Link>
);
})}
</div>
<div className={styles.actions}>
<ThemeButton />
<LanguageButton />
{!cloudMode && <ProfileButton />}
</div>
<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 />
{!cloudMode && <ProfileButton />}
</div>
</Column>
</Row>
</div>
);
}