Не срабатывает меню, при нажатии на body

1. У вас событие установленно на блок page-wrapper, а не на body.
2. header перекрывает блок page-wrapper из за чего не срабатывает событие.
3. Задайте блоку page-wrapper z-index больше чем у header, но меньше чем у mobile-menu.

Так как надо закрыть меню (div#mobile-nav). Если нажали где-то на экране но не на нём, то можем написать простой обработчик.

document.body.addEventListener('click', function(e) {
  if (e.target.id !== 'mobile-nav') {
    ... // тут функция для закрытия меню
  }
})

Потому что у вас header на всю высоту блока.

min-height: 100vh;

Дайте нормальный размер вашему header-у чтобы он НЕ был над body и все будет работать