added: fontawesome

created an experimental side menu for linking various pages in the to-be-implemented React Router

frontend/src/components/App.jsx

@@ -4,6 +4,12 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
 import Home from '../pages/Home.jsx'
+import MenuButton from './MenuButton.jsx'
+import SideMenu from './SideMenu.jsx'
+import ThemeButton from '../components/ThemeButton.jsx'
+import Header from '../components/Header.jsx'
+
+import { useState } from 'react'
 
 /**
  * App.jsx
@@ -15,19 +21,40 @@ import Home from '../pages/Home.jsx'
  * - 'leaflet/dist/leaflet.css': Archivo CSS que contiene los estilos para los mapas de Leaflet.
  * - 'bootstrap/dist/css/bootstrap.min.css': Archivo CSS que contiene los estilos de Bootstrap.
  * - 'bootstrap/dist/js/bootstrap.bundle.min.js': Archivo JS que contiene los scripts de Bootstrap.
+ * - Header: Componente que representa el encabezado de la página.
  * - Home: Componente que representa la página principal de la aplicación.
+ * - MenuButton: Componente que representa el botón del menú lateral.
+ * - SideMenu: Componente que representa el menú lateral.
+ * - ThemeButton: Componente que representa el botón de cambio de tema.
  * 
  * Funcionalidad:
  * - App: Componente principal que renderiza la página Home.
  *   - Planea añadir un React Router en el futuro.
+ * - El componente Header muestra el título y subtítulo de la página.
+ * - El componente MenuButton muestra un botón para abrir el menú lateral.
+ * - El componente SideMenu muestra un menú lateral con opciones de navegación.
+ * - El componente ThemeButton muestra un botón para cambiar el tema de la aplicación.
+ * - El componente Home contiene el contenido principal de la aplicación.
  * 
  */
 
 const App = () => {
+  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
+
+  const toggleSideMenu = () => {
+    setIsSideMenuOpen(!isSideMenuOpen);
+  };
+
   return (
     <>
       {/* Planeo añadir un React Router */}
-      <Home />
+      <Header title='Contamin' subtitle='Midiendo la calidad del aire y las calles en Sevilla 🌿🚛' />
+      <MenuButton onClick={toggleSideMenu} />
+      <SideMenu isOpen={isSideMenuOpen} onClose={toggleSideMenu} />
+      <ThemeButton />
+      <div className={isSideMenuOpen ? 'blur m-0 p-0' : 'm-0 p-0'}>
+        <Home />
+      </div>
     </>
   );
 }

frontend/src/components/MenuButton.jsx

@@ -0,0 +1,35 @@
+import "../css/MenuButton.css";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+import PropTypes from "prop-types";
+
+/** ⚠️ EN PRUEBAS ⚠️
+ * MenuButton.jsx
+ * 
+ * Este archivo define el componente MenuButton, que muestra un botón de menú con un icono de barras.
+ * 
+ * Importaciones:
+ * - "../css/MenuButton.css": Archivo CSS que contiene los estilos para el botón de menú.
+ * - FontAwesomeIcon, faBars: Componentes e iconos de FontAwesome para mostrar el icono de barras.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * 
+ * Funcionalidad:
+ * - MenuButton: Componente que renderiza un botón con un icono de barras.
+ *   - Utiliza la propiedad `onClick` para manejar el evento de clic del botón.
+ * 
+ * PropTypes:
+ * - MenuButton espera una propiedad `onClick` que es una función requerida.
+ *  ⚠️ EN PRUEBAS ⚠️ **/
+
+export default function MenuButton({ onClick }) {
+    return (
+        <button className="menuBtn" onClick={onClick}>
+            <FontAwesomeIcon icon={faBars} />
+        </button>
+    );
+}
+
+MenuButton.propTypes = {
+    onClick: PropTypes.func.isRequired,
+};

frontend/src/components/SideMenu.jsx

