umami/components/layout/NavGroup.js

59 lines
1.6 KiB
JavaScript
Raw Normal View History

import { useState } from 'react';
2023-02-04 17:59:52 +01:00
import { Icon, Text, Tooltip } from 'react-basics';
import classNames from 'classnames';
import { useRouter } from 'next/router';
import Link from 'next/link';
2023-02-04 17:59:52 +01:00
import Icons from 'components/icons';
import styles from './NavGroup.module.css';
2023-04-21 17:00:42 +02:00
export function NavGroup({
title,
items,
defaultExpanded = true,
allowExpand = true,
minimized = false,
}) {
const { pathname } = useRouter();
const [expanded, setExpanded] = useState(defaultExpanded);
const handleExpand = () => setExpanded(state => !state);
return (
<div
className={classNames(styles.group, {
[styles.expanded]: expanded,
[styles.minimized]: minimized,
})}
>
2023-01-21 02:12:53 +01:00
{title && (
<div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
<Text>{title}</Text>
<Icon size="sm" rotate={expanded ? 0 : -90}>
<Icons.ChevronDown />
2023-01-21 02:12:53 +01:00
</Icon>
</div>
)}
<div className={styles.body}>
2023-01-21 02:12:53 +01:00
{items.map(({ label, url, icon, divider }) => {
return (
2023-02-04 17:59:52 +01:00
<Tooltip key={label} label={label} position="right" disabled={!minimized}>
2023-03-09 19:39:59 +01:00
<Link
href={url}
className={classNames(styles.item, {
[styles.divider]: divider,
[styles.selected]: pathname.startsWith(url),
})}
>
<Icon>{icon}</Icon>
<Text className={styles.text}>{label}</Text>
2023-02-04 17:59:52 +01:00
</Link>
</Tooltip>
);
})}
</div>
</div>
);
}
2023-04-21 17:00:42 +02:00
export default NavGroup;