<div class="flex flex-col justify-center h-[58px] bg-color-F9 dark:bg-color-3A border-b border-gray-200 dark:border-gray-700 px-4 skeleton-header-container">
    <div class="ms-10 xl:ms-0 flex items-center justify-between">
        <div class="flex items-center gap-2 animate-pulse">
            <!-- Avatar Skeleton -->
            <div class="rounded-full w-8 h-8 bg-gray-300 dark:bg-gray-600"></div>
            
            <!-- Name Skeleton -->
            <div class="h-5 w-32 bg-gray-300 dark:bg-gray-600 rounded"></div>
        </div>
        
        <!-- Menu Button Skeleton -->
        <div class="2xl:hidden shrink-0 h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded-full animate-pulse"></div>
    </div>
</div>