style.css

* {
    padding: 0;
    margin: 0;
}

header {
    display: flex;
    flex-direction: column;
    padding: 14px;

    .search-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 14px;

        .profile-section {
            display: flex;
            flex-direction: row;
            gap: 15px;

            .profile {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 15px;
                
                .profile-data {
                    display: flex;
                    flex-direction: column;
    
                    .profile-name {
                        font-size: 14px;
                        font-weight: bold;
                    }
    
                    .profile-role {
                        font-size: 7px;
                        font-weight: lighter;
                    }
                }
            }
        }
    }   
    
    .menu {
        display: flex;
        flex-direction: row;

        .menu-list {
            display: flex;
            flex-direction: row;
            gap: 30px;
        }
    }
}