<div class="phone">
  <div class="container" id="js_container">
    <div class="content">

      <h1>Mock</h1>
      <h2>Mock app does nothing for you, it does not exist and is yellow..</h2>

      <button type="button" id="js_show-navigation">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
            </button>
    </div>
    <div class="menu">
      <h1>Menu</h1>

      <div class="button-container">
        <button type="button" id="js_hide-navigation">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
              </button>
      </div>
      <nav>
        <ul>
          <li><a href="#0">Home</a></li>
          <li><a href="#0">About</a></li>
          <li><a href="#0">Contact</a></li>
          <li><a href="#0">Dance</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto:400,500&display=swap');

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
html {
  height: 100%;
  min-height: 100%;
}

body {
  background: #e0e2ef;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  line-height: 1.45;
}

h1 {
  font-family: "Abril Fatface", cursive;
  font-size: 5rem;
}

h2 {
  font-size: 1rem;
}

.phone {
  background: black;
  border-radius: 40px;
  border: 10px solid #21262b;
  box-shadow: 0 0 20px rgba(black, 0.4);
  height: 600px;
  overflow: hidden;
  perspective: 600px;
  position: relative;
  width: 310px;

  &::before {
    background: #21262b;
    content: "";
    height: 20px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 50%;
    z-index: 2;
    border-radius: 0 0 15px 15px;
  }

  .container {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.75s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;

    &.--is-flipped {
      transform: rotateY(180deg);

      .menu button {
        transform: scale(1);
      }

      nav,
      h1 {
        opacity: 1;
        animation: animationFrames linear 1s;
        animation-iteration-count: 1;
        transform-origin: 50% 50%;

        @keyframes animationFrames {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }
      }
    }
  }

  .content,
  .menu {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    padding: 2em;
    display: flex;
    flex-direction: column;

    button {
      position: absolute;
      bottom: 2em;
      outline: none;
      right: 2em;
      border-radius: 100%;
      width: 5em;
      backface-visibility: hidden;
      height: 5em;
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items:center;
      justify-content: center;
      
      svg {
        display: block;
      }
    }
  }

  .content {
    background: #ffd10f;
  }

  .menu {
    background: #2e2ebc;
    transform: rotateY(180deg);

    * {
      backface-visibility: hidden;
    }

    button {
      transform: scale(0);
      transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition-delay: 0.8s;
        }

        h1 {
            color: white;
        }

    nav {
            opacity: 0;

            li a {
          font-size: 2rem;
                color: white;
            }
    }
  }
}

const container  = document.getElementById('js_container')
const showButton = document.getElementById('js_show-navigation')
const hideButton = document.getElementById('js_hide-navigation')

showButton.addEventListener('click', () => container.classList.add('--is-flipped'))
hideButton.addEventListener('click', () => container.classList.remove('--is-flipped'))