<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <symbol id="twitter" viewBox="0 0 512 512">
    <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"></path>
  </symbol>
  <symbol id="codepen" viewBox="0 0 512 512">
    <path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"></path>
  </symbol>
  <symbol id="dribbble" viewBox="0 0 512 512">
    <path d="M256 68.4C152.4 68.4 68.4 152.4 68.4 256c0 103.6 84 187.6 187.6 187.6S443.6 359.6 443.6 256C443.6 152.4 359.6 68.4 256 68.4zM410.6 247.3c-40.3-6.6-77.3-7-111-1.1 -3.8-8.8-7.8-17.6-12-26.3 36.1-15.6 65.1-36.9 86.7-63.8C395.4 181 408.6 212.6 410.6 247.3zM350.5 133.4c-18.8 24.3-44.8 43.5-78 57.5 -15.9-29.1-34-57.5-54.5-85 12.2-3.1 24.9-4.9 38-4.9C291.6 101 324.3 113.2 350.5 133.4zM186.1 117.9c20.8 27.2 39.3 55.3 55.3 84.1 -38 11.2-83.4 16.9-135.8 17.3C116.4 175 146.3 138.1 186.1 117.9zM101 256c0-1.3 0.2-2.7 0.2-4 60.2-0.1 112.1-7 155.6-20.7 3.6 7.4 7.1 14.9 10.5 22.4 -52.8 16.5-96.4 50.4-130.3 101.3C114.5 328.2 101 293.6 101 256zM160.9 378.1c30.8-48.3 70.1-79.7 118.8-94.2 14.5 37.8 25.2 76.8 31.9 116.6 -17.3 6.7-36 10.5-55.6 10.5C220.1 411 187.2 398.6 160.9 378.1zM342 384.8c-6.9-36.8-16.9-72.8-30-107.8 29.3-4.1 61.6-3.1 96.9 3.1C402.1 323.6 377.2 361.3 342 384.8z"></path>
  </symbol>
</svg>

