+
+ );
+}
+
+// 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 0000000000000000000000000000000000000000..7af25c2b348c8d87c936e262b36e2edab4f1dd24
--- /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 0000000000000000000000000000000000000000..f78b21a92e3ad8cf0be3efbfef52270bd459c87c
--- /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 0000000000000000000000000000000000000000..ddbef7d2e8d78ac73e5f59e4d6124429965d7b4d
--- /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) => (
+
+
+ );
+}
\ 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 0000000000000000000000000000000000000000..45deddd5e835803ff737be36620d9d9f7909bd1d
--- /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 0000000000000000000000000000000000000000..f466461974913a60c94983a548c79c5cf3e5ccc8
--- /dev/null
+++ b/cosiap_frontend/src/components/common/layouts/LayoutsNavigation/Sidebar/SidebarBrand.jsx
@@ -0,0 +1,14 @@
+export default function SidebarBrand(){
+ return (
+ <>
+
+