Шапка. Мобильная.

      <header class="header header_mobile">
    <div class="header__main">
        <div class="header__logotype">
            <a class="header__logotype-link">
                <img class="header__logotype-image" src="assets/img/logotype-mobile.svg" alt="">
            </a>
            <div class="header__logotype-subtitle">Подзаголовок</div>
        </div>
        <div class="header__phone">
            <a class="header__phone-link" href="tel:88003024545">Телефон</a>
        </div>
        <div class="header__menu">
            <a class="header__menu-link" href="javascript://" rel="nofollow">
                <span>Menu</span>
            </a>
            <div class="header__menu-wrapper">
                <div class="header__menu-inner">
                    <div class="header__menu-close"></div>
                    <div class="header__menu-content">
                        <ul class="header__main-menu header__main-menu_level-0">
                            <li class="header__main-menu-item">
                                <a class="header__main-menu-link" href="#"><span>Пункт 1</span></a>
                            </li>
                            <li class="header__main-menu-item header__main-menu-item_rolled">
                                <a class="header__main-menu-link" href="#">
                                    <span>
                                        Пункт 2 с подменю
                                        <span class="arrow">
                                            <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.65685 12.3141L7.31371 6.65723L1.65685 1.00037" stroke="#BCE6D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                                <div class="header__main-menu-wrapper header__main-menu-wrapper_level-1" style="display:none;">
                                    <ul class="header__main-menu header__main-menu_level-1">
                                        <li class="header__main-menu-item">
                                            <a class="header__main-menu-link" href="#">Пункт 1</a>
                                        </li>
                                        <li class="header__main-menu-item">
                                            <a class="header__main-menu-link" href="#">Пункт 2</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="header__main-menu-item">
                                <a class="header__main-menu-link" href="#"><span>Пункт 3</span></a>
                            </li>
                            <li class="header__main-menu-item header__main-menu-item_rolled">
                                <a class="header__main-menu-link" href="#">
                                    <span>
                                        Пункт 4 с подменю
                                        <span class="arrow">
                                            <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.65685 12.3141L7.31371 6.65723L1.65685 1.00037" stroke="#BCE6D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                                <div class="header__main-menu-wrapper header__main-menu-wrapper_level-1" style="display:none;">
                                    <ul class="header__main-menu header__main-menu_level-1">
                                        <li class="header__main-menu-item header__main-menu-item_rolled">
                                            <a class="header__main-menu-link" href="#">Пункт 1</a>
                                            <div class="header__main-menu-wrapper header__main-menu-wrapper_level-2" style="display: none; top: calc(124px);">
                                                <div class="header__main-menu-label">ЗАГОЛОВОК_ПОДМЕНЮ</div>
                                                <ul class="header__main-menu header__main-menu_level-2">
                                                    <li class="header__main-menu-item">
                                                        <a class="header__main-menu-link" href="#">Пункт 1</a>
                                                    </li>
                                                    <li class="header__main-menu-item">
                                                        <a class="header__main-menu-link" href="#">Пункт 2</a>
                                                    </li>
                                                </ul>
                                                <div class="header__main-menu-back">
                                                    <svg width="37" height="14" viewBox="0 0 37 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M6.65687 1.00037L1.00001 6.65723L6.65687 12.3141" stroke="#BCE6D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                        <path d="M2 7H36" stroke="#BCE6D8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    </svg>
                                                    <a class="header__main-menu-back-link" href="javascript://">Назад к ПРЕДЫДУЩЕМУ МЕНЮ</a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="header__main-menu-item">
                                            <a class="header__main-menu-link" href="#">Пункт 2</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="header__main-menu-item">
                                <a class="header__main-menu-link" href="#">Пункт 5</a>
                            </li>
                            <li class="header__main-menu-item">
                                <a class="header__main-menu-link" href="#">Пункт 6</a>
                            </li>
                        </ul>
                        <a href="/contacts" class="header__locations">
                            <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.60777 4.52378C8.17057 2.96098 10.2902 2.08301 12.5003 2.08301C14.7105 2.08301 16.8301 2.96098 18.3929 4.52378C19.9557 6.08659 20.8337 8.2062 20.8337 10.4163C20.8337 16.0413 13.542 22.3955 13.1774 22.6663C12.9887 22.8277 12.7486 22.9164 12.5003 22.9164C12.252 22.9164 12.0119 22.8277 11.8232 22.6663L11.8215 22.6648C11.4848 22.373 4.16699 16.0314 4.16699 10.4163C4.16699 8.2062 5.04497 6.08659 6.60777 4.52378ZM12.5 13C14.433 13 16 11.433 16 9.5C16 7.567 14.433 6 12.5 6C10.567 6 9 7.567 9 9.5C9 11.433 10.567 13 12.5 13Z" fill="#61C3A5"></path>
                            </svg>
                            Адреса и представительства <br> в России и Корее
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

    

      const HeaderMobile = function() {
    const HEADER = document.querySelector('.header_mobile');
    this.init = function() {
        HEADER.querySelectorAll('.header__main-menu-item_rolled').forEach(item => {
            item.querySelector('.header__main-menu-link').addEventListener('click', e => this.handlerOnClickItem(e, item));
        });
        HEADER.querySelectorAll('.header__main-menu-back-link').forEach(link => {
            link.addEventListener('click', e => this.handlerOnClickLinkBack(e));
        });
    }
    this.handlerOnClickItem = function(e, item) {
        item.classList.toggle('js-opened');
        item.querySelector('.header__main-menu-wrapper').classList.toggle('js-opened');
        if (item.parentNode.classList.contains('header__main-menu_level-1')) {
            if (document.querySelector('.panel-promotions')) {
                item.parentNode.querySelector('.header__main-menu-wrapper_level-2').style.top = `calc(${document.querySelector('.panel-promotions').clientHeight}px + ${document.querySelector('.header_mobile').clientHeight}px)`;
            } else {
                item.parentNode.querySelector('.header__main-menu-wrapper_level-2').style.top = document.querySelector('.header_mobile').clientHeight + 'px';
            }
        }
    }
    this.handlerOnClickLinkBack = function(e) {
        e.preventDefault();
        e.currentTarget.closest('.header__main-menu-item').classList.remove('js-opened');
        e.currentTarget.closest('.header__main-menu-wrapper_level-2').classList.remove('js-opened');
    }
    HEADER ? this.init() : null;
}