<app-header></app-header>
<app-side-bar [backgroundColor]="'#7879F1'"></app-side-bar>
<div class="container">
  <div class="row p-1 col-12 ">
    <h2 class="titre">Dashboard</h2>
    <div class="row ">
      <h3 >Bienvenue {{ conectedUser.prenom }} !</h3>
    </div>

    <div class="row col-12">

      <div class="col-5  d-flex flex-column align-items-start">
        <div class="d-flex justify-content-center w-100 my-2" id="boxThree">
          <app-meteo></app-meteo>
        </div>
        <div class="d-flex justify-content-center w-100 my-2">
          <app-humeur></app-humeur>
        </div>
      </div>

      <div class=" col-7" id="boxTwo">
        <app-calendrier class="w-100 h-100">A venir</app-calendrier>
      </div>

    </div>

      <div class="row d-flex flex-wrap my-2 p-1">
        <ul class="list-inline">
          <li class="list-inline-item" *ngFor="let membreData of listMembres">
            <app-card-avatar class="avatar" [membre]="membreData"> </app-card-avatar>
          </li>
        </ul>
      </div>

  </div>
</div>

<app-footer></app-footer>
