renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
$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 .= ' Mostrar en Mobile ';
$html .= ' ';
$html .= '
';
$html .= '
';
// Switch: Show on Desktop
$showDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Mostrar en Desktop ';
$html .= ' ';
$html .= '
';
$html .= '
';
// =============================================
// Checkboxes de visibilidad por tipo de página
// Grupo especial: _page_visibility
// =============================================
$html .= '
';
$html .= '
';
$html .= '
';
$showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', true);
$showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true);
$showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true);
$showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', true);
$showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', true);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('navbarVisibilityHome', 'Home', 'bi-house', $showOnHome);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('navbarVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('navbarVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('navbarVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('navbarVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
$html .= '
';
$html .= '
';
// Switch: Sticky
$sticky = $this->renderer->getFieldValue($componentId, 'visibility', 'sticky_enabled', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' Navbar fijo (sticky) ';
$html .= ' ';
$html .= '
';
$html .= '
';
// Switch: CSS Crítico
$isCritical = $this->renderer->getFieldValue($componentId, 'visibility', 'is_critical', true);
$html .= '
';
$html .= '
';
$html .= ' ';
$html .= ' CSS Crítico ';
$html .= ' Inyectar CSS en <head> para optimizar LCP ';
$html .= ' ';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$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 .= ' 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 .= ' Small (576px) ';
$html .= ' Medium (768px) ';
$html .= ' Large (992px) ';
$html .= ' Extra Large (1200px) ';
$html .= ' ';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= ' ';
// Show Brand
$showBrand = $this->renderer->getFieldValue($componentId, 'media', 'show_brand', false);
$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 .= ' Usar logo (imagen) ';
$html .= ' ';
$html .= '
';
$html .= '
';
// Logo URL
$logoUrl = $this->renderer->getFieldValue($componentId, 'media', 'logo_url', '');
$html .= '
';
$html .= ' URL del logo ';
$html .= '
';
// Logo Height
$logoHeight = $this->renderer->getFieldValue($componentId, 'media', 'logo_height', '40px');
$html .= '
';
$html .= ' Altura del logo ';
$html .= '
';
// Brand Text
$brandText = $this->renderer->getFieldValue($componentId, 'media', 'brand_text', 'Mi Sitio');
$html .= '
';
$html .= ' Texto de la marca ';
$html .= '
';
// Brand Font Size
$brandFontSize = $this->renderer->getFieldValue($componentId, 'media', 'brand_font_size', '1.5rem');
$html .= '
';
$html .= ' Tamaño de fuente ';
$html .= '
';
// Brand Color
$brandColor = $this->renderer->getFieldValue($componentId, 'media', 'brand_color', '#FFFFFF');
$html .= '
';
$html .= ' Color de la marca ';
$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 .= '
';
$html .= ' ';
// Text Color
$textColor = $this->renderer->getFieldValue($componentId, 'links', 'text_color', '#FFFFFF');
$html .= '
';
$html .= ' Color del texto ';
$html .= '
';
// Hover Color
$hoverColor = $this->renderer->getFieldValue($componentId, 'links', 'hover_color', '#FF8600');
$html .= '
';
$html .= ' Color hover ';
$html .= '
';
// Active Color
$activeColor = $this->renderer->getFieldValue($componentId, 'links', 'active_color', '#FF8600');
$html .= '
';
$html .= ' Color del item activo ';
$html .= '
';
// Font Size
$fontSize = $this->renderer->getFieldValue($componentId, 'links', 'font_size', '0.9rem');
$html .= '
';
$html .= ' Tamaño de fuente ';
$html .= '
';
// Font Weight
$fontWeight = $this->renderer->getFieldValue($componentId, 'links', 'font_weight', '500');
$html .= '
';
$html .= ' Grosor de fuente ';
$html .= '
';
// Padding
$padding = $this->renderer->getFieldValue($componentId, 'links', 'padding', '0.5rem 0.65rem');
$html .= '
';
$html .= ' Padding de enlaces ';
$html .= '
';
// Border Radius
$borderRadius = $this->renderer->getFieldValue($componentId, 'links', 'border_radius', '4px');
$html .= '
';
$html .= ' Border radius hover ';
$html .= '
';
// Show Underline Effect
$showUnderline = $this->renderer->getFieldValue($componentId, 'links', 'show_underline_effect', true);
$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 .= '
';
$html .= ' ';
// Background Color
$bgColor = $this->renderer->getFieldValue($componentId, 'visual_effects', 'background_color', '#FFFFFF');
$html .= '
';
$html .= ' Fondo de dropdown ';
$html .= '
';
// Border Radius
$borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '8px');
$html .= '
';
$html .= ' Border radius ';
$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 .= '
';
// Item Color
$itemColor = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_color', '#495057');
$html .= '
';
$html .= ' Color de items ';
$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 .= '
';
// Item Padding
$itemPadding = $this->renderer->getFieldValue($componentId, 'visual_effects', 'item_padding', '0.625rem 1.25rem');
$html .= '
';
$html .= ' Padding de items ';
$html .= '
';
// Dropdown Max Height
$dropdownMaxHeight = $this->renderer->getFieldValue($componentId, 'visual_effects', 'dropdown_max_height', '300px');
$html .= '
';
$html .= ' Altura máxima del dropdown ';
$html .= ' Si se excede, aparece scroll vertical ';
$html .= '
';
$html .= '
';
$html .= '