Setting Offcanvas created and functional

frontend/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './pages/App';
 import reportWebVitals from './reportWebVitals';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

frontend/src/pages/App.js

@@ -28,7 +28,7 @@ function App() {
         <Route path="/garage/vehicle-history/upload" element={<UploadVehicleHistory />} />
         <Route path="/garage/vehicle-history/manual" element={<ManualVehicleHistory />} />
 
-        <Route path="/settings" element={<Settings />}/>
+        <Route path="/." element={<Settings />}/>
       </Routes>
     </div>
     </BrowserRouter>

frontend/src/pages/Garage.js

@@ -2,6 +2,7 @@ import {BrowserRouter, Routes, Route, Link, useNavigate} from "react-router-dom"
 import GarageNavbar from "./GarageNavbar";
 import AddRemoveNavbar from "./AddRemoveNavbar";
 import VehicleInfo from "./VehicleInfo";
+import Settings from "./Settings";
 
 function Garage() {
     // TODO: REPLACE WITH REAL VALUES, THESE ARE USED AS TEST VALUES

frontend/src/pages/NavBar.js

@@ -1,12 +1,13 @@
 import {Link} from "react-router-dom";
+import Settings from "./Settings";
 
 function NavBar() {
     return (
         <div>
             <Link to="/">Home</Link>
             <Link to="/login">Login</Link>
             <Link to="/garage">Garage</Link>
-            <Link to="/settings">Settings</Link>
+            <Settings />
         </div>
     );
 }

frontend/src/pages/Settings.js

@@ -1,32 +1,29 @@
 import { useState } from 'react';
-import ReactDOM from 'react-dom';
-import Offcanvas from "react-bootstrap/Offcanvas";
-import Button from "react-bootstrap/Button";
+import Button from 'react-bootstrap/Button';
+import Offcanvas from 'react-bootstrap/Offcanvas';
 
 export const Settings = () => {
     const [darkMode, setDarkMode] = useState(false);
     const [notifications, setNotifications] = useState(false);
     const [unitOfMeasurement, setUnitOfMeasurement] = useState('metric');
 
-    const [visibility, setVisibility] = useState(false);
-    const handleVisibilityChange = () => {
-        setVisibility(!visibility);
-    }
+    const [show, setShow] = useState(false);
+    const handleShow = () => setShow(!show);
 
     const handleSubmit = (e) => {
         e.preventDefault();
     }
 
     return (
         <div>
-            <Button variant="primary" onClick={handleVisibilityChange} placement="right">Settings</Button>
-            <Offcanvas show={visibility}>
+            <Button variant="primary" onClick={handleShow}>Settings</Button>
+            <Offcanvas show={show} onHide={handleShow} placement="end">
                 <Offcanvas.Header closeButton>
-                    <Offcanvas.Title></Offcanvas.Title>
+                    <Offcanvas.Title>Settings</Offcanvas.Title>
                 </Offcanvas.Header>
                 <Offcanvas.Body>
                     <div>
-                        <label>Dark Mode</label>
+                        <label >Dark Mode</label>
                         <input type="checkbox" checked={darkMode} onChange={(e) => setDarkMode(e.target.checked)}/>
                     </div>
                     <div>