frontend to backend communication working, starting on locations page

frontend/src/components/SideBar.js

@@ -1,12 +1,26 @@
 import React, {useState } from 'react';
-import { Navbar, Text, Group, ThemeIcon, Button } from '@mantine/core';
+import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
+import { createStyles } from '@mantine/styles';
 import { BsMap } from 'react-icons/bs'
-import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
 
 
+const useStyles = createStyles((theme) => ({
+    button: {
+      display: 'block',
+      width: '100%',
+      padding: theme.spacing.xs,
+      borderRadius: theme.radius.sm,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+      backgroundColor: 'transparent',
+  
+      '&:hover': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+      },
+    },
+  }));
 
 function SideBar(props) {
-
+    const { classes } = useStyles();
 
     return (
         <Navbar
@@ -17,14 +31,13 @@ function SideBar(props) {
             hidden={!props.opened}
             width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
         >
-            <Router>
-                <Routes>
-                    <Route path="/" element={<Home />} />
-                </Routes>
-            <Button component={Link} to="/locations" leftIcon={<ThemeIcon><BsMap /></ThemeIcon>}>
-                <Text>Locations</Text>
-            </Button>
-            </Router>
+            <UnstyledButton className={classes.button} onClick={() => props.setCurrentPage("locations")} >
+                <Group>
+                    <BsMap />
+                    <Text>Locations</Text>
+                </Group>
+
+            </UnstyledButton>
            
         </Navbar>
     )