making frontend responsive starting item backend routes

frontend/src/components/sidebar/SidebarLinksGroup.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { Group, Box, Collapse, ThemeIcon, Text, UnstyledButton, createStyles } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
 import { BiChevronLeft, BiChevronRight } from 'react-icons/bi';
 import { useAtom } from 'jotai';
-import { activePageAtom, roomFilterAtom } from '../../state/main';
+import { activePageAtom, menuOpenedAtom, roomFilterAtom } from '../../state/main';
 import { Link } from 'react-router-dom';
 
 
@@ -35,12 +36,13 @@ const useStyles = createStyles((theme) => ({
     }`,
 
     '&:hover': {
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[1],
       color: theme.colorScheme === 'dark' ? theme.white : theme.black,
     },
-    '&:active': {
-        backgroundColor: theme.colorScheme  === 'dark' ? theme.colors.dark[7] : theme.colors.gray[6]
-    }
+  },
+
+  activeLink: {
+    backgroundColor: theme.colorScheme  === 'dark' ? theme.colors.dark[7] : theme.colors.gray[3],
   },
 
   chevron: {
@@ -51,12 +53,17 @@ const useStyles = createStyles((theme) => ({
 
 export function LinksGroup(props) {
   const { icon: Icon, label, initiallyOpened, links } = props
-  const { classes, theme } = useStyles();
+
+  const isMobile = useMediaQuery('(max-width: 768px)')
   const hasLinks = Array.isArray(links);
   const [opened, setOpened] = useState(initiallyOpened || false);
   // Navigation State
   const [activePage, setActivePage] = useAtom(activePageAtom)
   const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
+  const [menuOpened, setMenuOpened] = useAtom(menuOpenedAtom)
+
+
+  const { classes, theme, cx } = useStyles();
 
   const ChevronIcon = theme.dir === 'ltr' ? BiChevronRight : BiChevronLeft;
 
@@ -66,6 +73,9 @@ export function LinksGroup(props) {
         setRoomFilter({})
     }
     console.log("navigate to: ", location)
+    if (isMobile && menuOpened) {
+        setMenuOpened(false)
+    }
     setActivePage(location)
     }
 
@@ -75,11 +85,10 @@ export function LinksGroup(props) {
     <>
         <Link
         component={Link}
-        className={activePage === label.toLowerCase() ? classes.link : classes.link}
+        className={activePage === link.label.toLowerCase() ? cx(classes.link, classes.activeLink) : classes.link}
         to={link.link}
-        // href={link.link}
         key={link.label}
-        onClick={(e) => {navigate(e, label.toLowerCase())}}
+        onClick={(e) => {navigate(e, link.label.toLowerCase())}}
         >
         {link.label}
         </Link>