SOURCE

const phoneOptions = document.querySelector(".phone-options");
const barIcon = document.querySelector(".bar-icon");
const closeIcon = document.querySelector(".close-icon");

const toggleOptions = () => {
  closeIcon.classList.toggle("show-close-icon");
  closeIcon.classList.toggle("hide-close-icon");
  barIcon.classList.toggle("show-bar-icon");
  barIcon.classList.toggle("hide-bar-icon");
  phoneOptions.classList.toggle("show-options");
  phoneOptions.classList.toggle("hide-options");
};

<div class="flex-container-center container">
  <div class="circle-1"></div>
  <div class="circle-2"></div>
  <div class="circle-3"></div>
  <div class="circle-4"></div>
  <div class="phone">
    <div class="phone-bezel">
      <div class="phone-screen flex-container-center">
        <span class="icon" onclick="toggleOptions()"><i class="fas fa-bars"></i></span>
        <span class="text">Hi.</span>
      </div>
      <div class="phone-options flex-container-center hide-options">
        <span class="close-icon hide-close-icon" onclick="toggleOptions()"><i class="fas fa-times"></i></span>
        <span class="bar-icon hide-bar-icon"><i class="fas fa-bars"></i></span>
      </div>
    </div>
  </div>
</div>

$dark-grey: #bfc9d5;
$dark-purple: #404076;
$light-grey: #efedee;
$light-white: #e8e8e8;
$white: #fff;

$circle-1-width: 400px;
$circle-1-height: 400px;
$circle-2-width: 325px;
$circle-2-height: 325px;
$circle-3-width: 80px;
$circle-3-height: 80px;
$circle-4-width: 150px;
$circle-4-height: 150px;

$phone-width: 200px;
$phone-height: 325px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
.container {
  height: 100vh;
}
.flex-container-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle-1 {
  position: fixed;
  left: -270px;
  top: -30px;
  width: $circle-1-width;
  height: $circle-1-height;
  background-color: $dark-purple;
  border-radius: 50%;
  opacity: 0.3;
}
.circle-2 {
  position: fixed;
  left: -225px;
  top: 280px;
  width: $circle-2-width;
  height: $circle-2-height;
  background-color: $light-grey;
  border-radius: 50%;
  opacity: 0.7;
}
.circle-3 {
  position: fixed;
  left: 50px;
  top: 350px;
  width: $circle-3-width;
  height: $circle-3-height;
  background-color: $dark-purple;
  border-radius: 50%;
  opacity: 0.4;
}
.circle-4 {
  position: fixed;
  left: -20px;
  bottom: -60px;
  width: $circle-4-width;
  height: $circle-4-height;
  background-color: $dark-purple;
  border-radius: 50%;
  opacity: 0.4;
}
.phone {
  position: relative;
  width: $phone-width;
  height: $phone-height;
  border: 3px solid $dark-purple;
  border-radius: 20px;
  .phone-bezel {
    width: calc(#{$phone-width} - 6px);
    height: calc(#{$phone-height} - 6px);
    border: 8px solid $light-white;
    border-radius: 17px;
  }
  .phone-screen {
    position: relative;
    width: calc(#{$phone-width} - 21px);
    height: calc(#{$phone-height} - 21px);
    border-radius: 8px;
    background-color: $dark-purple;
    .icon {
      position: absolute;
      top: 20px;
      left: 20px;
      color: $white;
      font-size: 16px;
      cursor: pointer;
    }
    .text {
      font-size: 40px;
      color: $white;
    }
  }
  .phone-options {
    position: absolute;
    top: 8px;
    left: 8px;
    border-radius: 8px;
    background-color: $white;
    &.show-options {
      visibility: visible;
      width: calc(#{$phone-width} - 21px);
      height: calc(#{$phone-height} - 21px);
      transition-duration: 0.5s;
    }
    &.hide-options {
      visibility: hidden;
      width: 0px;
      height: 0px;
      transition-duration: 0.5s;
    }
    .close-icon {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 16px;
      cursor: pointer;
      opacity: 0.6;
      &.show-close-icon {
        visibility: visible;
      }
      &.hide-close-icon {
        font-size: 0;
        visibility: none;
      }
    }
    .bar-icon {
      color: $light-white;
      &.show-bar-icon {
        font-size: 100px;
        transition-duration: 0.8s;
      }
      &.hide-bar-icon {
        font-size: 0px;
        transition-duration: 0.5s;
      }
    }
  }
}