<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-3 sm:px-6 lg:px-8 flex-none">
 <div class="flex items-center gap-2 sm:gap-4">
 <button @click="sidebarOpen = !sidebarOpen" class="hidden lg:flex items-center justify-center h-10 w-10 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-all">
 <i class="fa-solid" :class="sidebarOpen ? 'fa-indent' : 'fa-outdent'"></i>
 </button>
 <button @click="mobileSidebar = true" class="flex lg:hidden items-center justify-center h-10 w-10 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-all">
 <i class="fa-solid fa-bars-staggered"></i>
 </button>
 <div class="hidden md:flex items-center gap-4">
 <div class="flex items-center text-sm font-bold text-gray-400 gap-2">
 <span><?php echo ucfirst(($authUser['role'] ?? 'Guest')); ?></span>
 <i class="fa-solid fa-chevron-right text-[10px]"></i>
 <span class="text-gray-900"><?php echo $title ?? 'Overview'; ?></span>
 </div>
 </div>
 </div>

 <div class="flex items-center gap-2 sm:gap-3">
 <!-- User Profile (Static) -->
 <div class="flex items-center gap-3 p-1">
 <div class="hidden sm:block text-right">
 <p class="text-[11px] font-black text-gray-900 leading-none mb-0.5"><?php echo $_SESSION['user_name']; ?></p>
 <p class="text-[9px] font-bold text-emerald-500 uppercase tracking-widest">Online</p>
 </div>
 <div class="h-9 w-9 <?php echo $theme['bg']; ?> rounded-xl flex items-center justify-center text-white overflow-hidden">
 <?php if(!empty($siteSettings['institute_logo'])): ?>
 <img src="<?php echo url($siteSettings['institute_logo']); ?>" class="h-full w-full object-cover">
 <?php else: ?>
 <i class="fa-solid fa-user-tie text-sm"></i>
 <?php endif; ?>
 </div>
 </div>
 </div>
</header>
