'; $html .= '

'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildLayoutGroup($componentId); $html .= $this->buildBehaviorGroup($componentId); $html .= $this->buildMediaGroup($componentId); $html .= '

'; $html .= '

'; $html .= $this->buildLinksGroup($componentId); $html .= $this->buildVisualEffectsGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= '

'; $html .= '

renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Activar Navbar'; $html .= ' '; $html .= '

'; $html .= '

'; // Switch: Show on Mobile $showMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en Mobile'; $html .= ' '; $html .= '

'; $html .= '

'; // Switch: Show on Desktop $showDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en Desktop'; $html .= ' '; $html .= '

'; $html .= '

'; // Select: Show on Pages $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'all'); $html .= '

'; $html .= ' Mostrar en'; $html .= ' '; $html .= '

'; // Switch: Sticky $sticky = $this->renderer->getFieldValue($componentId, 'visibility', 'sticky_enabled', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Navbar fijo (sticky)'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Layout y Estructura'; $html .= '

'; // Container Type $containerType = $this->renderer->getFieldValue($componentId, 'layout', 'container_type', 'container'); $html .= '

'; $html .= ' Tipo de contenedor'; $html .= ' '; $html .= '

'; // Padding Vertical $paddingVertical = $this->renderer->getFieldValue($componentId, 'layout', 'padding_vertical', '0.75rem 0'); $html .= '

'; $html .= ' Padding vertical'; $html .= ' '; $html .= '

'; // Z-index $zIndex = $this->renderer->getFieldValue($componentId, 'layout', 'z_index', '1030'); $html .= '

'; $html .= ' Z-index'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Configuración del Menú'; $html .= '

'; // Menu Location $menuLocation = $this->renderer->getFieldValue($componentId, 'behavior', 'menu_location', 'primary'); $html .= '

'; $html .= ' Ubicación del menú'; $html .= ' '; $html .= '

'; // Custom Menu ID $customMenuId = $this->renderer->getFieldValue($componentId, 'behavior', 'custom_menu_id', '0'); $html .= '

'; $html .= ' ID del menú personalizado'; $html .= ' '; $html .= '

'; // Enable Dropdowns $enableDropdowns = $this->renderer->getFieldValue($componentId, 'behavior', 'enable_dropdowns', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Habilitar submenús desplegables'; $html .= ' '; $html .= '

'; $html .= '

'; // Mobile Breakpoint $mobileBreakpoint = $this->renderer->getFieldValue($componentId, 'behavior', 'mobile_breakpoint', 'lg'); $html .= '

'; $html .= ' Breakpoint para menú móvil'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Logo/Marca'; $html .= '

'; // Show Brand $showBrand = $this->renderer->getFieldValue($componentId, 'media', 'show_brand', false); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar logo/marca'; $html .= ' '; $html .= '

'; $html .= '

'; // Use Logo $useLogo = $this->renderer->getFieldValue($componentId, 'media', 'use_logo', false); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Usar logo (imagen)'; $html .= ' '; $html .= '

'; $html .= '

'; // Logo URL $logoUrl = $this->renderer->getFieldValue($componentId, 'media', 'logo_url', ''); $html .= '

'; $html .= ' URL del logo'; $html .= ' '; $html .= '

'; // Logo Height $logoHeight = $this->renderer->getFieldValue($componentId, 'media', 'logo_height', '40px'); $html .= '

'; $html .= ' Altura del logo'; $html .= ' '; $html .= '

'; // Brand Text $brandText = $this->renderer->getFieldValue($componentId, 'media', 'brand_text', 'Mi Sitio'); $html .= '

'; $html .= ' Texto de la marca'; $html .= ' '; $html .= '

'; // Brand Font Size $brandFontSize = $this->renderer->getFieldValue($componentId, 'media', 'brand_font_size', '1.5rem'); $html .= '

'; $html .= ' Tamaño de fuente'; $html .= ' '; $html .= '

'; // Brand Color $brandColor = $this->renderer->getFieldValue($componentId, 'media', 'brand_color', '#FFFFFF'); $html .= '

'; $html .= ' Color de la marca'; $html .= ' '; $html .= '

