appshell complete need to figure out react-router with the sidebar

frontend/src/components/AppHeader.js

@@ -0,0 +1,35 @@
+import React, {useState } 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 */}
+      <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
+        <MediaQuery smallerThan="sm" styles={{ display: 'none' }}>
+          <Burger
+            opened={props.opened}
+            onClick={() => props.setOpened((o) => !o)}
+            size="sm"
+            color={theme.colors.gray[6]}
+            mr="xl"
+          />
+        </MediaQuery>
+        <Group>
+          <ThemeIcon size="xl"><BsHouseDoor /></ThemeIcon>
+          <Title><Text inherit variant="gradient" gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}>goInventorize</Text></Title>
+        </Group>
+
+      </div>
+    </Header>
+  )
+}
+
+  
+
+export default AppHeader

frontend/src/components/SideBar.js

@@ -0,0 +1,35 @@
+import React, {useState } from 'react';
+import { Navbar, Text, Group, ThemeIcon, Button } from '@mantine/core';
+import { BsMap } from 'react-icons/bs'
+import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'
+
+
+
+function SideBar(props) {
+
+
+    return (
+        <Navbar
+            padding="md"
+            // Breakpoint at which navbar will be hidden if hidden prop is true
+            hiddenBreakpoint="sm"
+            // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
+            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>
+           
+        </Navbar>
+    )
+}
+
+  
+
+export default SideBar

frontend/src/components/pages/Home.js

@@ -1,22 +1,20 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
 import APIContext from '../../App';
-import { Modal, Button, Text, Group, TextInput, Loader } from '@mantine/core';
 
 
 
 
 function App() {
+    const [opened, setOpened] = useState(false);
 
-    
     const serverConfig = useContext(APIContext);
 
 
     return (
         <>
-            This page is the home page!
         </>
 
-);
-    }
+    );
+}
 
 export default App;