added: fontawesome

created an experimental side menu for linking various pages in the to-be-implemented React Router
2025-02-27 01:44:04 +01:00
parent f20caa89d2
commit 49463d19a2
8 changed files with 278 additions and 14 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,11 @@
      "name": "mi-app",
      "version": "0.0.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-brands-svg-icons": "^6.7.2",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
        "bootstrap": "^5.3.3",
        "chart.js": "^4.4.8",
        "leaflet": "^1.9.4",
@@ -891,6 +896,76 @@
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -3279,7 +3354,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/js-yaml": {
@@ -3415,7 +3489,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
@@ -3501,7 +3574,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -3772,7 +3844,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.4.0",
@@ -3825,7 +3896,6 @@
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/react-leaflet": {
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,11 @@
    "deploy": "vite build && scp -r ./dist/* jomaa@192.168.1.200:/var/www/contaminus/"
  },
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
    "bootstrap": "^5.3.3",
    "chart.js": "^4.4.8",
    "leaflet": "^1.9.4",
--- a/frontend/src/components/App.jsx
+++ b/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 */}
+      <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>
    </>
  );
 }
--- a/frontend/src/components/MenuButton.jsx
+++ b/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,
+};
--- a/frontend/src/components/SideMenu.jsx
+++ b/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;
--- a/frontend/src/css/MenuButton.css
+++ b/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);
+}
--- a/frontend/src/css/SideMenu.css
+++ b/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;
+}
--- a/frontend/src/pages/Home.jsx
+++ b/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 />
        </>
    )
 }