<div class="phone">
 
  <div class="menu">
    <div class="options">
      <div class="option selected">Главная</div>
      <div class="option">О нас</div>
      <div class="option">Услуги</div>
      <div class="option">Контакты</div>
    </div>
  </div>
  <svg class="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 400" height="400" width="220">
    <g class="top-bars" stroke-width="4">
      <path class="bar bar1" d="M 178,20 H 202" />
      <path class="bar bar2" d="M 178,29 H 202" />
    </g>
  </svg>
  <div class="menu-click-area" onclick="document.querySelector('.phone').classList.toggle('active')"></div>
</div>

body {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 100vh;
  justify-content: center;
}
.phone {
  background-color: #fff;
  border: 5px solid black;
  border-radius: 25px;
  box-shadow: 0 0.9px 2.2px rgba(0, 0, 0, 0.039),
    0 2.2px 5.3px rgba(0, 0, 0, 0.048), 0 4.1px 10px rgba(0, 0, 0, 0.052),
    0 7.4px 17.9px rgba(0, 0, 0, 0.057), 0 13.8px 33.4px rgba(0, 0, 0, 0.067),
    0 33px 80px rgba(0, 0, 0, 0.11);
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 220px;
}
.image {
  position: absolute;
}
.menu {
  align-items: center;
  background-color: #303235;
  clip-path: polygon(81.05% 9.1%, 92% 9.1%, 92% 10.1%, 81.05% 10.1%);
  color: #f2f2f2;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 28px;
  height: 100%;
  position: absolute;
  top: 0;
  transition: clip-path 400ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.active .menu {
  background-color: #303235;
  clip-path: polygon(101% -1%, 101% 101%, -1% 101%, -1% -1%);
}
.options {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 60px;
  transform: scale(0.8);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.option {
  cursor: pointer;
  margin: 8px 0;
}
.option.selected {
  color: #a02f56;
}
.active .options {
  transform: scale(1);
}
.x {
  pointer-events: none;
  position: absolute;
  top: 0;
}
.top-bars {
  stroke: #303235;
  transition: stroke 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.active .top-bars {
  stroke: #f2f2f2;
}
.bar {
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bar1 {
  transform-origin: 190px 20.5px;
}
.bar2 {
  transform-origin: 190px 28.5px;
}
.active .bar1 {
  transform: translateY(8.6px) rotate(45deg);
}
.active .bar2 {
  transform: rotate(-45deg);
}
.menu-click-area {
  cursor: pointer;
  height: 40px;
  opacity: 0.3;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
}