114 lines
3.5 KiB
JavaScript
114 lines
3.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Group, Box, Collapse, ThemeIcon, Text, UnstyledButton, createStyles } from '@mantine/core';
|
|
import { BiChevronLeft, BiChevronRight } from 'react-icons/bi';
|
|
import { useAtom } from 'jotai';
|
|
import { activePageAtom, roomFilterAtom } from '../../state/main';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
control: {
|
|
fontWeight: 500,
|
|
display: 'block',
|
|
width: '100%',
|
|
padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
|
|
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
|
|
fontSize: theme.fontSizes.sm,
|
|
|
|
'&:hover': {
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
|
|
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
|
|
},
|
|
},
|
|
|
|
link: {
|
|
fontWeight: 500,
|
|
display: 'block',
|
|
textDecoration: 'none',
|
|
padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
|
|
paddingLeft: 31,
|
|
marginLeft: 30,
|
|
fontSize: theme.fontSizes.sm,
|
|
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
|
|
borderLeft: `1px solid ${
|
|
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
|
|
}`,
|
|
|
|
'&:hover': {
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
|
|
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
|
|
},
|
|
'&:active': {
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[6]
|
|
}
|
|
},
|
|
|
|
chevron: {
|
|
transition: 'transform 200ms ease',
|
|
},
|
|
}));
|
|
|
|
|
|
export function LinksGroup(props) {
|
|
const { icon: Icon, label, initiallyOpened, links } = props
|
|
const { classes, theme } = useStyles();
|
|
const hasLinks = Array.isArray(links);
|
|
const [opened, setOpened] = useState(initiallyOpened || false);
|
|
// Navigation State
|
|
const [activePage, setActivePage] = useAtom(activePageAtom)
|
|
const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
|
|
|
|
const ChevronIcon = theme.dir === 'ltr' ? BiChevronRight : BiChevronLeft;
|
|
|
|
const navigate = (event, location) => {
|
|
// event.preventDefault()
|
|
if (location === "rooms") {
|
|
setRoomFilter({})
|
|
}
|
|
console.log("navigate to: ", location)
|
|
setActivePage(location)
|
|
}
|
|
|
|
|
|
|
|
const items = (hasLinks ? links : []).map((link) => (
|
|
<>
|
|
<Link
|
|
component={Link}
|
|
className={activePage === label.toLowerCase() ? classes.link : classes.link}
|
|
to={link.link}
|
|
// href={link.link}
|
|
key={link.label}
|
|
onClick={(e) => {navigate(e, label.toLowerCase())}}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</>
|
|
));
|
|
|
|
|
|
return (
|
|
<>
|
|
<UnstyledButton onClick={() => setOpened((o) => !o)} className={classes.control}>
|
|
<Group position="apart" spacing={0}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<ThemeIcon variant="light" size={30}>
|
|
<Icon size={18} />
|
|
</ThemeIcon>
|
|
<Box ml="md">{label}</Box>
|
|
</Box>
|
|
{hasLinks && (
|
|
<ChevronIcon
|
|
className={classes.chevron}
|
|
size={14}
|
|
style={{
|
|
transform: opened ? `rotate(${theme.dir === 'rtl' ? -90 : 90}deg)` : 'none',
|
|
}}
|
|
/>
|
|
)}
|
|
</Group>
|
|
</UnstyledButton>
|
|
{hasLinks ? <Collapse in={opened}>{items}</Collapse> : null}
|
|
</>
|
|
);
|
|
} |