@sociallane/elements 1.0.0

package/packages/widgets/nav-default/templates/wrapper.php

@@ -0,0 +1,401 @@
+<?php
+/**
+ * Template: Nav Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - show_logo, logo (type, href, attrs, text|src+alt)
+ * - menu_items (label, href, attrs, children[] with optional children[]), menu_id, toggle_id
+ * - submenu_style ('dropdown' | 'mega'), variant, bar_padding, desktop_centered
+ * - show_cta, cta (button data)
+ * - show_theme_switcher, theme_switcher_id
+ * - skip_link (href, label), classes, sticky, widget_id
+ * - variant, bar_padding, desktop_centered, is_floating, cta_extra_class (layout modifiers)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! is_array( $view ?? null ) || empty( $view ) ) {
+	return;
+}
+
+$view['classes']   = is_array( $view['classes'] ?? null ) ? $view['classes'] : [];
+$view['classes']   = array_merge(
+	[
+		'bar'      => '',
+		'drop_out' => '',
+		'link'     => '',
+		'logo'     => '',
+		'skip'     => '',
+	],
+	$view['classes']
+);
+$view['menu_items'] = is_array( $view['menu_items'] ?? null ) ? $view['menu_items'] : [];
+$view['logo']       = is_array( $view['logo'] ?? null ) ? $view['logo'] : null;
+$view['cta']        = is_array( $view['cta'] ?? null ) ? $view['cta'] : null;
+$view['skip_link']  = is_array( $view['skip_link'] ?? null ) ? $view['skip_link'] : null;
+$view['mega_cta']   = is_array( $view['mega_cta'] ?? null ) ? $view['mega_cta'] : null;
+
+$anim             = $view['animation'] ?? [];
+$section_attrs    = sociallane_section_animation_attrs( $anim );
+$elements_path    = SOCIALLANE_ELEMENTS_PATH . 'elements';
+$bar_padding      = $view['bar_padding'] ?? 'py-4';
+$desktop_centered = ! empty( $view['desktop_centered'] );
+$is_floating      = ! empty( $view['is_floating'] );
+$bar_class        = $view['classes']['bar'] . ' ' . $bar_padding;
+// Sticky: for floating, the wrapper is sticky; for other variants, the nav bar itself is sticky
+if ( ! empty( $view['sticky'] ) && ! $is_floating ) {
+	$bar_class .= ' sticky top-0 z-50';
+}
+$nav_row_class = $is_floating
+	? 'flex items-center justify-between'
+	: ( $desktop_centered ? 'lg:grid lg:grid-cols-3 lg:items-center lg:gap-4' : 'flex items-center justify-between' );
+$nav_inner_wrapper_class = $is_floating ? 'max-w-5xl w-full mx-auto relative' : 'container relative mx-auto px-4 sm:px-6 lg:px-8';
+?>
+
+<?php if ( ! empty( $view['skip_link'] ) ) : ?>
+	<a
+		href="<?php echo esc_url( $view['skip_link']['href'] ); ?>"
+		class="<?php echo esc_attr( $view['classes']['skip'] ); ?> absolute left-4 top-4 z-[100] rounded-lg px-4 py-2 text-sm font-medium opacity-0 focus:opacity-100 focus:outline-none"
+	><?php echo $view['skip_link']['label']; ?></a>
+<?php endif; ?>
+
+<header class="sl-nav relative z-[9999] w-full" role="banner"<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>>
+	<?php if ( $is_floating && ! empty( $view['sticky'] ) ) : ?>
+		<div class="sticky top-4 z-50 w-full flex justify-center px-4 pt-4">
+	<?php endif; ?>
+	<?php if ( $is_floating ) : ?>
+		<div class="w-[calc(100%-50vw)] mx-auto flex justify-center">
+	<?php endif; ?>
+	<nav
+		class="<?php echo esc_attr( $bar_class ); ?> relative overflow-x-clip <?php echo $is_floating ? 'w-full' : 'w-full'; ?>"
+		aria-label="<?php echo esc_attr__( 'Main navigation', 'sociallane-elements' ); ?>"
+	>
+		<?php /* Container (or max-w for floating): position context for mega panels */ ?>
+		<div class="<?php echo esc_attr( $nav_inner_wrapper_class ); ?>">
+			<?php /* Nav row */ ?>
+			<div class="<?php echo esc_attr( $nav_row_class ); ?>">
+			<?php /* Logo: left in both layouts */ ?>
+			<?php if ( ! empty( $view['show_logo'] ) && $view['logo'] ) : ?>
+				<div class="flex-shrink-0 <?php echo ( $desktop_centered && ! $is_floating ) ? 'lg:justify-self-start' : ''; ?>">
+					<a href="<?php echo esc_url( $view['logo']['href'] ); ?>" <?php echo $view['logo']['attrs']; ?> class="<?php echo esc_attr( $view['classes']['logo'] ); ?> font-heading text-xl font-bold focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded">
+						<?php if ( $view['logo']['type'] === 'image' && ! empty( $view['logo']['src'] ) ) : ?>
+							<img src="<?php echo esc_url( $view['logo']['src'] ); ?>" alt="<?php echo $view['logo']['alt']; ?>" class="h-8 w-auto" width="120" height="32" />
+						<?php else : ?>
+							<span><?php echo $view['logo']['text'] ?? ''; ?></span>
+						<?php endif; ?>
+					</a>
+				</div>
+			<?php endif; ?>
+
+			<button
+				type="button"
+				class="inline-flex items-center justify-center rounded-lg p-2 <?php echo esc_attr( $view['classes']['link'] ); ?> focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 lg:hidden <?php echo ( ! empty( $view['show_logo'] ) && $view['logo'] ) ? '' : 'ml-auto'; ?>"
+				aria-expanded="false"
+				aria-controls="<?php echo esc_attr( $view['menu_id'] ); ?>"
+				aria-label="<?php echo esc_attr__( 'Toggle menu', 'sociallane-elements' ); ?>"
+				id="<?php echo esc_attr( $view['toggle_id'] ); ?>"
+			>
+				<svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+				</svg>
+			</button>
+
+			<?php if ( $is_floating ) : ?>
+				<?php /* Floating variant: menu centered in middle, theme + CTA on right */ ?>
+				<div class="hidden lg:flex flex-1 lg:items-center lg:justify-center">
+					<?php include __DIR__ . '/partials/desktop-menu.php'; ?>
+				</div>
+				<div class="hidden lg:flex lg:items-center lg:gap-4">
+					<?php if ( ! empty( $view['show_theme_switcher'] ) ) : ?>
+						<button
+							type="button"
+							id="<?php echo esc_attr( $view['theme_switcher_id'] ); ?>"
+							class="theme-switcher-btn inline-flex items-center justify-center rounded-lg p-2 <?php echo esc_attr( $view['classes']['link'] ); ?> focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+							aria-label="<?php echo esc_attr__( 'Toggle dark mode', 'sociallane-elements' ); ?>"
+						>
+							<span class="theme-switcher-moon" aria-hidden="true">
+								<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+								</svg>
+							</span>
+							<span class="theme-switcher-sun hidden" aria-hidden="true">
+								<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+								</svg>
+							</span>
+						</button>
+					<?php endif; ?>
+					<?php if ( ! empty( $view['show_cta'] ) && $view['cta'] ) : ?>
+						<?php $button = $view['cta']; $button['class'] = ( $view['cta_extra_class'] ?? '' ) . ( isset( $button['class'] ) ? ' ' . $button['class'] : '' ); include $elements_path . '/button/templates/render.php'; ?>
+					<?php endif; ?>
+				</div>
+			<?php elseif ( $desktop_centered ) : ?>
+				<?php /* Centered variant: menu in column 2, theme+CTA in column 3 */ ?>
+				<div class="hidden lg:flex lg:items-center lg:justify-center lg:col-start-2">
+					<?php include __DIR__ . '/partials/desktop-menu.php'; ?>
+				</div>
+				<div class="hidden lg:flex lg:items-center lg:justify-end lg:gap-4 lg:col-start-3">
+					<?php if ( ! empty( $view['show_theme_switcher'] ) ) : ?>
+						<button
+							type="button"
+							id="<?php echo esc_attr( $view['theme_switcher_id'] ); ?>"
+							class="theme-switcher-btn inline-flex items-center justify-center rounded-lg p-2 <?php echo esc_attr( $view['classes']['link'] ); ?> focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+							aria-label="<?php echo esc_attr__( 'Toggle dark mode', 'sociallane-elements' ); ?>"
+						>
+							<span class="theme-switcher-moon" aria-hidden="true">
+								<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+								</svg>
+							</span>
+							<span class="theme-switcher-sun hidden" aria-hidden="true">
+								<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+								</svg>
+							</span>
+						</button>
+					<?php endif; ?>
+					<?php if ( ! empty( $view['show_cta'] ) && $view['cta'] ) : ?>
+						<?php $button = $view['cta']; include $elements_path . '/button/templates/render.php'; ?>
+					<?php endif; ?>
+				</div>
+			<?php else : ?>
+				<?php /* Default / minimal / compact: menu + theme + CTA in one group at end */ ?>
+				<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:gap-8">
+					<?php include __DIR__ . '/partials/desktop-menu.php'; ?>
+					<?php if ( ! empty( $view['show_theme_switcher'] ) ) : ?>
+						<button
+							type="button"
+							id="<?php echo esc_attr( $view['theme_switcher_id'] ); ?>"
+							class="theme-switcher-btn inline-flex items-center justify-center rounded-lg p-2 <?php echo esc_attr( $view['classes']['link'] ); ?> focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+							aria-label="<?php echo esc_attr__( 'Toggle dark mode', 'sociallane-elements' ); ?>"
+						>
+							<span class="theme-switcher-moon" aria-hidden="true">
+								<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+								</svg>
+							</span>
+							<span class="theme-switcher-sun hidden" aria-hidden="true">
+								<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+								</svg>
+							</span>
+						</button>
+					<?php endif; ?>
+					<?php if ( ! empty( $view['show_cta'] ) && $view['cta'] ) : ?>
+						<?php $button = $view['cta']; include $elements_path . '/button/templates/render.php'; ?>
+					<?php endif; ?>
+				</div>
+			<?php endif; ?>
+			</div>
+
+			<?php /* Mega panels: full width of container, below nav row; shown via JS on hover */ ?>
+			<?php if ( ( $view['submenu_style'] ?? 'dropdown' ) === 'mega' && ! empty( $view['menu_items'] ) ) : ?>
+				<?php $menu_id = $view['menu_id'] ?? 'nav-menu'; ?>
+				<div class="nav-mega-panels absolute left-0 right-0 top-full z-50 hidden w-full -mt-1 pt-1 max-lg:!hidden" aria-hidden="true">
+					<?php foreach ( $view['menu_items'] as $index => $mega_item ) : ?>
+						<?php if ( empty( $mega_item['children'] ) ) : continue; endif; ?>
+						<?php
+						$mega_id = $menu_id . '-mega-' . $index;
+						$item    = $mega_item;
+						?>
+						<div id="<?php echo esc_attr( $mega_id ); ?>" class="nav-mega-panel-wrapper hidden" data-nav-mega-panel-wrapper role="region" aria-label="<?php echo esc_attr( $item['label'] ); ?>">
+							<?php include __DIR__ . '/partials/desktop-mega-panel.php'; ?>
+						</div>
+					<?php endforeach; ?>
+				</div>
+			<?php endif; ?>
+		</div>
+
+		<?php /* Mobile: full-width drop-out below bar; positioned relative to nav so it spans full width */ ?>
+		<div
+			id="<?php echo esc_attr( $view['menu_id'] ); ?>"
+			class="<?php echo esc_attr( $view['classes']['drop_out'] ?? $view['classes']['bar'] ); ?> absolute left-0 right-0 top-full z-40 hidden w-full py-4 shadow-lg lg:hidden"
+			aria-hidden="true"
+			data-nav-toggle-id="<?php echo esc_attr( $view['toggle_id'] ); ?>"
+		>
+			<div class="w-full px-4 text-left sm:px-6">
+				<div class="flex w-full flex-col items-start gap-4">
+					<?php include __DIR__ . '/partials/mobile-menu.php'; ?>
+					<?php if ( ! empty( $view['show_theme_switcher'] ) ) : ?>
+						<div class="w-full">
+							<button
+								type="button"
+								class="theme-switcher-btn inline-flex items-center justify-center rounded-lg p-2 <?php echo esc_attr( $view['classes']['link'] ); ?> focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+								aria-label="<?php echo esc_attr__( 'Toggle dark mode', 'sociallane-elements' ); ?>"
+							>
+								<span class="theme-switcher-moon" aria-hidden="true">
+									<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+									</svg>
+								</span>
+								<span class="theme-switcher-sun hidden" aria-hidden="true">
+									<svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+									</svg>
+								</span>
+							</button>
+						</div>
+					<?php endif; ?>
+					<?php if ( ! empty( $view['show_cta'] ) && $view['cta'] ) : ?>
+						<div class="w-full">
+							<?php
+							$button = $view['cta'];
+							include $elements_path . '/button/templates/render.php';
+							?>
+						</div>
+					<?php endif; ?>
+				</div>
+			</div>
+		</div>
+	</nav>
+	<?php if ( $is_floating ) : ?>
+		</div>
+	<?php endif; ?>
+	<?php if ( $is_floating && ! empty( $view['sticky'] ) ) : ?>
+		</div>
+	<?php endif; ?>
+</header>
+<script>
+(function() {
+	var menu = document.getElementById('<?php echo esc_js( $view['menu_id'] ); ?>');
+	var toggle = document.getElementById('<?php echo esc_js( $view['toggle_id'] ); ?>');
+	if (!menu || !toggle) return;
+	function updateAria(open) {
+		toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+		menu.setAttribute('aria-hidden', open ? 'false' : 'true');
+	}
+	function isLg() { return window.matchMedia('(min-width: 1024px)').matches; }
+	toggle.addEventListener('click', function() {
+		if (isLg()) return;
+		menu.classList.toggle('hidden');
+		updateAria(!menu.classList.contains('hidden'));
+	});
+	function onResize() {
+		if (isLg()) {
+			menu.classList.remove('hidden');
+			updateAria(true);
+		} else {
+			menu.classList.add('hidden');
+			updateAria(false);
+		}
+	}
+	window.addEventListener('resize', onResize);
+	onResize();
+})();
+</script>
+<script>
+(function() {
+	document.querySelectorAll('[data-nav-submenu]').forEach(function(block) {
+		var btn = block.querySelector('[data-nav-submenu-toggle]');
+		var panel = block.querySelector('[data-nav-submenu-panel]');
+		var chevron = block.querySelector('.nav-submenu-chevron');
+		if (!btn || !panel) return;
+		btn.addEventListener('click', function() {
+			var open = panel.getAttribute('aria-hidden') !== 'true';
+			panel.style.gridTemplateRows = open ? '0fr' : '1fr';
+			panel.setAttribute('aria-hidden', open ? 'true' : 'false');
+			btn.setAttribute('aria-expanded', open ? 'false' : 'true');
+			if (chevron) chevron.style.transform = open ? '' : 'rotate(180deg)';
+		});
+	});
+})();
+</script>
+<?php if ( ( $view['submenu_style'] ?? 'dropdown' ) === 'mega' ) : ?>
+<script>
+(function() {
+	var panelsWrapper = document.getElementById('<?php echo esc_js( $view['menu_id'] ); ?>')?.closest('nav')?.querySelector('.nav-mega-panels');
+	if (!panelsWrapper) return;
+	var container = panelsWrapper.closest('.container.relative');
+	if (!container) return;
+	var triggers = container.querySelectorAll('[data-mega-id]');
+	if (!triggers.length) return;
+	var hideTimer;
+	function isLg() { return window.matchMedia('(min-width: 1024px)').matches; }
+	function showPanel(id) {
+		if (!isLg()) return;
+		clearTimeout(hideTimer);
+		panelsWrapper.classList.remove('hidden');
+		panelsWrapper.setAttribute('aria-hidden', 'false');
+		container.querySelectorAll('.nav-mega-panel-wrapper').forEach(function(w) {
+			w.classList.toggle('hidden', w.id !== id);
+		});
+	}
+	var HIDE_DELAY_MS = 150;
+	function hidePanelsNow() {
+		clearTimeout(hideTimer);
+		panelsWrapper.classList.add('hidden');
+		panelsWrapper.setAttribute('aria-hidden', 'true');
+		container.querySelectorAll('.nav-mega-panel-wrapper').forEach(function(w) {
+			w.classList.add('hidden');
+		});
+	}
+	function hidePanels() {
+		hideTimer = setTimeout(hidePanelsNow, HIDE_DELAY_MS);
+	}
+	triggers.forEach(function(li) {
+		var id = li.getAttribute('data-mega-id');
+		if (!id) return;
+		li.addEventListener('mouseenter', function() { showPanel(id); });
+		li.addEventListener('mouseleave', function() { hidePanels(); });
+	});
+	panelsWrapper.addEventListener('mouseenter', function(e) {
+		clearTimeout(hideTimer);
+		var w = e.target.closest('.nav-mega-panel-wrapper');
+		if (w && w.id) showPanel(w.id);
+	});
+	panelsWrapper.addEventListener('mouseleave', function() { hidePanels(); });
+	window.addEventListener('resize', function() {
+		if (!isLg()) hidePanelsNow();
+	});
+})();
+</script>
+<?php endif; ?>
+<?php if ( ! empty( $view['show_theme_switcher'] ) ) : ?>
+<script>
+(function() {
+	var STORAGE_KEY = 'sociallane-theme';
+	var root = document.documentElement;
+
+	function getPreferredTheme() {
+		try {
+			var stored = localStorage.getItem(STORAGE_KEY);
+			if (stored === 'dark' || stored === 'light') return stored;
+		} catch (e) {}
+		return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+
+	function applyTheme(theme) {
+		root.classList.toggle('dark', theme === 'dark');
+		var btns = document.querySelectorAll('.theme-switcher-btn');
+		btns.forEach(function(btn) {
+			var moon = btn.querySelector('.theme-switcher-moon');
+			var sun = btn.querySelector('.theme-switcher-sun');
+			if (moon) moon.classList.toggle('hidden', theme === 'dark');
+			if (sun) sun.classList.toggle('hidden', theme !== 'dark');
+		});
+		try {
+			localStorage.setItem(STORAGE_KEY, theme);
+		} catch (e) {}
+	}
+
+	applyTheme(getPreferredTheme());
+
+	document.addEventListener('click', function(e) {
+		if (!e.target.closest('.theme-switcher-btn')) return;
+		var current = root.classList.contains('dark') ? 'dark' : 'light';
+		applyTheme(current === 'dark' ? 'light' : 'dark');
+	});
+
+	if (window.matchMedia) {
+		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(ev) {
+			if (localStorage.getItem(STORAGE_KEY)) return;
+			applyTheme(ev.matches ? 'dark' : 'light');
+		});
+	}
+})();
+</script>
+<?php endif; ?>

