more frontend formatting and logic for locations and rooms

frontend/src/components/SideBar.js

@@ -1,6 +1,6 @@
 import React, {useState } from 'react';
 import { useAtom } from 'jotai';
-import { activePageAtom } from '../state/main';
+import { activePageAtom, roomFilterAtom } from '../state/main';
 import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import { createStyles } from '@mantine/styles';
@@ -39,6 +39,14 @@ const useStyles = createStyles((theme) => ({
 function SideBar(props) {
     const { classes } = useStyles();
     const [activePage, setActivePage] = useAtom(activePageAtom)
+    const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
+
+    const changeView = (newView) => {
+        if (newView === "rooms") {
+            setRoomFilter({})
+        }
+        setActivePage(newView)
+    }
 
 
     return (
@@ -61,7 +69,7 @@ function SideBar(props) {
                 </Group>
 
             </UnstyledButton> */}
-            <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => setActivePage("rooms")} >
+            <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => changeView("rooms")} >
                 <Group>
                     <BsMap />
                     <Text>Rooms</Text>