From 3683dc2fb757c6cd1f019c5485c6eed90d9edcd1 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Wed, 12 Nov 2025 15:26:07 -0600 Subject: [PATCH] feat(frontend): Implement configurable navbar component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add fully customizable navbar component that renders on frontend using settings from admin panel. Features: - 38 configurable options (colors, typography, spacing, effects) - Responsive breakpoint support (sm, md, lg, xl, xxl) - Position modes: sticky, static, fixed - Let's Talk button with icon support - Dropdown hover effects for desktop - Mobile hamburger menu integration - Bootstrap 5.3 compatible - Box shadow and hover effects File: template-parts/navbar-configurable.php 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- template-parts/navbar-configurable.php | 302 +++++++++++++++++++++++++ 1 file changed, 302 insertions(+) create mode 100644 template-parts/navbar-configurable.php diff --git a/template-parts/navbar-configurable.php b/template-parts/navbar-configurable.php new file mode 100644 index 00000000..44b38bab --- /dev/null +++ b/template-parts/navbar-configurable.php @@ -0,0 +1,302 @@ +get_settings(); + +// Extraer configuración del componente +$navbar_config = isset($settings['components']['navbar']) + ? $settings['components']['navbar'] + : array(); + +// Los defaults ya están en Settings Manager, pero por seguridad validar +$defaults = array( + 'enabled' => true, + 'show_on_mobile' => true, + 'show_on_desktop' => true, + 'position' => 'sticky', + 'responsive_breakpoint' => 'lg', + 'enable_box_shadow' => true, + 'enable_underline_effect' => true, + 'enable_hover_background' => true, + + 'lets_talk_button' => array( + 'enabled' => true, + 'text' => "Let's Talk", + 'icon_class' => 'bi bi-lightning-charge-fill', + 'show_icon' => true, + 'position' => 'right' + ), + + 'dropdown' => array( + 'enable_hover_desktop' => true, + 'max_height' => 70, + 'border_radius' => 8, + 'item_padding_vertical' => 0.5, + 'item_padding_horizontal' => 1.25 + ), + + 'custom_styles' => array( + 'background_color' => '#1e3a5f', + 'text_color' => '#ffffff', + 'link_hover_color' => '#FF8600', + 'link_hover_bg_color' => '#FF8600', + 'dropdown_bg_color' => '#ffffff', + 'dropdown_item_color' => '#4A5568', + 'dropdown_item_hover_color' => '#FF8600', + 'font_size' => 'normal', + 'font_weight' => '500', + 'box_shadow_intensity' => 'normal', + 'border_radius' => 4, + 'padding_vertical' => 0.75, + 'link_padding_vertical' => 0.5, + 'link_padding_horizontal' => 0.65, + 'z_index' => 1030, + 'transition_speed' => 'normal' + ) +); + +// Merge con defaults (por si acaso) +$config = wp_parse_args($navbar_config, $defaults); + +// Verificar si está habilitado +if (!$config['enabled']) { + return; +} + +// Construir clases CSS +$classes = array('navbar', 'navbar-expand-' . $config['responsive_breakpoint'], 'navbar-dark'); + +// Visibilidad responsive +if (!$config['show_on_mobile']) { + $classes[] = 'd-none'; + $classes[] = 'd-' . $config['responsive_breakpoint'] . '-block'; +} +if (!$config['show_on_desktop']) { + $classes[] = 'd-' . $config['responsive_breakpoint'] . '-none'; +} + +$class_attr = implode(' ', $classes); + +// Construir estilos inline +$inline_styles = array(); + +// Background color +if (!empty($config['custom_styles']['background_color'])) { + $inline_styles[] = 'background-color: ' . esc_attr($config['custom_styles']['background_color']) . ' !important'; +} + +// Posición +$position_map = array( + 'sticky' => 'sticky', + 'static' => 'static', + 'fixed' => 'fixed' +); +if (isset($position_map[$config['position']])) { + $inline_styles[] = 'position: ' . $position_map[$config['position']]; + if ($config['position'] !== 'static') { + $inline_styles[] = 'top: 0'; + } +} + +// Z-index +$inline_styles[] = 'z-index: ' . absint($config['custom_styles']['z_index']); + +// Padding +$inline_styles[] = 'padding: ' . floatval($config['custom_styles']['padding_vertical']) . 'rem 0'; + +// Box shadow +if ($config['enable_box_shadow']) { + $shadow_map = array( + 'none' => 'none', + 'light' => '0 2px 6px rgba(30, 58, 95, 0.08)', + 'normal' => '0 4px 12px rgba(30, 58, 95, 0.15)', + 'strong' => '0 6px 20px rgba(30, 58, 95, 0.25)' + ); + if (isset($shadow_map[$config['custom_styles']['box_shadow_intensity']])) { + $inline_styles[] = 'box-shadow: ' . $shadow_map[$config['custom_styles']['box_shadow_intensity']]; + } +} + +// Transition +$transition_map = array( + 'fast' => '0.2s', + 'normal' => '0.3s', + 'slow' => '0.5s' +); +if (isset($transition_map[$config['custom_styles']['transition_speed']])) { + $inline_styles[] = 'transition: all ' . $transition_map[$config['custom_styles']['transition_speed']] . ' ease'; +} + +$style_attr = !empty($inline_styles) ? ' style="' . implode('; ', $inline_styles) . '"' : ''; +?> + + + + + + +