@@ -0,0 +1,46 @@
+import "../css/SideMenu.css";
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+/** ⚠️ EN PRUEBAS ⚠️
+ * SideMenu.jsx
+ * 
+ * Este archivo define el componente SideMenu, que muestra un menú lateral con enlaces de navegación.
+ * 
+ * Importaciones:
+ * - "../css/SideMenu.css": Archivo CSS que contiene los estilos para el menú lateral.
+ * - PropTypes: Librería para la validación de tipos de propiedades en componentes de React.
+ * - FontAwesomeIcon, faTimes: Componentes e iconos de FontAwesome para mostrar el icono de cerrar.
+ * 
+ * Funcionalidad:
+ * - SideMenu: Componente que renderiza un menú lateral con enlaces de navegación.
+ *   - Utiliza la propiedad `isOpen` para determinar si el menú debe estar visible.
+ *   - Utiliza la propiedad `onClose` para manejar el evento de cierre del menú.
+ * 
+ * PropTypes:
+ * - SideMenu espera una propiedad `isOpen` que es un booleano requerido.
+ * - SideMenu espera una propiedad `onClose` que es una función requerida.
+ *  ⚠️ EN PRUEBAS ⚠️ **/
+
+const SideMenu = ({ isOpen, onClose }) => {
+    return (
+        <div className={`side-menu ${isOpen ? 'open' : ''}`}>
+            <button className="close-btn" onClick={onClose}>
+                <FontAwesomeIcon icon={faTimes} />
+            </button>
+            <ul>
+                <li><a href="#inicio">Inicio</a></li>
+                <li><a href="#mapa">Mapa</a></li>
+                <li><a href="#historico">Histórico</a></li>
+            </ul>
+        </div>
+    );
+};
+
+SideMenu.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired
+}
+
+export default SideMenu;

frontend/src/css/MenuButton.css

@@ -0,0 +1,26 @@
+.menuBtn {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    border: none;
+    width: 50px;
+    height: 50px;
+    font-size: 24px; /* Aumenta el tamaño del icono */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--primary-color);
+    background-color: transparent;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.menuBtn .fa-bars {
+    width: 30px; /* Ajusta el ancho del icono */
+    height: 30px; /* Ajusta la altura del icono */
+}
+
+.menuBtn:hover {
+    color: var(--secondary-color);
+}

frontend/src/css/SideMenu.css

@@ -0,0 +1,63 @@
+.side-menu {
+    position: fixed;
+    top: 0;
+    right: -350px;
+    width: 350px;
+    height: 100%;
+    background-color: #333;
+    color: white;
+    transition: right 0.3s ease;
+    padding: 30px;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    z-index: 1000;
+}
+
+.side-menu.open {
+    right: 0;    
+}
+
+.blur {
+    filter: blur(5px);
+    transition: filter 0.3s ease;
+}
+
+.side-menu .close-btn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 30px;
+    cursor: pointer;
+}
+
+.side-menu .close-btn .fa-times {
+    width: 30px;
+    height: 30px;
+}
+
+.side-menu .close-btn:hover {
+    color: var(--primary-color);
+}
+
+.side-menu ul {
+    list-style: none;
+    padding: 0;
+}
+
+.side-menu ul li {
+    margin: 20px 0;
+}
+
+.side-menu ul li a:hover {
+    color: var(--primary-color);
+}
+
+.side-menu ul li a {
+    color: white;
+    text-decoration: none;
+    font-size: 30px;
+    font-weight: 600;
+    text-transform: uppercase;
+}

frontend/src/pages/Home.jsx

@@ -1,8 +1,6 @@
-import Header from '../components/Header.jsx'
 import Dashboard from '../components/Dashboard.jsx'
 import PollutionMap from '../components/PollutionMap.jsx'
 import HistoryCharts from '../components/HistoryCharts.jsx'
-import ThemeButton from '../components/ThemeButton.jsx'
 import SummaryCards from '../components/SummaryCards.jsx'
 
 /**
@@ -11,31 +9,25 @@ import SummaryCards from '../components/SummaryCards.jsx'
  * Este archivo define el componente Home, que es una página principal de la aplicación.
  * 
  * Importaciones:
- * - Header: Un componente que muestra el encabezado de la página.
  * - Dashboard: Un componente que actúa como contenedor para los componentes principales de la página.
  * - PollutionMap: Un componente que muestra un mapa de la contaminación.
  * - HistoryCharts: Un componente que muestra gráficos históricos de la contaminación.
- * - ThemeButton: Un componente que permite cambiar el tema de la aplicación.
  * - SummaryCards: Un componente que muestra tarjetas resumen con información relevante.
  * 
  * Funcionalidad:
  * - El componente Home utiliza una estructura de JSX para organizar y renderizar los componentes importados.
- * - El componente Header muestra el título y subtítulo de la página.
  * - El componente Dashboard contiene los componentes SummaryCards, PollutionMap y HistoryCharts.
- * - El componente ThemeButton se renderiza al final para permitir el cambio de tema.
  * 
  */
 
 const Home = () => {
     return (
         <>
-            <Header title='Contamin' subtitle='Midiendo la calidad del aire y las calles en Sevilla 🌿🚛' />
             <Dashboard>
                 <SummaryCards />
                 <PollutionMap />
                 <HistoryCharts />
             </Dashboard>
-            <ThemeButton />
         </>
     )
 }