Показать поповер!

Глобально страница состоит из трех секций: шапка, дропдаун и обертка на все остальное. Это, соответствено .page__header, .page__dropdown и .page__wrap. Так вот шапки видна вообще всегда, она фиксированная и залипла сверху. ПОД шапкой могут быть либо .page__dropdown - это навигация и меню пользователя, либо .page__wrap - обертка на все остальное. Дропдаун и врап - это взаимоисключающие вещи. Т.е. когда мы ходим по страницам сайта мы всегда видим врап, но как только мы захотели отрыть дропдаун, врап тут же исчезает.

Если прямо сейчас нажать на кнопку "Бургер", то сработает клик по примиксованному к ней .page__navigate и на всю .page проставится класс .page_drop, который все это разруливает. Он скроет врап сайта и покажет выпадайку.

Идем во врап, там у нас непосредственна содержимое страницы. Там могут быть три структурных элемента:
.page__popover - аналог поповеров десктопного сайта, то что там выезжает. Формы авторизаций, настройки и т.д. Работает аналогично десктопной версии. Берем поповер, например .page__popover_id_demo на этой странице и добавляем ему класс .page__popover_visible. Поповер становится видимым, а все, что ниже скрывается.
Показать поповер!
.page__sidebar и .page__body - это обычные сайдбары тельца страницы. Тут нет никакой динамики, просто классы для оформления. Могу быть как по отдельности, так и вместе.

.page__popover и .page__body могут быть одновременно, идут друг за другом. Например на страницах профиля. Там сначала идет черный сайдбар (суммарная инфа), а ниже уже нормальное тело с плитками.

Позиция

В моменты, когда мы открываем/закрываем дропдаун или поповеры, мы делаем display: none на тела. Контент исчезает и браузер забывает до куда страница была прокручена. Имеет смысл при открытии дропдауна или поповера запоминать это вручную и при закрытии возвращать.