.menu-toggle
  .menu-icon
    svg(width="30" height="30" viewBox="0 0 24 24")
      path(d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z")
  .menu
    .menu-items
      .menu-item
        svg(width="40" height="40" viewBox="0 0 24 24")
          path(d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z")
      .menu-item
        svg(width="40" height="40" viewBox="0 0 24 24")
          path(d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20.54 13.5,20.27 13.5,20H9.5A2,2 0 0,0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0 0,0 10,3.5V4.18C7.13,4.86 5,7.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10M6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z")
      .menu-item
        svg(width="40" height="40" viewBox="0 0 24 24")
          path(d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z")
      .menu-item
        svg(width="40" height="40" viewBox="0 0 24 24")
          path(d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z")

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-toggle {
  color: white;
  cursor: pointer;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background: pink;
  position: relative;
}

.menu {
  color: white;
  height: 0px;
  width: 0px;
  border-radius: 50px;
  background: pink;
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  margin: 0 auto;
  opacity: 0;
  transition: width 0.1s, height 0.35s, opacity 0.25s;
}

.menu-icon {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu.open {
  opacity: 1;
  height: 100px;
  width: 600px;
  transition: width 0.35s, height 0.1s, opacity 0.3s;

  box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
  .menu-items {
    display: flex;
  }
}

.menu-items {
  height: 100%;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;

  .menu-item {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;

    &:hover {
      transform: scale(1.5);
    }
  }
}

svg {
  fill: currentColor;
}

$('.menu-toggle').click(function(){
  $('.menu').toggleClass('open');
});

$('.menu-item').click(function(e){
  e.stopPropagation();
});