lms-app/src/app/profile/profile.component.html

<div class="page">
    <header class="nav-header">
        <button (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
        </button>

        <button class="settings-button" (click)="back()">
            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/settings.svg"></svg-icon>
        </button>
    </header>

    <section class="upfold">
        <div>
            <figure>
                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
            </figure>
            <h5> Dwayne The Rock </h5>
            <p> 3000 XP </p>
        </div>
    </section>

    <section class="segment-buttons">
        <button (click)="selectedSegment='badges'"
        [ngClass]="{'active': selectedSegment === 'badges'}"> Badges </button>
        <button (click)="selectedSegment='friends'"
        [ngClass]="{'active': selectedSegment === 'friends'}"> Friends </button>
        <button (click)="selectedSegment='scores'"
        [ngClass]="{'active': selectedSegment === 'scores'}"> Scores </button>
    </section>

    <div class="segment-holder">
        <ul class="badge-list" *ngIf="selectedSegment === 'badges'">
            <li>
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
                <div class="content">
                    <label> You're a Star! </label>
                    <p> 2 Teachers starred your profile </p>
                </div>
            </li>

            <li>
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
                <div class="content">
                    <label> You're a the One! </label>
                    <p> Topper of 5 Tests </p>
                </div>
            </li>

            <li>
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/star-medal.svg"></svg-icon>
                <div class="content">
                    <label> You're a Star! </label>
                    <p> 2 Teachers starred your profile </p>
                </div>
            </li>

            <li>
                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/number-1-medal.svg"></svg-icon>
                <div class="content">
                    <label> You're a the One! </label>
                    <p> Topper of 5 Tests </p>
                </div>
            </li>
        </ul>


        <ul class="friend-list" *ngIf="selectedSegment === 'friends'">
            <li>
                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                <div class="content">
                    <label> Neil Hudson </label>
                    <p> 1000XP </p>
                </div>
            </li>

            <li>
                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                <div class="content">
                    <label> Katty Perry </label>
                    <p> 1XP </p>
                </div>
            </li>

            <li>
                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                <div class="content">
                    <label> Selena Gomez </label>
                    <p> 10XP </p>
                </div>
            </li>

            <li>
                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                <div class="content">
                    <label> Matt Le Blanc </label>
                    <p> -19XP </p>
                </div>
            </li>
        </ul>
    </div>
</div>