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

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