<div class="content">
  <div class="header">
    <div class="header__topBar"> </div>
    <div class="header__botBar"> </div>
  </div>
  <div class="content__items--wrap">
    <div class="content__items">
      <div class="item"> </div>
      <div class="item"> </div>
      <div class="item"> </div>
      <div class="item"> </div>
      <div class="item"> </div>
      <div class="item"> </div>
    </div>
    <div class="content__menu">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
        <circle class="crc-bg" cx="320" cy="320" r="100" fill="#fff"></circle>
        <circle class="crc-arc" cx="320" cy="320" r="150" fill="none" visibility="hidden"
                stroke-width="200" stroke="#E81B59"
                stroke-dasharray="10, 350" stroke-dashoffset="-230"
        ></circle>

        <a class="svg__link" target="_blank" xlink:href="https://codepen.io/mudrenok/">
          <use class="link-cdpn" xlink:href="#codepen" width="50" height="50" x="300" y="300" fill="#21264b"></use>
        </a>
        <a class="svg__link" target="_blank" xlink:href="https://dribbble.com/shots/3377940-Home-Budget-App-Interactions">
          <use class="link-drbl" xlink:href="#dribbble" width="50" height="50" x="300" y="300" fill="#fff"></use>
        </a>
        <a class="svg__link" target="_blank" xlink:href="https://twitter.com/AntonMudrenok">
          <use class="link-twtr" xlink:href="#twitter" width="50" height="50" x="300" y="300" fill="#21264b"></use>
        </a>

        <radialGradient id="grd">
          <stop offset="0" style="stop-color:rgba(0,0,0, 0)"> </stop>
          <stop offset="0.85" style="stop-color:rgba(0,0,0, 0.85)"> </stop>
          <stop offset="1" style="stop-color:rgba(0,0,0, 0)"> </stop>
        </radialGradient>
        <circle class="crc-sd" cx="320" cy="320" r="105" fill=url(#grd)></circle>
        <circle class="crc-sm" cx="320" cy="320" r="100" fill="#fff"></circle>

        <g class="burger">
          <line class="brgr-top"
                stroke-width="5.5" stroke="#21264b" stroke-linecap="round"
                x1="270" y1="270"
                x2="296" y2="270"
          ></line>
          <line class="brgr-mid"
                stroke-width="5.5" stroke="#21264b" stroke-linecap="round"
                x1="270" y1="282"
                x2="296" y2="282"
          ></line>
          <line class="brgr-bot"
                stroke-width="5.5" stroke="#21264b" stroke-linecap="round"
                x1="270" y1="294"
                x2="296" y2="294"
          ></line>
        </g>
      </svg>
    </div>
  </div>
</div>

@mixin flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-bottom-center() {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

$to-mobile: 520px;
$item-h: 12rem;
$gutter: $item-h / 10;
$menu-size: 36rem;

$clr-bg: #21264b;
$clr-item: #28305a;

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
  @include flex-center();
  
  background-color: #1c86cf;
  font-size: 62.5%;
  font-family: Helvetica, sans-serif;
  
  @media screen and (max-width: $to-mobile) {
    width: 100%;
    overflow-x: hidden;
    font-size: 50%;
  }
}

.content {
  position: relative;
  width: 50vw;
  min-width: 50rem;
  max-width: 70rem;
  max-height: 70rem;
  min-height: 55rem;
  height: 90vh;
  
  box-shadow: 0 0 4rem rgba(0,0,0,1);
  background-color: $clr-bg;
  
  @media screen and (max-width: $to-mobile) {
    width: 100%;
    min-width: 30rem;
    min-height: 100vh;
    max-height: 100vh;
  }
  
  &__items--wrap {
    position: relative;
    width: 100%;
    height: calc(100% - 25rem);
    overflow: hidden;
  }
  
  &__items {
    overflow-y: auto;
    height: 100%;
    width: calc(100% + 17px);
  }
  
  &__menu {
    position: absolute;
    right: 0; bottom: 0;

    width: $menu-size;
    height: $menu-size;
    pointer-events: none;
  }
}

.header {
  position: relative;
  height: 25rem;
  
  @include flex-center();
  flex-direction: column;
  
  &__topBar {
    width: 70%;
    height: 7.6rem;
    border-radius: 3.8rem;
    margin-bottom: $gutter * 2;
    background-image: linear-gradient(to bottom, #fff 0%, #e5f1fe 100%);
  }
  
  &__botBar {
    width: 50%;
    height: 6rem;
    border-radius: 3rem;
    background-color: #f34a33;
  }
  
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.2rem;
    background-image: linear-gradient(to right, #202747 0%,#28345e 50%,#202747 100%);
  }
}

.item {
  width: 95%;
  height: $item-h;
  margin: $gutter 0 $gutter 0;
  border-radius: 0 $item-h/2 $item-h/2 0;
  background-color: $clr-item;
}

.crc-sm, .svg__link {
  pointer-events: auto;
}

const qs = document.querySelector.bind(document);

const menuParts = {
  crcSm: qs(".crc-sm"),
  crcBg: qs(".crc-bg"),
  crcArc: qs(".crc-arc"),
  crcSd: qs(".crc-sd"),
  
  brgr: qs(".burger"),
  brgrTop: qs(".brgr-top"),
  brgrMid: qs(".brgr-mid"),
  brgrBot: qs(".brgr-bot"),
  
  linkDrbl: qs(".link-drbl"),
  linkCdpn: qs(".link-cdpn"),
  linkTwtr: qs(".link-twtr"),
  
  colBg: "#21264b",
};

(() => {
  TweenMax.set(menuParts.crcArc, {
    transformOrigin: "50% 50%",
    x: 120,
    y: 120,
    visibility: "visible"
  });
  TweenMax.set([
    menuParts.crcBg, menuParts.crcSm, menuParts.crcArc, menuParts.crcSd,
    menuParts.brgrTop, menuParts.brgrMid, menuParts.brgrBot
  ], {transformOrigin: "50% 50%"});
  //TweenMax.globalTimeScale(0.5);
})();

const menuOn = (onComplete, tl = new TimelineMax()) => {
  const brgrShft = 10;
  const brgrRt = 12;
  tl
    .to(menuParts.crcBg, 1.2, {
      scale: 2.5,
      ease: Elastic.easeOut.config(1.2, 0.5),
    }, 0)
    .to(menuParts.crcSm, 0.8, {
      scale: 1.3,
      ease: Elastic.easeOut.config(5, 1),
    }, 0.1)
    .to(menuParts.crcSd, 0.8, {
      scale: 1.3,
      ease: Elastic.easeOut.config(5, 1),
    }, 0.1)
    .to(menuParts.crcSm, 0.6, {
      ease: Power4.easeOut,
      fill: menuParts.colBg
    }, 0.1)
    .to(menuParts.brgr, 0.3, {
      x: -brgrShft,
      y: -brgrShft
    }, 0.2)
    .to(menuParts.brgrTop, 0.2, {
      y: brgrRt,
    }, 0.1)
    .to(menuParts.brgrBot, 0.2, {
      y: -brgrRt,
    }, 0.1)
    .to(menuParts.brgrTop, 0.4, {
      rotation: 45,
      stroke: "#fff",
    }, 0.1)
    .to(menuParts.brgrMid, 0.4, {
      rotation: 45,
      stroke: "rgba(255,255,255,0)",
    }, 0.1)
    .to(menuParts.brgrBot, 0.4, {
      rotation: -45,
      stroke: "#fff"
    }, 0.1)
    .to(menuParts.crcArc, 0.4, {
      x: 0,
      y: 0,
      ease: Power3.easeOut
    }, 0.2)
    .to(menuParts.crcArc, 0.3, {
      strokeDasharray: "85, 275",
      strokeDashoffset: "-186",
    }, 0.6)
    .to(menuParts.linkCdpn, 0.25, {
      x: -190,
      y: -40,
      ease: Power1.easeOut
    }, "-=0.75")
    .to(menuParts.linkDrbl, 0.25, {
      x: -138,
      y: -138,
      ease: Power1.easeOut
    }, "-=0.65")
    .to(menuParts.linkTwtr, 0.25, {
      x: -40,
      y: -190,
      ease: Power1.easeOut
    }, "-=0.55")
    .set(menuParts.brgrBot, { onComplete })
    .pause();
  return tl;
};

const menuOff = (onComplete, tl = new TimelineMax()) => {
  tl
    .to(menuParts.linkTwtr, 0.25, {
      x: 0,
      y: 0,
      ease: Power2.easeIn
    })
    .to(menuParts.linkDrbl, 0.25, {
      x: 0,
      y: 0,
      ease: Power2.easeIn
    }, "-=0.1")
    .to(menuParts.linkCdpn, 0.25, {
      x: 0,
      y: 0,
      ease: Power2.easeIn
    }, "-=0.1")
    .to(menuParts.crcBg, 0.55, {
      scale: 1,
      ease: Back.easeIn.config(3)
    }, 0.05)
    .to(menuParts.crcSm, 0.45, {
      fill: "#fff",
      ease: Power4.easeIn,
    }, 0.15)
    .to(menuParts.crcSm, 0.45, {
      scale: 1,
      ease: Back.easeIn.config(3)
    }, 0.15)
    .to(menuParts.crcSd, 0.45, {
      scale: 1,
      ease: Back.easeIn.config(3)
    }, 0.15)
    .to(menuParts.crcArc, 0.4, {
      strokeDasharray: "0, 359",
      strokeDashoffset: "-240",
    }, 0.1)
    .set(menuParts.crcArc, {
      strokeDasharray: "10, 350",
      strokeDashoffset: "-230",
      x: 120,
      y: 120
    }, 0.51)
    .to(menuParts.brgr, 0.4, {
      x: 0,
      y: 0,
      ease: Power1.easeIn
    }, 0.2)
    .to(menuParts.brgrTop, 0.3, {
      rotation: 0,
      stroke: menuParts.colBg,
      ease: Power1.easeIn
    }, 0.2)
    .to(menuParts.brgrMid, 0.3, {
      rotation: 0,
      stroke: menuParts.colBg,
      ease: Power1.easeIn
    }, 0.2)
    .to(menuParts.brgrBot, 0.3, {
      rotation: 0,
      stroke: menuParts.colBg,
      ease: Power1.easeIn
    }, 0.2)
    .to(menuParts.brgrTop, 0.1, {
      y: 0
    }, 0.5)
    .to(menuParts.brgrBot, 0.1, {
      y: 0
    }, 0.5)
    .set(menuParts.brgrBot, { onComplete })
    .pause();
  return tl;
};

const toggle = () => {
  let on = false;
  let time = true;
  const onComplete = () => { time = true; };
  const tlOff = menuOff(onComplete);
  const tlOn = menuOn(onComplete);
  
  return function (e) {
    if (time) {
      time = false;
      on ? tlOff.play(0) : tlOn.play(0);
      on = !on;
    }
  }
};

menuParts.crcSm.addEventListener("click", toggle());