File

Back Back Up Advanced Editor

<?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 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">

<?php if (!empty($imagelogo)): ?>
		
		<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; ?>

<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>

<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>
    
    <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>

<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>

<script>
    document.getElementById('mobile-menu-button').addEventListener('click', () => {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });
</script>