Skip to content

Commit

Permalink
fix: pequeña corrección en Estadisticas con respecto al responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
MirandaAriano committed Dec 5, 2024
1 parent d49525a commit ee57f61
Showing 1 changed file with 46 additions and 21 deletions.
67 changes: 46 additions & 21 deletions FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import React, { useState, useEffect } from 'react';
import { Box, IconButton, useDisclosure, useBreakpointValue } from '@chakra-ui/react';
import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
import { Outlet } from 'react-router-dom';
Expand All @@ -9,6 +10,32 @@ function Estadisticas() {
// Definir el ancho de la caja de SubMenuContent según el tamaño de la pantalla
const isMobile = useBreakpointValue({ base: true, xl: false });

// Estado para controlar la visibilidad del botón de hamburguesa
const [showHamburger, setShowHamburger] = useState(true);
const [lastScrollY, setLastScrollY] = useState(0);

// Función que maneja el desplazamiento
const handleScroll = () => {
if (window.scrollY > lastScrollY) {
// Si el desplazamiento es hacia abajo, ocultamos el botón
setShowHamburger(false);
} else {
// Si el desplazamiento es hacia arriba, mostramos el botón
setShowHamburger(true);
}
setLastScrollY(window.scrollY); // Actualizamos la posición del scroll
};

// Usamos useEffect para agregar el evento de scroll al montar el componente
useEffect(() => {
window.addEventListener('scroll', handleScroll);

// Limpiamos el evento cuando el componente se desmonta
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [lastScrollY]);

return (
<Box display="flex" position="relative">
{/* SubMenuContent se muestra solo cuando no es pantalla pequeña */}
Expand All @@ -17,20 +44,22 @@ function Estadisticas() {
<SubMenuContent onClose={onClose} titleSubMenu="INFORMES" />
</Box>
) : (
// En pantallas pequeñas, solo mostramos el botón de hamburguesa
<Box
position="absolute"
top="0"
left="-25px" // Desplazar el botón 10px hacia la izquierda
p="4"
zIndex="1000"
>
<IconButton
aria-label="Abrir menú"
icon={<HamburgerIcon color="white"/>}
onClick={onOpen}
/>
</Box>
// En pantallas pequeñas, solo mostramos el botón de hamburguesa si showHamburger es true
showHamburger && (
<Box
position="absolute"
top="0"
left="-25px" // Desplazar el botón 10px hacia la izquierda
p="4"
zIndex="1000"
>
<IconButton
aria-label="Abrir menú"
icon={<HamburgerIcon color="white" />}
onClick={onOpen}
/>
</Box>
)
)}

{/* El contenido principal (Outlet) */}
Expand All @@ -57,20 +86,16 @@ function Estadisticas() {
<SubMenuContent onClose={onClose} titleSubMenu="INFORMES" />

{/* Botón de cierre dentro del SubMenuContent */}
<Box
position="absolute"
top="10px"
right="10px"
>
<Box position="absolute" top="10px" right="10px">
<IconButton
aria-label="Cerrar menú"
icon={<CloseIcon />}
onClick={onClose}
size="sm" // Tamaño pequeño
size="sm" // Tamaño pequeño
color="black" // Color negro
variant="white" // Sin fondo
bg="white"
_hover={{ bg: "gray.500" }} // Cambia a gris cuando el cursor esté sobre el botón
_hover={{ bg: 'gray.500' }} // Cambia a gris cuando el cursor esté sobre el botón
/>
</Box>
</Box>
Expand Down

0 comments on commit ee57f61

Please sign in to comment.