<header class="site-header">
  <button class="open-menu-button">
    <svg xmlns="http://www.w3.org/2000/svg"   id="Layer_1" enable-background="new 0 0 512 512"  viewBox="0 0 512 512" >
      <title>Open menu</title>
      <path d="m464.883 64.267h-417.766c-25.98 0-47.117 21.136-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.013-21.137-47.149-47.117-47.149z"/>
      <path d="m464.883 208.867h-417.766c-25.98 0-47.117 21.136-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.013-21.137-47.149-47.117-47.149z"/>
      <path d="m464.883 353.467h-417.766c-25.98 0-47.117 21.137-47.117 47.149 0 25.98 21.137 47.117 47.117 47.117h417.766c25.98 0 47.117-21.137 47.117-47.117 0-26.012-21.137-47.149-47.117-47.149z"/>
    </svg>
  </button>
  <nav class="site-navigation">
    <button class="close-menu-button">
      <svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512.001 512.001" viewBox="0 0 512.001 512.001">
        <title>Close menu</title>
        <path fill="currentColor" d="m512.001 84.853-84.853-84.853-171.147 171.147-171.148-171.147-84.853 84.853 171.148 171.147-171.148 171.148 84.853 84.853 171.148-171.147 171.147 171.147 84.853-84.853-171.148-171.148z"/>
      </svg>
    </button>    
    <ul>
      <li>
        <a href="#">First Link</a>
      </li>
      <li>
        <a href="#">Second Link</a>
      </li>
      <li>
        <a href="#">Third Link</a>
      </li>      
    </ul>
  </nav>
</header>
<section class="page-content">
  <h1>Hello website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></p>
</section>

.site-header {
  display: flex;
  justify-content: flex-end;
  padding: 20px 40px;
}

.open-menu-button {
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: transparent;
  border: none;
}

.page-content {
  padding: 20px 40px;
  
  p {
    max-width: 600px;  
  }
}

.site-navigation {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center; 
  background: #58a;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  transform: translateX(100%);
  transition: transform ease 600ms;
  
  &.active {
    transform: translateX(0);    
  }
  
  ul {
    list-style: none;
  }
  
  li {
    margin: 20px 0;
  }
  
  a {
    font-size: 30px;
    font-weight: bold;
    color: white;
    text-decoration: none;

  }
}

.close-menu-button {
  position: absolute;
  top: 20px;
  right: 40px;
  width: 40px;
  height: 40px;
  padding: 10px;
  background-color: transparent;
  border: none;
  color: white;
}

const openMenuButton: HTMLButtonElement = document.querySelector('.open-menu-button');
const closeMenuButton: HTMLButtonElement = document.querySelector('.close-menu-button');
const siteNavigaton: HTMLElement = document.querySelector('.site-navigation');

const handleHamburgerButtonClick = () => {
  siteNavigaton.classList.add('active')
};

const handleCloseButtonClick = () => {
  siteNavigaton.classList.remove('active')
};

openMenuButton.addEventListener('click', handleHamburgerButtonClick);
closeMenuButton.addEventListener('click', handleCloseButtonClick);