From ee57f6168ea1854998d8113f967836605c306d17 Mon Sep 17 00:00:00 2001
From: Miranda Ariano <arianogato-@hotmail.com>
Date: Thu, 5 Dec 2024 01:46:19 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20peque=C3=B1a=20correcci=C3=B3n=20en=20Es?=
 =?UTF-8?q?tadisticas=20con=20respecto=20al=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/Estadisticas/Estadisticas.tsx       | 67 +++++++++++++------
 1 file changed, 46 insertions(+), 21 deletions(-)

diff --git a/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx b/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx
index 5db2a76..9a5cad2 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/Estadisticas.tsx
@@ -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';
@@ -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 */}
@@ -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) */}
@@ -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>