49463d19a2
created an experimental side menu for linking various pages in the to-be-implemented React Router
63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
import '../css/App.css'
|
|
import 'leaflet/dist/leaflet.css'
|
|
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
|
|
*
|
|
* Este archivo define el componente App, que es el componente principal de la aplicación.
|
|
*
|
|
* Importaciones:
|
|
* - '../css/App.css': Archivo CSS que contiene los estilos globales de la aplicación.
|
|
* - '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>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|