Выезжающая страница с право на лево

(function() {

  'use strict';

  const menuLink = document.querySelector('.menu__link');
  const page = document.querySelector('.page');

  function showPage(e) {
    e.preventDefault();
    page.classList.toggle('page--active');
  }
  menuLink.addEventListener('click', showPage);

})();

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

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background-color: #000;
  display: flex;
  flex-direction: column;
}

.menu__link {
  display: block;
  padding: .5rem 1rem;
  color: #fff;
}

.header {
  background-color: #00f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 7vw;
}

.page {
  position: fixed;
  top: 0;
  left: 100px;
  background-color: #f00;
  width: calc(100% - 100px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: 7vw;
  transform: translateX(100%);
  transition: transform .3s ease;
}

.page--active {
  transform: translateX(0);
}

<nav class="menu">
  <a href="#" class="menu__link">Link</a>
</nav>

<header class="header">Header</header>

<div class="page">
  page
</div>