reworking sidebar

frontend/src/components/sidebar/SidebarLinksGroup.js

@@ -0,0 +1,114 @@
+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}
+    </>
+  );
+}

frontend/src/components/sidebar/UserButton.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  UnstyledButton,
+  Group,
+  Avatar,
+  Text,
+  createStyles,
+} from '@mantine/core';
+import { BiChevronRight } from 'react-icons/bi';
+
+const useStyles = createStyles((theme) => ({
+  user: {
+    display: 'block',
+    width: '100%',
+    padding: theme.spacing.md,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+    },
+  },
+}));
+
+
+export function UserButton(props) {
+  const { image, name, email, icon, ...others } = props
+  const { classes } = useStyles();
+
+  return (
+    <UnstyledButton className={classes.user} {...others}>
+      <Group>
+        <Avatar src={image} radius="xl" />
+
+        <div style={{ flex: 1 }}>
+          <Text size="sm" weight={500}>
+            {name}
+          </Text>
+
+          <Text color="dimmed" size="xs">
+            {email}
+          </Text>
+        </div>
+
+        {icon || <BiChevronRight size={14} />}
+      </Group>
+    </UnstyledButton>
+  );
+}