working on frontend, displaying locations, menu styling

frontend/src/components/AppHeader.js

@@ -1,12 +1,14 @@
-import React, {useState } from 'react';
+import React, {useState, useEffect, useContext } from 'react';
 import { Header, MediaQuery, Burger, Text, ThemeIcon, Group, Title } from '@mantine/core';
 import { useMantineTheme } from '@mantine/core';
 import { BsHouseDoor } from 'react-icons/bs'
 
 
+
 function AppHeader(props) {
   const theme = useMantineTheme();
 
+
   return (
       <Header height={70} padding="md">
       {/* You can handle other responsive styles with MediaQuery component or createStyles function */}

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>
     )

frontend/src/components/pages/Locations.js

@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
-import APIContext from '../../App';
+import { APIContext } from '../../App';
 import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group } from '@mantine/core'
 import { useNotifications } from '@mantine/notifications';
 
@@ -10,7 +10,6 @@ function LocationsPage() {
     // const [opened, setOpened] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [locations, setLocations] = useState([])
-    const [baseURL, setBaseURL] = useState("")
 
     const serverConfig = useContext(APIContext);
 
@@ -20,10 +19,7 @@ function LocationsPage() {
         setIsLoading(true)
         async function fetchSettings() {
           backendAPI.get('/locations').then(results => {
-            console.log("CONFIG: ", serverConfig)
-            //console.log("baseurl: ", results.config.baseURL)
-            setBaseURL(results.config.baseURL)
-            console.log("URL", `${results.data[0]}`)
+            console.log("CONFIG IN LOCATIONS: ", serverConfig)
             setLocations(results.data)
             setIsLoading(false)
           }).catch(err => {
@@ -48,15 +44,15 @@ function LocationsPage() {
         <Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
         <SimpleGrid cols={4} spacing="xl">
             { locations.map((location, idx) => 
-                <Card key={idx} shadow="sm" padding="md">
+                <Card key={`${idx}-${location.Name}`} shadow="sm" padding="md">
                     <Card.Section>
-                        <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image>
+                        {location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
                     </Card.Section>
                     <Group position="apart">
                         <Text weight={500}>{location.Name}</Text>
-                        <Badge color="pink" variant="light">
+                        {/* <Badge color="pink" variant="light">
                             On Sale
-                        </Badge>
+                        </Badge> */}
                     </Group>
                     <Text size="sm">{location.Description}</Text>
                 </Card>