package/packages/widgets/nav-floating/data/view.php

@@ -0,0 +1,253 @@
+<?php
+/**
+ * Data Preparation: Nav
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Nav widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_nav_floating_view( array $settings, string $widget_id ): array {
+	$variant = 'floating';
+	$show_logo           = ( $settings['show_logo'] ?? 'yes' ) === 'yes';
+	$logo_type           = $settings['logo_type'] ?? 'text';
+	$show_cta            = ( $settings['show_cta'] ?? 'yes' ) === 'yes';
+	$show_skip           = ( $settings['show_skip_link'] ?? 'yes' ) === 'yes';
+	$show_theme_switcher = ( $settings['show_theme_switcher'] ?? 'yes' ) === 'yes';
+	// Floating variant is always sticky; otherwise use setting
+	$sticky              = $variant === 'floating' || ( $settings['sticky'] ?? '' ) === 'yes';
+	$submenu_style       = ( $settings['submenu_style'] ?? 'dropdown' ) === 'mega' ? 'mega' : 'dropdown';
+
+	// Logo
+	$logo = null;
+	if ( $show_logo ) {
+		$logo_link = sociallane_prepare_link_attrs( $settings['logo_url'] ?? [] );
+		if ( $logo_type === 'image' ) {
+			$img_data = $settings['logo_image'] ?? [];
+			$logo = [
+				'type'   => 'image',
+				'href'   => $logo_link['url'],
+				'attrs'  => $logo_link['attrs'],
+				'src'    => esc_url( $img_data['url'] ?? '' ),
+				'alt'    => esc_attr( $settings['logo_alt'] ?? '' ),
+			];
+		} else {
+			$logo = [
+				'type'  => 'text',
+				'href'  => $logo_link['url'],
+				'attrs' => $logo_link['attrs'],
+				'text'  => esc_html( $settings['logo_text'] ?? '' ),
+			];
+		}
+	}
+
+	// Menu items from WordPress nav menu (tree: top-level items with optional 'children')
+	$menu_items = [];
+	$menu_id    = isset( $settings['menu'] ) ? absint( $settings['menu'] ) : 0;
+	if ( $menu_id > 0 ) {
+		$wp_items = wp_get_nav_menu_items( $menu_id );
+		if ( is_array( $wp_items ) ) {
+			$normalized = [];
+			foreach ( $wp_items as $item ) {
+				$label = trim( $item->title ?? '' );
+				$href  = esc_url( $item->url ?? '#' );
+				$attrs = [];
+				if ( ! empty( $item->target ) && $item->target === '_blank' ) {
+					$attrs[] = 'target="_blank"';
+					$attrs[] = 'rel="noopener noreferrer"';
+				}
+				$desc = isset( $item->description ) ? trim( (string) $item->description ) : '';
+				$normalized[ (int) $item->ID ] = [
+					'label'       => esc_html( $label ),
+					'description' => $desc !== '' ? esc_html( $desc ) : '',
+					'href'        => $href,
+					'attrs'       => implode( ' ', $attrs ),
+					'menu_order'  => (int) $item->menu_order,
+					'parent'      => (int) $item->menu_item_parent,
+				];
+			}
+			$top_level = array_filter( $normalized, static function ( $i ) {
+				return $i['parent'] === 0;
+			} );
+			uasort( $top_level, static function ( $a, $b ) {
+				return $a['menu_order'] <=> $b['menu_order'];
+			} );
+			foreach ( $top_level as $id => $item ) {
+				$child_ids = array_keys( array_filter( $normalized, static function ( $i ) use ( $id ) {
+					return $i['parent'] === $id;
+				} ) );
+				uasort( $child_ids, static function ( $a, $b ) use ( $normalized ) {
+					return ( $normalized[ $a ]['menu_order'] ?? 0 ) <=> ( $normalized[ $b ]['menu_order'] ?? 0 );
+				} );
+				$children = [];
+				foreach ( $child_ids as $cid ) {
+					$c = $normalized[ $cid ];
+					$grandchildren_raw = array_filter( $normalized, static function ( $i ) use ( $cid ) {
+						return $i['parent'] === $cid;
+					} );
+					uasort( $grandchildren_raw, static function ( $a, $b ) {
+						return $a['menu_order'] <=> $b['menu_order'];
+					} );
+					$grandchildren = array_values( array_map( static function ( $g ) {
+						return [
+							'label'       => $g['label'],
+							'description' => $g['description'] ?? '',
+							'href'        => $g['href'],
+							'attrs'       => $g['attrs'],
+						];
+					}, $grandchildren_raw ) );
+					$children[] = [
+						'label'       => $c['label'],
+						'description' => $c['description'] ?? '',
+						'href'        => $c['href'],
+						'attrs'       => $c['attrs'],
+						'children'    => $grandchildren,
+					];
+				}
+				$menu_items[] = [
+					'label'    => $item['label'],
+					'href'     => $item['href'],
+					'attrs'    => $item['attrs'],
+					'children' => $children,
+				];
+			}
+		}
+	}
+
+	// CTA button
+	$cta = null;
+	if ( $show_cta ) {
+		$cta_text = trim( $settings['cta_text'] ?? '' );
+		if ( $cta_text !== '' ) {
+			$cta_url  = $settings['cta_url'] ?? [];
+			$preset   = $settings['cta_style'] ?? 'primary';
+			$cta_color = $settings['cta_color'] ?? 'default';
+			$cta = sociallane_prepare_button_data( $cta_text, $cta_url, [ 'preset' => $preset, 'color' => $cta_color ] );
+		}
+	}
+
+	// Skip link
+	$skip_link = null;
+	if ( $show_skip ) {
+		$target = trim( $settings['skip_link_target'] ?? 'main-content' );
+		$skip_link = [
+			'href'   => '#' . esc_attr( $target ?: 'main-content' ),
+			'label'  => esc_html__( 'Skip to main content', 'sociallane-elements' ),
+		];
+	}
+
+	// Variant: bar style and padding
+	$bar_styles = [
+		'default'  => [
+			'bar'         => 'bg-neutral-100 text-zinc-900 border-b border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700',
+			'drop_out'    => 'bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700',
+			'padding'     => 'py-4',
+			'centered'    => false,
+			'is_floating' => false,
+		],
+		'centered'  => [
+			'bar'         => 'bg-blue-chill-950 border-b border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700',
+			'drop_out'    => 'bg-blue-chill-800 border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700',
+			'padding'     => 'py-4',
+			'centered'    => true,
+			'is_floating' => false,
+		],
+		'minimal'   => [
+			'bar'         => 'bg-blue-chill-950 dark:bg-neutral-900 dark:border-neutral-700',
+			'drop_out'    => 'bg-white/95 dark:bg-neutral-900/95 border-t border-neutral-200 dark:border-neutral-700',
+			'padding'     => 'py-4',
+			'centered'    => false,
+			'is_floating' => false,
+		],
+		'compact'   => [
+			'bar'         => 'bg-blue-chill-950 border-b border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700',
+			'drop_out'    => 'bg-white border-t border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700',
+			'padding'     => 'py-2',
+			'centered'    => false,
+			'is_floating' => false,
+		],
+		'floating'  => [
+			'bar'         => 'bg-blue-chill-950 dark:bg-neutral-900 shadow-lg rounded-full',
+			'drop_out'    => 'bg-white dark:bg-neutral-900 border-t border-neutral-200 dark:border-neutral-700',
+			'padding'     => 'py-3 px-6',
+			'centered'    => false,
+			'is_floating' => true,
+		],
+	];
+	$variant_style = $bar_styles[ $variant ] ?? $bar_styles['default'];
+
+	$animation = sociallane_animation_view_data( $settings );
+
+	// Light/dark mode: dual classes so Nav responds to theme switcher (dark class on <html>)
+	$classes = [
+		'bar'      => $variant_style['bar'],
+		'drop_out' => $variant_style['drop_out'],
+		'link'     => 'no-underline text-zinc-900 hover:text-zinc-500 hover:underline focus:text-neutral-900 dark:text-neutral-300 dark:hover:text-white dark:focus:text-white',
+		'logo'     => 'no-underline text-neutral-900 dark:text-white',
+		'skip'     => 'no-underline bg-primary text-zinc-900 focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-neutral-900',
+	];
+
+	$is_floating = ! empty( $variant_style['is_floating'] );
+	$cta_extra_class = $is_floating ? 'rounded-full' : '';
+
+	return [
+		'variant'             => $variant,
+		'is_floating'         => $is_floating,
+		'bar_padding'         => $variant_style['padding'],
+		'desktop_centered'    => $variant_style['centered'],
+		'cta_extra_class'     => $cta_extra_class,
+		'show_logo'           => $show_logo,
+		'logo'                => $logo,
+		'menu_items'          => $menu_items,
+		'show_cta'            => $show_cta,
+		'cta'                 => $cta,
+		'show_theme_switcher' => $show_theme_switcher,
+		'skip_link'           => $skip_link,
+		'classes'             => $classes,
+		'sticky'              => $sticky,
+		'submenu_style'       => $submenu_style,
+		'mega_cta'            => $submenu_style === 'mega' ? prepare_mega_cta( $settings ) : null,
+		'widget_id'           => $widget_id,
+		'animation'           => $animation,
+		'menu_id'             => 'nav-menu-' . $widget_id,
+		'toggle_id'           => 'nav-toggle-' . $widget_id,
+		'theme_switcher_id'   => 'nav-theme-switcher-' . $widget_id,
+	];
+}
+
+/**
+ * Prepare mega menu CTA column data
+ *
+ * @param array $settings Elementor settings
+ * @return array|null Keys: heading, text, link_text, link_url, attrs; or null if empty
+ */
+if ( ! function_exists( 'prepare_mega_cta' ) ) {
+	function prepare_mega_cta( array $settings ): ?array {
+		$heading   = trim( $settings['mega_cta_heading'] ?? '' );
+		$text      = trim( $settings['mega_cta_text'] ?? '' );
+		$link_text = trim( $settings['mega_cta_link_text'] ?? '' );
+		if ( $heading === '' && $text === '' && $link_text === '' ) {
+			return null;
+		}
+		$link = sociallane_prepare_link_attrs( $settings['mega_cta_url'] ?? [] );
+		return [
+			'heading'   => esc_html( $heading ),
+			'text'      => esc_html( $text ),
+			'link_text' => esc_html( $link_text ),
+			'link_url'  => $link['url'],
+			'attrs'     => $link['attrs'],
+		];
+	}
+}
+