From 6ba66ab15e4af43b7059212f09860345547d8820 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Wed, 12 Nov 2025 16:02:15 -0600
Subject: [PATCH] fix(admin-panel): Add dynamic hex value updates to
 component-navbar.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added initColorPickers() method to handle color picker interactions
- Dynamically updates hex value displays when user changes colors
- Covers all 7 color pickers in navbar configuration
- Event listeners on 'input' event for real-time updates
- Initializes hex displays on component load with uppercase format

Enhances UX by showing live color values to user.

Resolves #179 (Phase 2: JavaScript enhancements)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../admin/assets/js/component-navbar.js       | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/admin-panel/admin/assets/js/component-navbar.js b/admin-panel/admin/assets/js/component-navbar.js
index 05a148dd..919d6c51 100644
--- a/admin-panel/admin/assets/js/component-navbar.js
+++ b/admin-panel/admin/assets/js/component-navbar.js
@@ -11,8 +11,39 @@ window.NavbarComponent = {
 	 */
 	init: function() {
 		console.log('Navbar component initialized');
-		// Aquí van event listeners específicos si se necesitan
-		// Por ejemplo: actualizar preview en tiempo real
+
+		// Actualizar valores hexadecimales de color pickers en tiempo real
+		this.initColorPickers();
+	},
+
+	/**
+	 * Inicializar event listeners para color pickers
+	 */
+	initColorPickers: function() {
+		const colorPickers = [
+			{ input: 'navbarBgColor', display: 'navbarBgColorValue' },
+			{ input: 'navbarTextColor', display: 'navbarTextColorValue' },
+			{ input: 'navbarLinkHoverColor', display: 'navbarLinkHoverColorValue' },
+			{ input: 'navbarLinkHoverBgColor', display: 'navbarLinkHoverBgColorValue' },
+			{ input: 'navbarDropdownBgColor', display: 'navbarDropdownBgColorValue' },
+			{ input: 'navbarDropdownItemColor', display: 'navbarDropdownItemColorValue' },
+			{ input: 'navbarDropdownItemHoverColor', display: 'navbarDropdownItemHoverColorValue' }
+		];
+
+		colorPickers.forEach(function(picker) {
+			const inputEl = document.getElementById(picker.input);
+			const displayEl = document.getElementById(picker.display);
+
+			if (inputEl && displayEl) {
+				// Actualizar cuando cambia el color
+				inputEl.addEventListener('input', function() {
+					displayEl.textContent = inputEl.value.toUpperCase();
+				});
+
+				// Inicializar valor al cargar
+				displayEl.textContent = inputEl.value.toUpperCase();
+			}
+		});
 	},
 
 	/**