<nav class="main-nav  main-nav--active">
      <button class="main-nav--toggle" type="button">Открыть меню</button>
      <div class="main-nav__wrapper">
        <ul class="main-nav__list">
          <li class="main-nav__item  main-nav__item--active"><a href="#">Главная</a></li>
          <li class="main-nav__item"><a href="#">Наши работы</a></li>
          <li class="main-nav__item"><a href="#">Записаться</a></li>
          <li class="main-nav__item"><a href="#">Контакты</a></li>
        </ul>
        <ul class="main-nav__user-list">
          <li class="main-nav__user-item"><a href="#" class="main-nav__user-login" title="Войти">Вход</a></li>
        </ul>
      </div>
    </nav>
	Подскажите пожалуйста как сверстать такое меню. Вот моя разметка.
 
	1. Меню в закрытом состоянии - Показана активная страница и кнопка меню. Как лучше сделать? я вот думаю добавить еще один блок выше навигации, который будет во всю ширину. Туда просто вписать страницу на которой находишься. 
 
	Кнопку спозиционировать относительно этого блока top 0 right 0 что бы она была в правом углу этого блока. 
 
	Меню также спозиционировать top 0 left 100% (скрытое состояние), но тогда overflow hidden придется задавать для body?? не совсем понимаю как реализовать блок при закрытом меню (верхняя часть скриншота) и как спрятать блок меню, что бы не было горизонтального скролла. 
 
	Объясните пожалуйста логику верстки этого блока. Спасибо