<div class="drawer-navbar">
  <div class="content">
    <div class="menu">Menu</div>
    <div class="bars" onclick='DrawerNavBar()'>
      <div class="open">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
      <div class="close">
        &#10006;
      </div>
    </div>
    <div class="container"></div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drawer-navbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  background: #A020F0;
  border-radius: 0 0 100% 0;
  box-shadow: 5px 0 30px black;
}

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

.menu {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, -50%);
  font: bold 2rem Ubuntu, sans-serif;
  color: white;
  opacity: 0;
}

.bars {
  position: absolute;
  left: 1%;
  top: 1%;
}

.open {
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 1%;
  top: 1%;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 100%;
  cursor: pointer;
}

.close {
  width: 45px;
  height: 45px;
  font: 30px Ubuntu, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 1%;
  top: 1%;
  border-radius: 100%;
  transform: scale(0);
  cursor: pointer;
}

.bar {
  width: 30px;
  height: 4px;
  background: white;
  border-radius: 100px;
}

.container {
  width: 100%;
  height: 50%;
  display: none;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.buttons {
  width: 80%;
  height: 20%;
  background: transparent;
  color: white;
  font: bold 1.5rem Ubuntu, sans-serif;
  border: 3px white solid;
  border-radius: 3px;
  transform: translateX(-30%);
  opacity: 0;
  cursor: pointer;
  transition: all 500ms ease-in-out;
}

.buttons:after {
  content: '';
  width: 0%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: white;
  transition: inherit;
  z-index: -1;
}

.buttons:hover {
  color: #A020F0;
  box-shadow: 5px 5px 5px #8B008B;
}

.buttons:hover:after {
  width: 100%;
}

@media screen and (max-width: 900px) {
  .menu {
    font-size: 1.5rem;
  }
}
const drawerNavBar = document.querySelector('.drawer-navbar');
const bars = document.querySelector('.bars');
const open = document.querySelector('.open');
const close = document.querySelector('.close');
const container = document.querySelector('.container');
const menu = document.querySelector('.menu');
let isDrawerNavBar = false;

(() => {
  const container = document.querySelector('.container');
  const buttonsOptions = [
    {
      text: 'Button 1'
    },
    {
      text: 'Button 2'
    },
    {
      text: 'Button 3'
    },
    {
      text: 'Button 4'
    }
  ];
  
  buttonsOptions.map(({ text }, index) => {
    const button = document.createElement('button');
    button.classList.add('buttons');
    button.innerText = text;
    container.appendChild(button);
  });
})();

const animation = ({ element, data, duration, delay = 0, easing = 'linear', fill = 'both', finish = () => {} }) => {
  element.animate([ data ], {
    duration,
    delay,
    easing,
    fill
  }).addEventListener('finish', finish);
};

const AnimationOpenNavBar = () => {
  const buttons = document.querySelectorAll('.buttons');
  const width = (window.innerWidth > 1024) ? 30 : (window.innerWidth < 1024 && window.innerWidth > 800) ? 40 : 50;
  isDrawerNavBar = true;
  container.style.display = 'flex';
  animation({ 
    element: drawerNavBar, 
    data: { width: `${width}%`, height: '100vh', borderRadius: '0' }, 
    duration: 500
  });
  animation({ 
    element: menu, 
    data: { opacity: '1' }, 
    duration: 500, 
    delay: 400
  });
  animation({ 
    element: bars, 
    data: { left: '80%', transform: 'rotateX(30deg)' }, 
    duration: 500
  });
  animation({ 
    element: open, 
    data: { transform: 'scale(0)' }, 
    duration: 300, 
    finish: () => {
      animation({ 
        element: close, 
        data: { transform: 'scale(1)' }, 
        duration: 300
      });
    }
  });
  Array.from(buttons).map((button, index) => setTimeout(() => animation({
      element: button,
      data: { transform: 'translateX(0)', opacity: '1' },
      duration: 500,
      delay: ((index + 1) * 200)
    }), 500));
};

const AnimationCloseNavBar = () => {
  const buttons = document.querySelectorAll('.buttons');  
  isDrawerNavBar = false;
  setTimeout(() => container.style.display = 'none', 900);
  Array.from(buttons).reverse().map((button, index) => animation({
    element: button,
    data: { transform: 'translateX(-30%)', opacity: '0' },
    duration: 500,
    delay: ((index + 1) * 100)
  }));
  animation({ 
    element: drawerNavBar, 
    data: { width: '60px', height: '60px', borderRadius: '0 0 100% 0' }, 
    duration: 500,
    delay: 700
  });
  animation({ 
    element: menu, 
    data: { opacity: '0' }, 
    duration: 200, 
    delay: 800
  });
  animation({
    element: bars,
    data: { left: '1%' },
    duration: 500,
    delay: 800
  });
  animation({
    element: close,
    data: { transform: 'scale(0)' },
    duration: 300,
    delay: 800,
    finish: () => {
      animation({
        element: open,
        data: { transform: 'scale(1)' },
        duration: 300
      });
    }
  });
};

const DrawerNavBar = () => {
  if(!isDrawerNavBar) {
    AnimationOpenNavBar()
  } else {
    AnimationCloseNavBar();
  }
};

document.querySelector('body').addEventListener('click', (e) => {
  if(!e.target.closest('.drawer-navbar') && isDrawerNavBar) {
    AnimationCloseNavBar();
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.