Хотел попробовать сделать меню с помощью flexbox которое будет выдвигаться/скрываться по нажатию на кнопку.
Пытался, но что то не совсем получалось. Как сверстать без flexbox, я знал, просто делал меню фиксированным, в высоту viewport, указывал ширину и отрицательный margin. А контент блоку указывал padding-left равный ширине меню + необходимый внутренний отступ. Потом делал кнопку справа (не знаю как сделать чтобы кнопка смещалась вместе с меню при открытии) В общем раньше вот так вот пробовал сверстать и что то получалось. Но это ясно, что все через одно место.
Сейчас начал привыкать к flexbox и пробовать что нибудь верстать. сделал flex контейнер, в него поместил меню и контент часть. Получилось 2 колонки. Потом нагуглил что при position absolute колонка уходит вниз, а все остальное растягивается при flex-grow 1. В общем потом добавил transform translate на контент часть. И при клике то убирал то добавлял смещение.
В общем как то, да получилось что то. Вроде нормально работает.
[Вопросы] Но вот правильно ли сверстано? или можно как то лучше сделать?
Посмотрите код пожалуйста, может что то не так, прокомментируйте ошибки...все такие хочется научиться проф. верстать и использовать лучшие практики.
Вот ссылка на демку -
codepen.io/evg_/pen/xOdKbp?editors=1100 
Простой