'; // Brand Hover Color $brandHoverColor = $this->renderer->getFieldValue($componentId, 'media', 'brand_hover_color', '#FF8600'); $html .= '

'; $html .= ' Color hover de la marca'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Estilos de Enlaces'; $html .= '

'; // Text Color $textColor = $this->renderer->getFieldValue($componentId, 'links', 'text_color', '#FFFFFF'); $html .= '

'; $html .= ' Color del texto'; $html .= ' '; $html .= '

'; // Hover Color $hoverColor = $this->renderer->getFieldValue($componentId, 'links', 'hover_color', '#FF8600'); $html .= '

'; $html .= ' Color hover'; $html .= ' '; $html .= '

'; // Active Color $activeColor = $this->renderer->getFieldValue($componentId, 'links', 'active_color', '#FF8600'); $html .= '

'; $html .= ' Color del item activo'; $html .= ' '; $html .= '

'; // Font Size $fontSize = $this->renderer->getFieldValue($componentId, 'links', 'font_size', '0.9rem'); $html .= '

'; $html .= ' Tamaño de fuente'; $html .= ' '; $html .= '

'; // Font Weight $fontWeight = $this->renderer->getFieldValue($componentId, 'links', 'font_weight', '500'); $html .= '

'; $html .= ' Grosor de fuente'; $html .= ' '; $html .= '

'; // Padding $padding = $this->renderer->getFieldValue($componentId, 'links', 'padding', '0.5rem 0.65rem'); $html .= '

'; $html .= ' Padding de enlaces'; $html .= ' '; $html .= '

'; // Border Radius $borderRadius = $this->renderer->getFieldValue($componentId, 'links', 'border_radius', '4px'); $html .= '

'; $html .= ' Border radius hover'; $html .= ' '; $html .= '

'; // Show Underline Effect $showUnderline = $this->renderer->getFieldValue($componentId, 'links', 'show_underline_effect', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar efecto de subrayado'; $html .= ' '; $html .= '

'; $html .= '

'; // Underline Color $underlineColor = $this->renderer->getFieldValue($componentId, 'links', 'underline_color', '#FF8600'); $html .= '

'; $html .= ' Color del subrayado'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Estilos de Dropdown'; $html .= '

'; // Background Color $bgColor = $this->renderer->getFieldValue($componentId, 'visual_effects', 'background_color', '#FFFFFF'); $html .= '

'; $html .= ' Fondo de dropdown'; $html .= ' '; $html .= '

'; // Border Radius $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '8px'); $html .= '

'; $html .= ' Border radius'; $html .= ' '; $html .= '

'; // Shadow $shadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'shadow', '0 8px 24px rgba(0, 0, 0, 0.12)'); $html .= '

'; $html .= ' Sombra del dropdown'; $html .= ' '; $html .= '

'; // Item Color $itemColor = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_color', '#495057'); $html .= '

'; $html .= ' Color de items'; $html .= ' '; $html .= '

'; // Item Hover Background $itemHoverBg = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_hover_background', 'rgba(255, 133, 0, 0.1)'); $html .= '

'; $html .= ' Fondo hover de items'; $html .= ' '; $html .= '

'; // Item Padding $itemPadding = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_padding', '0.625rem 1.25rem'); $html .= '

'; $html .= ' Padding de items'; $html .= ' '; $html .= '

'; // Dropdown Max Height $dropdownMaxHeight = $this->renderer->getFieldValue($componentId, 'visual_effects', 'dropdown_max_height', '300px'); $html .= '

'; $html .= ' Altura máxima del dropdown'; $html .= ' '; $html .= ' Si se excede, aparece scroll vertical'; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Estilos del Navbar'; $html .= '

'; // Background Color $navbarBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#1e3a5f'); $html .= '

'; $html .= ' Color de fondo'; $html .= ' '; $html .= '

'; // Box Shadow $boxShadow = $this->renderer->getFieldValue($componentId, 'colors', 'box_shadow', '0 4px 12px rgba(30, 58, 95, 0.15)'); $html .= '

'; $html .= ' Sombra del navbar'; $html .= ' '; $html .= '

'; $html .= '