header.html

    <div class="header">
        <div class="search-bar">
            <div class="logo-section">
                <img src="image/Logo_Đại_học_Bách_Khoa_Hà_Nội.svg" alt="University Logo" class="logo">
                <div style="display:flex; flex-direction: column; margin-right:16px;">
                    <span class="workspace">University</span>
                    <span class="separator">Workspace</span>
                </div>
                <i class="fa-solid fa-sort sort-icon"></i>
            </div>
            <div class="search-section">
                <input type="text" class="search-input" placeholder="Search for tasks, events ..">
            </div>
            <div class="notification-section">
                <img src="image/notification-badge.svg" alt="Notifications" class="notification-icon">
            </div>
        </div>
        <div class="account-section">
            <div style="display:flex; flex-direction: column;">
                <span class="account-name">John Carter</span>
                <span class="account-settings">Account settings</span>
            </div>
            <img src="image/user-logo.jpg" alt="Profile Picture" class="profile-picture">
        </div>
    </div>