working on frontend, displaying locations, menu styling

frontend/src/components/SideBar.js

@@ -14,13 +14,33 @@ const useStyles = createStyles((theme) => ({
       backgroundColor: 'transparent',
   
       '&:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],
       },
     },
+    activeButton: {
+        display: 'block',
+        width: '100%',
+        padding: theme.spacing.xs,
+        borderRadius: theme.radius.sm,
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        backgroundColor: theme.colors.blue,
+    
+        // '&:hover': {
+        //   backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.blue[4],
+        // },
+      },
   }));
 
+
+
 function SideBar(props) {
     const { classes } = useStyles();
+    const [activePage, setActivePage] = useState("")
+
+    function handlePageChange(page) {
+        props.setCurrentPage(page)
+        setActivePage(page)
+      }
 
     return (
         <Navbar
@@ -31,13 +51,20 @@ function SideBar(props) {
             hidden={!props.opened}
             width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
         >
-            <UnstyledButton className={classes.button} onClick={() => props.setCurrentPage("locations")} >
+            <UnstyledButton className={activePage === "locations" ? classes.activeButton : classes.button} onClick={() => handlePageChange("locations")} >
                 <Group>
                     <BsMap />
                     <Text>Locations</Text>
                 </Group>
 
             </UnstyledButton>
+            <UnstyledButton className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => handlePageChange("rooms")} >
+                <Group>
+                    <BsMap />
+                    <Text>Rooms</Text>
+                </Group>
+
+            </UnstyledButton>
            
         </Navbar>
     )