Как сделать раскрывающееся на всю страницу меню?

$('.nav__icon').click(function() { 
  if ($('.main').is(':visible')) { 
    $('.main').slideUp('slow'); 
    $('.nav__icon').removeClass("active"); 
  } else { 
    $('.main').each(function(i) { 
      $(this).delay((i++) * 800).animate({ 
        height: "show" 
      }, 800); 
    }); 
    $('.nav__icon').addClass("active"); 
  } 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
.wrp { 
  display: block; 
  position: relative; 
  overflow: hidden; 
  margin: 0; 
  padding: 50px; 
  min-height: 1000px; 
  background-color: gray; 
  color: white; 
} 
 
h1 { 
  text-align: center; 
  margin: 0; 
  padding: 0 0 50px 0; 
} 
 
.main { 
  display: none; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  margin: 0; 
  padding: 100px 0 0 0; 
  opacity: 0.7; 
  background-color: black; 
  color: white; 
} 
 
ul, 
li { 
  list-style: none; 
  text-align: center; 
  text-transform: uppercase; 
} 
 
ul.main__list { 
  display: block; 
  position: relative; 
  overflow: hidden; 
  width: 100px; 
  margin: 0 auto; 
  border-bottom: 1px solid red; 
  padding-bottom: 10px; 
} 
 
.main__list li { 
  padding: 10px 0; 
} 
 
.main a { 
  color: white; 
  text-decoration: none; 
} 
 
.main a:hover { 
  color: red; 
  text-decoration: none; 
} 
 
ul.main__social { 
  display: block; 
  position: relative; 
  margin-top: 10px; 
} 
 
.main__social li { 
  display: inline-block; 
  width: 20px; 
  height: 20px; 
  margin: 5px 3px auto; 
  border-radius: 20px; 
  background-color: blue; 
} 
 
.main__social a { 
  display: block; 
  width: 20px; 
  height: 20px; 
} 
 
.nav__icon { 
  cursor: pointer; 
  position: absolute; 
  right: 100px; 
  top: 18px; 
  width: 40px; 
  height: 29px; 
  z-index: 99; 
  -webkit-transform: rotate(0deg); 
  -moz-transform: rotate(0deg); 
  -ms-transform: rotate(0deg); 
  -o-transform: rotate(0deg); 
  transform: rotate(0deg); 
  -webkit-transition: .5s ease-in-out; 
  -moz-transition: .5s ease-in-out; 
  -ms-transition: .5s ease-in-out; 
  -o-transition: .5s ease-in-out; 
  transition: .5s ease-in-out; 
} 
 
.nav__icon span { 
  display: block; 
  position: absolute; 
  height: 2px; 
  width: 100%; 
  background: #ffffff; 
  border-radius: 2px; 
  opacity: 1; 
  left: 0; 
  -webkit-transform: rotate(0deg); 
  -moz-transform: rotate(0deg); 
  -ms-transform: rotate(0deg); 
  -o-transform: rotate(0deg); 
  transform: rotate(0deg); 
  -webkit-transition: .25s ease-in-out; 
  -moz-transition: .25s ease-in-out; 
  -ms-transition: .25s ease-in-out; 
  -o-transition: .25s ease-in-out; 
  transition: .25s ease-in-out; 
} 
 
.nav__icon span:nth-child(1) { 
  top: 0px; 
} 
 
.nav__icon span:nth-child(2), 
.nav__icon span:nth-child(3) { 
  top: 10px; 
} 
 
.nav__icon span:nth-child(4) { 
  top: 20px; 
} 
 
.nav__icon.active span:nth-child(1) { 
  top: 10px; 
  width: 0%; 
  left: 50%; 
} 
 
.nav__icon.active span:nth-child(2) { 
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
} 
 
.nav__icon.active span:nth-child(3) { 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
} 
 
.nav__icon.active span:nth-child(4) { 
  top: 10px; 
  width: 0%; 
  left: 50%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="wrp"> 
  <h1>Заголовок</h1> 
  <p>Очень много текста</p> 
  <div id="main" class="main"> 
    <ul class="main__list"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Our works</a></li> 
      <li><a href="#">Contact</a></li> 
    </ul> 
    <ul class="main__social"> 
      <li> 
        <a href="#"></a> 
      </li> 
      <li> 
        <a href="#"></a> 
      </li> 
      <li> 
        <a href="#"></a> 
      </li> 
      <li> 
        <a href="#"></a> 
      </li> 
      <li> 
        <a href="#"></a> 
      </li> 
    </ul> 
  </div> 
</div> 
<div class="nav__icon"><span></span><span></span><span></span><span></span></div>