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>
     </>
   );
 }