From a4fe915c2a72120061d940c944a073a9ee63e32b Mon Sep 17 00:00:00 2001
From: Jose <jomaamga@outlook.es>
Date: Mon, 17 Mar 2025 02:34:54 +0100
Subject: [PATCH] changes in frontend

---
 frontend/src/components/SideMenu.jsx |  6 ++++-
 frontend/src/css/SideMenu.css        | 33 ++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/SideMenu.jsx b/frontend/src/components/SideMenu.jsx
index 659da66..b720d72 100644
--- a/frontend/src/components/SideMenu.jsx
+++ b/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 (
diff --git a/frontend/src/css/SideMenu.css b/frontend/src/css/SideMenu.css
index 6428305..920435c 100644
--- a/frontend/src/css/SideMenu.css
+++ b/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;
 }
\ No newline at end of file