From 0fef8c02bd9aad2b6674f3d6c1f9c6f91aa541a9 Mon Sep 17 00:00:00 2001 From: Elliot Axel Noriega Date: Mon, 19 Aug 2024 18:56:30 -0600 Subject: [PATCH] =?UTF-8?q?Creaci=C3=B3n=20de=20navbars=20y=20switch=20de?= =?UTF-8?q?=20las=20mismas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LayoutsNavigation/MobileMenuToggle.jsx | 11 ++ .../LayoutsNavigation/Navbar/MobileMenu.jsx | 89 ++++++++++ .../LayoutsNavigation/Navbar/Navbar.jsx | 99 +++++++++++ .../LayoutsNavigation/Navbar/NavbarBrand.jsx | 20 +++ .../LayoutsNavigation/Navbar/NavbarLinks.jsx | 109 ++++++++++++ .../Navbar/Notifications.jsx | 14 ++ .../LayoutsNavigation/NotificationToggle.jsx | 15 ++ .../layouts/LayoutsNavigation/Settings.jsx | 31 ++++ .../LayoutsNavigation/SettingsToggle.jsx | 9 + .../LayoutsNavigation/Sidebar/MobileMenu.jsx | 74 +++++++++ .../Sidebar/Notifications.jsx | 14 ++ .../LayoutsNavigation/Sidebar/Sidebar.jsx | 120 ++++++++++++++ .../Sidebar/SidebarBrand.jsx | 14 ++ .../Sidebar/SidebarLinks.jsx | 70 ++++++++ .../src/components/users/Inicio.jsx | 155 +++++++++++------- 15 files changed, 785 insertions(+), 59 deletions(-) create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/MobileMenuToggle.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Notifications.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/NotificationToggle.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/SettingsToggle.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/MobileMenu.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Notifications.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx create mode 100644 cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/MobileMenuToggle.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/MobileMenuToggle.jsx new file mode 100644 index 0000000..69c105d --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/MobileMenuToggle.jsx @@ -0,0 +1,11 @@ +export default function MobileMenuToggle({ viewMenu, setViewMenu, buttonMenuRef }) { + return ( + <> + setViewMenu(!viewMenu)}> + + {viewMenu ? 'segment' : 'menu'} + + + + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx new file mode 100644 index 0000000..fd5ac53 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu.jsx @@ -0,0 +1,89 @@ +import { useState } from "react"; + +export default function MobileMenu({ menuRef, linksItems }) { + // useState para manejar la visibilidad del submenú de "Ayuda" + const [viewSubMenuHelp, setViewSubMenuHelp] = useState(false); + + return ( + <> + {/* Contenedor principal del menú móvil */} +
+
+ { + // Si existe linksItems, mapea cada uno para generar enlaces + linksItems ? ( + linksItems.map((item) => ( + <> + {/* Enlace principal de cada ítem del menú */} + { + // Si el ítem es "Ayuda", alterna la visibilidad del submenú + if (item.nameItem === 'Ayuda') { + setViewSubMenuHelp(!viewSubMenuHelp); + } + }} + > + + {item.nameIcon} {/* Icono del ítem */} + + + {item.nameItem} {/* Nombre del ítem */} + + { + // Si el ítem es "Ayuda" y tiene un submenú, muestra el ícono de dropdown y se intercala dependiendo si esta abierto o no + item.nameItem === 'Ayuda' && item.subMenu && item.subMenu.length > 0 && ( +
+ + {viewSubMenuHelp ? 'arrow_drop_up' : 'arrow_drop_down'} {/* Ícono para desplegar el submenú */} + +
+ ) + } + + { + // Si el ítem es "Ayuda" y tiene un submenú, renderiza el submenú + item.nameItem === 'Ayuda' && item.subMenu && item.subMenu.length > 0 && ( + + ) + } + + )) + ) : '' // Si no hay linksItems, no se muestra nada + } + {/* Enlace de cerrar sesión */} + + + logout {/* Icono del ítem */} + + + Cerrar sesión {/* Nombre del ítem */} + + + +
+
+ + ); +} + +// Componente para renderizar el submenú de "Ayuda" +function SubMenuAyuda({ viewSubMenuHelp, items }) { + return ( + // Si el submenú está visible, mapea sus ítems para generar enlaces + viewSubMenuHelp && ( + items.map((item) => ( + + + {item.nameItem} {/* Nombre del ítem del submenú */} + + + )) + ) + ); +} diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx new file mode 100644 index 0000000..7af25c2 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Navbar.jsx @@ -0,0 +1,99 @@ +import { useState, useRef, useEffect } from "react"; +import NavbarBrand from "@/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand"; +import NavbarLinks from "@/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks"; +import MobileMenuToggle from "@/components/common/layouts/LayoutsNavigation/MobileMenuToggle"; +import MobileMenu from "@/components/common/layouts/LayoutsNavigation/Navbar/MobileMenu"; +import NotificationToggle from "@/components/common/layouts/LayoutsNavigation/NotificationToggle"; +import Notifications from "@/components/common/layouts/LayoutsNavigation/Navbar/Notifications"; + +export default function Navbar({ linksItems, viewMenu, setViewMenu }) { + + // Estado para controlar la visibilidad de las notificaciones + const [viewNotifications, setViewNotifications] = useState(false); + + // Referencias para los botones de menú y la sección del menú + const buttonMenuRef = useRef(null); + const menuRef = useRef(null); + + // Referencias para los botones de notificaciones y la sección de notificaciones + const buttonNotificationsMobileRef = useRef(null); + const buttonNotificationsRef = useRef(null); + const notificationsRef = useRef(null); + + // Efecto para manejar los clics fuera de los menús y notificaciones + useEffect(() => { + function handleClickOutside(event) { + // Cierra el menú si se hace clic fuera de él y de su botón de toggle + if (menuRef.current && !menuRef.current.contains(event.target) && + buttonMenuRef.current && !buttonMenuRef.current.contains(event.target)) { + setViewMenu(false); + } + + // Cierra las notificaciones si se hace clic fuera de ellas y de sus botones de toggle + if (notificationsRef.current && !notificationsRef.current.contains(event.target) && + buttonNotificationsRef.current && !buttonNotificationsRef.current.contains(event.target) && + buttonNotificationsMobileRef.current && !buttonNotificationsMobileRef.current.contains(event.target)) { + setViewNotifications(false); + } + } + + // Añade el event listener para detectar clics fuera de los elementos + document.addEventListener("mousedown", handleClickOutside); + + // Remueve el event listener cuando el componente se desmonte + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + return ( + <> + + + ); +} diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx new file mode 100644 index 0000000..f78b21a --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarBrand.jsx @@ -0,0 +1,20 @@ +export default function NavbarBrand() { + return ( + <> + {/* Contenedor del texto "COSIAP" */} +
+
+ +
+ cosiap +
+
+
+ {/* Contenedor curvo de cosiap*/} +
+ + {/* Contenedor gradiente del contenedor curvo */} +
+ + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx new file mode 100644 index 0000000..ddbef7d --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/NavbarLinks.jsx @@ -0,0 +1,109 @@ +import { useState, useEffect, useRef } from "react"; + +export default function NavbarLinks({ linksItems, notificationsToggle }) { + // Estado para controlar la visibilidad del submenú de ayuda + const [viewMenuHelp, setViewMenuHelp] = useState(false); + + // Referencias para el botón de ayuda y el menú de ayuda + const menuHelpRef = useRef(null); + const buttonHelpRef = useRef(null); + + // Efecto para manejar clics fuera del menú de ayuda y cerrar el menú si ocurre un clic fuera + useEffect(() => { + function handleClickOutside(event) { + // Si se hace clic fuera del botón de ayuda y del menú de ayuda, se cierra el menú + if (menuHelpRef.current && !menuHelpRef.current.contains(event.target) && + buttonHelpRef.current && !buttonHelpRef.current.contains(event.target)) { + setViewMenuHelp(false); + } + } + + // Añadir el event listener para manejar clics fuera del menú + document.addEventListener("mousedown", handleClickOutside); + + // Remover el event listener cuando el componente se desmonte + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + return ( + <> + + {/* Contenedor principal de los enlaces en pantallas grandes */} +
+
+
+ { + // Renderizado de los elementos del menú principal + linksItems ? ( + linksItems.map((item, key) => ( +
+ { + // Al hacer clic en 'Ayuda', alternar la visibilidad del submenú + if (item.nameItem === 'Ayuda') { + setViewMenuHelp(!viewMenuHelp); + } + }} + > + {/* Ícono y nombre del elemento */} + + {item.nameIcon} + + {item.nameItem} + +
+ )) + ) : '' + } + + {/* Componente de notificaciones pasado como prop */} +
+ {notificationsToggle} +
+ + {/* Enlace para cerrar sesión */} +
+ + + logout + + Cerrar sesión + +
+
+
+ + {/* Renderizado condicional del submenú de 'Ayuda' */} + {viewMenuHelp && ( +
+ { + // Verifica si 'Ayuda' tiene un submenú y lo renderiza + linksItems.find(item => item.nameItem === 'Ayuda').subMenu ? ( + linksItems.find(item => item.nameItem === 'Ayuda').subMenu.map((subItem, key) => ( +
+ + {subItem.nameItem} + +
+ )) + ) : 'No hay elementos' + } +
+ )} +
+ + ); +} diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Notifications.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Notifications.jsx new file mode 100644 index 0000000..032f4ab --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Navbar/Notifications.jsx @@ -0,0 +1,14 @@ +import { useRef, useEffect } from "react"; + +export default function Notifications( {notificationsRef} ){ + + return ( + <> +
+
+ +
+
+ + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/NotificationToggle.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/NotificationToggle.jsx new file mode 100644 index 0000000..33a002e --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/NotificationToggle.jsx @@ -0,0 +1,15 @@ +export default function NotificationToggle( {buttonNotificationsRef, viewNotifications, setViewNotifications} ){ + return ( + <> + setViewNotifications(!viewNotifications)}> + + {viewNotifications ? 'notifications_active' : 'notifications'} + + + + + + + + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx new file mode 100644 index 0000000..a8e39f9 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Settings.jsx @@ -0,0 +1,31 @@ +export default function Settings( {settingsRef, selectedNav, setSelectedNav} ){ + return ( +
+
+
+
+ Cambiar navegación +
+
+ setSelectedNav('sidebar')} + > + Sidebar + + setSelectedNav('navbar')} + > + Navbar + +
+
+
+
+ ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/SettingsToggle.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/SettingsToggle.jsx new file mode 100644 index 0000000..8f97400 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/SettingsToggle.jsx @@ -0,0 +1,9 @@ +export default function SettingsToggle( {settingsToggleRef} ) { + return ( +
+ + settings + +
+ ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/MobileMenu.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/MobileMenu.jsx new file mode 100644 index 0000000..15e7b69 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/MobileMenu.jsx @@ -0,0 +1,74 @@ +import { useState, useEffect, useRef } from "react"; +import SidebarLinks from "@/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks"; +import SidebarBrand from "@/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand"; + +export default function MobileMenu({ menuRef, linksItems }) { + const [viewSubMenuHelp, setViewSubMenuHelp] = useState(false); + const firstContainerRef = useRef(null); + + // Función para ajustar la altura del primer contenedor + const adjustHeight = () => { + if (firstContainerRef.current && menuRef.current) { + const menuHeight = menuRef.current.clientHeight; + firstContainerRef.current.style.height = `${menuHeight}px`; + } + }; + + // Monitorear cambios en el DOM y en la visibilidad del submenú + useEffect(() => { + adjustHeight(); + + // Agregar un observer para monitorear cambios en el DOM + const observer = new MutationObserver(adjustHeight); + if (menuRef.current) { + observer.observe(menuRef.current, { childList: true, subtree: true }); + } + + // Monitorear cambios en la visibilidad del submenú + const handleResize = () => adjustHeight(); + window.addEventListener('resize', handleResize); + + return () => { + if (menuRef.current) { + observer.disconnect(); + } + window.removeEventListener('resize', handleResize); + }; + }, [menuRef, linksItems, viewSubMenuHelp]); + + return ( + <> + {/* Primer contenedor que se ajusta a la altura del segundo */} +
+
+ + {/* Segundo contenedor que se adapta a su contenido */} +
+ +
+
+ +
+ + {/* Enlace de cerrar sesión */} + + + logout {/* Icono del ítem */} + + + Cerrar sesión {/* Nombre del ítem */} + + +
+
+ + ); +} diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Notifications.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Notifications.jsx new file mode 100644 index 0000000..a800e00 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Notifications.jsx @@ -0,0 +1,14 @@ +import { useRef, useEffect } from "react"; + +export default function Notifications( {notificationsRef} ){ + + return ( + <> +
+
+ +
+
+ + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx new file mode 100644 index 0000000..45deddd --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar.jsx @@ -0,0 +1,120 @@ +import { useState, useRef, useEffect } from "react"; +import MobileMenuToggle from "@/components/common/layouts/LayoutsNavigation/MobileMenuToggle"; +import NotificationToggle from "@/components/common/layouts/LayoutsNavigation/NotificationToggle"; +import SidebarLinks from "@/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks"; +import SidebarBrand from "@/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand"; +import Notifications from "@/components/common/layouts/LayoutsNavigation/Sidebar/Notifications"; +import MobileMenu from "@/components/common/layouts/LayoutsNavigation/Sidebar/MobileMenu"; + +export default function Sidebar( {linksItems, viewMenu, setViewMenu} ){ + // Estado para controlar la visibilidad de las notificaciones + const [viewNotifications, setViewNotifications] = useState(false); + + // Referencias para los botones de menú y la sección del menú + const buttonMenuRef = useRef(null); + const menuRef = useRef(null); + + // Referencias para los botones de notificaciones y la sección de notificaciones + const buttonNotificationsMobileRef = useRef(null); + const buttonNotificationsRef = useRef(null); + const notificationsRef = useRef(null); + + // Efecto para manejar los clics fuera de los menús y notificaciones + useEffect(() => { + function handleClickOutside(event) { + // Cierra el menú si se hace clic fuera de él y de su botón de toggle + if (menuRef.current && !menuRef.current.contains(event.target) && + buttonMenuRef.current && !buttonMenuRef.current.contains(event.target)) { + setViewMenu(false); + } + + // Cierra las notificaciones si se hace clic fuera de ellas y de sus botones de toggle + if (notificationsRef.current && !notificationsRef.current.contains(event.target) && + buttonNotificationsRef.current && !buttonNotificationsRef.current.contains(event.target) && + buttonNotificationsMobileRef.current && !buttonNotificationsMobileRef.current.contains(event.target)) { + setViewNotifications(false); + } + } + + // Añade el event listener para detectar clics fuera de los elementos + document.addEventListener("mousedown", handleClickOutside); + + // Remueve el event listener cuando el componente se desmonte + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + return ( + <> + + + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx new file mode 100644 index 0000000..f466461 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx @@ -0,0 +1,14 @@ +export default function SidebarBrand(){ + return ( + <> +
+ +
+
+
+ cosiap +
+
+ + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx new file mode 100644 index 0000000..171e707 --- /dev/null +++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarLinks.jsx @@ -0,0 +1,70 @@ +import { useState } from "react"; + +export default function SidebarLinks( {linksItems} ) { + const [viewSubMenuHelp, setViewSubMenuHelp] = useState(false); + + + return ( + // Si existe linksItems, mapea cada uno para generar enlaces + linksItems ? ( + linksItems.map((item) => ( + <> + {/* Enlace principal de cada ítem del menú */} + { + // Si el ítem es "Ayuda", alterna la visibilidad del submenú + if (item.nameItem === 'Ayuda') { + setViewSubMenuHelp(!viewSubMenuHelp); + } + }} + > + + {item.nameIcon} {/* Icono del ítem */} + + + {item.nameItem} {/* Nombre del ítem */} + + { + // Si el ítem es "Ayuda" y tiene un submenú, muestra el ícono de dropdown y se intercala dependiendo si esta abierto o no + item.nameItem === 'Ayuda' && item.subMenu && item.subMenu.length > 0 && ( +
+ + {viewSubMenuHelp ? 'arrow_drop_up' : 'arrow_drop_down'} {/* Ícono para desplegar el submenú */} + +
+ ) + } + + { + // Si el ítem es "Ayuda" y tiene un submenú, renderiza el submenú + item.nameItem === 'Ayuda' && item.subMenu && item.subMenu.length > 0 && ( + + ) + } + + )) + ) : '' // Si no hay linksItems, no se muestra nada + ); +} + +// Componente para renderizar el submenú de "Ayuda" +function SubMenuAyuda({ viewSubMenuHelp, items }) { + return ( + // Si el submenú está visible, mapea sus ítems para generar enlaces + viewSubMenuHelp && ( + items.map((item) => ( + + + {item.nameItem} {/* Nombre del ítem del submenú */} + + + )) + ) + ); +} \ No newline at end of file diff --git a/cosiap_frontend/src/components/users/Inicio.jsx b/cosiap_frontend/src/components/users/Inicio.jsx index e004bcf..f0b3131 100644 --- a/cosiap_frontend/src/components/users/Inicio.jsx +++ b/cosiap_frontend/src/components/users/Inicio.jsx @@ -1,67 +1,104 @@ +import { useState, useEffect, useRef } from "react"; +import Navbar from "@/components/common/layouts/LayoutsNavigation/Navbar/Navbar"; +import Sidebar from "@/components/common/layouts/LayoutsNavigation/Sidebar/Sidebar"; +import SettingsToggle from "@/components/common/layouts/LayoutsNavigation/SettingsToggle"; +import Settings from "@/components/common/layouts/LayoutsNavigation/Settings"; + +const linksItemsSolicitante = [ + { + nameIcon: 'library_books', + nameItem: 'Modalidades', + isSelected: false + }, + { + nameIcon: 'history', + nameItem: 'Historial', + isSelected: false + }, + { + nameIcon: 'mark_as_unread', + nameItem: 'Recepción de ayuda', + isSelected: false + }, + { + nameIcon: 'help', + nameItem: 'Ayuda', + isSelected: false, + subMenu: [ + { + nameItem: 'Manual', + isSelected: false + }, + { + nameItem: 'Chat', + isSelected: false + } + ] + }, + + { + nameIcon: 'account_circle', + nameItem: 'Perfil', + isSelected: false + } +]; + + + export default function Inicio() { + // Estado para controlar la visibilidad de los menus de pantalla chicas + const [viewMenu, setViewMenu] = useState(false); + const [selectedNav, setSelectedNav] = useState("sidebar"); + const [viewSettings, setViewSettings] = useState(false); + + const settingsRef = useRef(); + const settingsToggleRef = useRef(); + + // Efecto para manejar los clics fuera de settings + useEffect(() => { + function handleClickOutside(event) { + // Cierra el menú si se hace clic fuera de él y de su botón de toggle + if (settingsRef.current && !settingsRef.current.contains(event.target) && + settingsToggleRef.current && !settingsToggleRef.current.contains(event.target)) { + setViewSettings(false); + } + } + // Añade el event listener para detectar clics fuera de los elementos + document.addEventListener("mousedown", handleClickOutside); + // Remueve el event listener cuando el componente se desmonte + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + return ( <> -
- +
- ) -} + ); +} \ No newline at end of file -- GitLab