Sindbad~EG File Manager

<?php
$current_page = basename($_SERVER['PHP_SELF']);
$user = getCurrentUser();
?>
<!-- Admin Header with Top Menu -->
<header class="bg-white/80 backdrop-blur-sm shadow-lg border-b border-slate-200/50">
    <div class="flex items-center justify-between px-8 py-4">
        <!-- Page Title and Navigation Section -->
        <div class="flex items-center space-x-6">
            <!-- Page Title -->
            <div class="animate-fade-in">
                <?php 
                $page_titles = [
                    'index.php' => ['Dashboard', 'fas fa-tachometer-alt', 'from-blue-600 to-purple-600'],
                    'events.php' => ['Events Management', 'fas fa-calendar-alt', 'from-orange-600 to-red-600'],
                    'areas.php' => ['Areas Management', 'fas fa-map', 'from-green-600 to-blue-600'],
                    'districts.php' => ['Districts Management', 'fas fa-building', 'from-blue-600 to-indigo-600'],
                    'assemblies.php' => ['Assemblies Management', 'fas fa-church', 'from-purple-600 to-pink-600'],
                    'users.php' => ['Users Management', 'fas fa-users', 'from-indigo-600 to-purple-600'],
                    'members.php' => ['Members Management', 'fas fa-user-friends', 'from-teal-600 to-cyan-600'],
                    'registrations.php' => ['Registrations', 'fas fa-ticket-alt', 'from-yellow-600 to-orange-600'],
                    'reports.php' => ['Reports', 'fas fa-chart-line', 'from-red-600 to-pink-600'],
                    'event-templates.php' => ['Event Templates', 'fas fa-clipboard-list', 'from-emerald-600 to-teal-600'],
                    'form-builder.php' => ['Form Builder', 'fas fa-wpforms', 'from-violet-600 to-purple-600'],
                    'settings.php' => ['Settings', 'fas fa-cog', 'from-slate-600 to-gray-600'],
                    'email-settings.php' => ['Email Settings', 'fas fa-envelope-open-text', 'from-blue-600 to-cyan-600'],
                    'audit.php' => ['Audit Log', 'fas fa-history', 'from-amber-600 to-orange-600'],
                    'notifications.php' => ['Notifications', 'fas fa-bell', 'from-rose-600 to-pink-600'],
                    'backup.php' => ['Backup & Restore', 'fas fa-database', 'from-emerald-600 to-green-600']
                ];
                
                $current_title = $page_titles[$current_page] ?? ['Admin Panel', 'fas fa-cog', 'from-slate-600 to-gray-600'];
                ?>
                <h1 class="text-2xl font-bold bg-gradient-to-r <?php echo $current_title[2]; ?> bg-clip-text text-transparent flex items-center">
                    <div class="p-2 rounded-xl bg-gradient-to-br <?php echo str_replace('to-', 'to-', $current_title[2]); ?> mr-3">
                        <i class="<?php echo $current_title[1]; ?> text-white text-sm"></i>
                    </div>
                    <?php echo $current_title[0]; ?>
                </h1>
            </div>

        </div>

        <!-- User Profile Section -->
        <nav class="flex items-center space-x-6">

            <!-- User Profile Dropdown -->
            <div class="relative">
                <button onclick="toggleUserDropdown()" class="flex items-center space-x-3 px-3 py-2 rounded-lg hover:bg-slate-100 transition-colors">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                        <span class="text-white font-semibold text-xs">
                            <?php echo strtoupper(substr($user['first_name'], 0, 1) . substr($user['last_name'], 0, 1)); ?>
                        </span>
                    </div>
                    <div class="text-left">
                        <p class="text-sm font-semibold text-slate-800">
                            <?php echo htmlspecialchars($user['first_name'] . ' ' . $user['last_name']); ?>
                        </p>
                        <p class="text-xs text-slate-500">
                            <?php echo ucfirst(str_replace('_', ' ', $user['role'])); ?>
                        </p>
                    </div>
                    <i class="fas fa-chevron-down text-xs text-slate-400 transition-transform" id="user-chevron"></i>
                </button>
                
                <!-- User Dropdown -->
                <div id="user-dropdown"
                     class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-200 py-2 z-50 hidden"
                     onclick="event.stopPropagation()">
                    
                    <a href="../profile.php" class="flex items-center space-x-3 px-4 py-3 text-slate-700 hover:bg-slate-50 transition-colors">
                        <i class="fas fa-user text-slate-400"></i>
                        <span>Profile</span>
                    </a>
                    
                    <a href="../dashboard.php" class="flex items-center space-x-3 px-4 py-3 text-slate-700 hover:bg-slate-50 transition-colors">
                        <i class="fas fa-home text-slate-400"></i>
                        <span>Public Dashboard</span>
                    </a>
                    
                    <hr class="my-2 border-slate-200">
                    
                    <a href="../logout.php" class="flex items-center space-x-3 px-4 py-3 text-red-600 hover:bg-red-50 transition-colors">
                        <i class="fas fa-sign-out-alt text-red-500"></i>
                        <span>Logout</span>
                    </a>
                </div>
            </div>
        </nav>
    </div>
</header>

<script>
function toggleUserDropdown() {
    const dropdown = document.getElementById('user-dropdown');
    const chevron = document.getElementById('user-chevron');
    
    // Toggle user dropdown
    dropdown.classList.toggle('hidden');
    chevron.classList.toggle('rotate-180');
}

// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
    const userDropdown = document.getElementById('user-dropdown');
    const userButton = event.target.closest('[onclick="toggleUserDropdown()"]');
    
    if (!userButton && !userDropdown.contains(event.target)) {
        userDropdown.classList.add('hidden');
        document.getElementById('user-chevron').classList.remove('rotate-180');
    }
});
</script>