<?php include "$inc/head-tags.php"; ?>
<?php
// Load header menus with a fallback
$header_menus = [];
if (file_exists(__DIR__ . '/data.header.php')) {
$header_menus = include __DIR__ . '/data.header.php';
}
// Ensure header_menus is an array with default structure
$header_menus = array_merge([
'menu' => [],
'get_started' => ['title' => 'Get Started', 'url' => '#get-started', 'is_button' => true]
], is_array($header_menus) ? $header_menus : []);
// Function to flatten menu for mobile
function flattenMenu($menu) {
$flat_menu = [];
foreach ($menu as $item) {
$flat_menu[] = ['title' => $item['title'], 'url' => $item['url']];
if (!empty($item['sub_menus'])) {
foreach ($item['sub_menus'] as $sub_item) {
$flat_menu[] = ['title' => $sub_item['title'], 'url' => $sub_item['url']];
if (!empty($sub_item['sub_sub_menus'])) {
foreach ($sub_item['sub_sub_menus'] as $sub_sub_item) {
$flat_menu[] = ['title' => $sub_sub_item['title'], 'url' => $sub_sub_item['url']];
}
}
}
}
}
return $flat_menu;
}
$mobile_menu = flattenMenu($header_menus['menu']);
?>
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<!-- Logo -->
<?php if (!empty($imagelogo)): ?>
<!-- Logo -->
<a href="<?= $webURL ?>">
<div class="flex items-center gap-2">
<img src="<?= "$path/logo.png" ?>" alt="Logo" class="h-10 w-auto">
</div>
</a>
<?php else: ?>
<a href="<?= $webURL ?>">
<div class="flex items-center gap-2 text-2xl font-semibold">
<div class="bg-blue-500 text-white p-2 rounded-full shadow">
<i data-lucide="<?= $logoicon ?>" class="w-5 h-5"></i>
</div>
<?= $logotext ?>
</div>
</a>
<?php endif; ?>
<!-- Desktop Nav -->
<nav class="hidden md:flex space-x-8 items-center">
<?php foreach ($header_menus['menu'] as $item): ?>
<?php if (empty($item['sub_menus'])): ?>
<a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="text-gray-600 hover:text-blue-600 text-sm font-medium transition"><?php echo htmlspecialchars($item['title'] ?? ''); ?></a>
<?php else: ?>
<div class="relative group">
<a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="text-gray-600 hover:text-blue-600 text-sm font-medium transition flex items-center gap-1">
<?php echo htmlspecialchars($item['title'] ?? ''); ?>
<i data-lucide="chevron-down" class="w-4 h-4"></i>
</a>
<div class="absolute hidden group-hover:block bg-white shadow-md rounded-md py-2 mt-1 w-48 z-50">
<?php foreach ($item['sub_menus'] as $sub_item): ?>
<div class="relative group/sub">
<a href="<?php echo htmlspecialchars($sub_item['url'] ?? '#'); ?>" class="block px-4 py-2 text-sm text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition">
<?php echo htmlspecialchars($sub_item['title'] ?? ''); ?>
<?php if (!empty($sub_item['sub_sub_menus'])): ?>
<i data-lucide="chevron-right" class="w-4 h-4 inline float-right"></i>
<?php endif; ?>
</a>
<?php if (!empty($sub_item['sub_sub_menus'])): ?>
<div class="absolute hidden group-hover/sub:block bg-white shadow-md rounded-md py-2 mt-0 w-48 left-full top-0 z-50">
<?php foreach ($sub_item['sub_sub_menus'] as $sub_sub_item): ?>
<a href="<?php echo htmlspecialchars($sub_sub_item['url'] ?? '#'); ?>" class="block px-4 py-2 text-sm text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition">
<?php echo htmlspecialchars($sub_sub_item['title'] ?? ''); ?>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<a href="<?php echo htmlspecialchars($header_menus['get_started']['url'] ?? '#get-started'); ?>" class="ml-4 bg-blue-600 text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-blue-700 transition">
<?php echo htmlspecialchars($header_menus['get_started']['title'] ?? 'Get Started'); ?>
</a>
</nav>
<!-- Mobile Menu Icon -->
<button class="md:hidden focus:outline-none" id="mobile-menu-button">
<i data-lucide="menu" class="w-6 h-6 text-gray-700"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden px-4 pb-4">
<?php foreach ($mobile_menu as $item): ?>
<a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="block py-2 text-gray-700 hover:text-blue-600"><?php echo htmlspecialchars($item['title'] ?? ''); ?></a>
<?php endforeach; ?>
</div>
</header>
<!-- Styles -->
<style>
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.6s ease-out both; }
</style>
<!-- Scripts -->
<script>
document.getElementById('mobile-menu-button').addEventListener('click', () => {
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.toggle('hidden');
});
</script>