changes in frontend

frontend/src/components/SideMenu.jsx

@@ -1,7 +1,7 @@
 import "../css/SideMenu.css";
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { faTimes, faHome } from '@fortawesome/free-solid-svg-icons';
 
 import { DataProvider } from '../contexts/DataContext';
 import { useData } from '../contexts/DataContext';
@@ -63,9 +63,13 @@ const SideMenuContent = ({ isOpen, onClose }) => {
 
     return (
         <div className={`side-menu ${isOpen ? 'open' : ''} ${theme}`}>
+            <button className="home-btn" onClick={() => window.location.href = '/'}>
+                <FontAwesomeIcon icon={faHome} />
+            </button>
             <button className="close-btn" onClick={onClose}>
                 <FontAwesomeIcon icon={faTimes} />
             </button>
+            <hr className="separation w-100"></hr>
             <div className="d-flex flex-column gap-3 mt-5">
                 {data.map(device => {
                     return (

frontend/src/css/SideMenu.css

@@ -54,4 +54,37 @@
 
 .side-menu .close-btn:hover {
     color: var(--primary-color);
+}
+
+.side-menu .home-btn {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    background: none;
+    border: none;
+    font-size: 30px;
+    cursor: pointer;
+}
+
+.side-menu .home-btn .fa-home {
+    width: 30px;
+    height: 30px;
+}
+
+.side-menu .home-btn.light {
+    color: black;
+}
+
+.side-menu .home-btn.dark {
+    color: white;
+}
+
+.side-menu .home-btn:hover {
+    color: var(--primary-color);
+}
+
+hr.separation {
+    margin: 60px 0;
+    border: none;
+    border-top: 1px solid #ccc;
 }