превратить боковую панель с подпунктами в мобильное меню

Question

Задача не из легких. У меня есть боковая панель с раскрывающимся списком подменю. И его нужно сделать адаптивным для мобильных устройств, например, бургерного меню. Я пытался это сделать, но безуспешно. Может кто подскажет, или подскажет как это сделать. При наведении курсора на некоторые пункты меню появляется всплывающее окно. Прошу прощения за то, что не мало кода. Я постарался сделать все компактно. Надеюсь на помощь. Я был бы очень признателен. Спасибо.

.main {
    font-family: PT Sans;
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 100%;
}

.main_menu {
    display: flex;
    flex-direction: column;
    width: auto;
    background-color: #38618C;
    padding: 50px 0 0 0;
    z-index: 1;
    user-select: none;
}

.main_menu_content {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 50px;
    width: 100%;
}

.main_menu_content_list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    height: 700px;
    width: 250px;
}

.main_menu_content_list li {
    list-style-type: none;
}

.main_menu_content_list_submenu {
  position: absolute;
  padding: 0;
  margin: 0;
  left: 100%;
  height: 100vh;
  background-color: #F0F6F8;
  box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.25);
  top: -50px;
  pointer-events: none;
  opacity: 0;
  transition: all linear 0.1s 0s;
  width: auto;
  white-space: nowrap;
  padding: 0 40px 0 40px;
}

.main_menu_content_list_submenu_popup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.main_menu_content_list > li.main_menu_content_list_arrow > a:after{
  content: '';
  position: absolute;
  border: solid 10px;
  border-color: transparent #F0F6F8 transparent transparent;
  right: 0;
  opacity: 0;
}

.main_menu_content_list > li.main_menu_content_list_arrow:hover > a:after{
  opacity: 1;
}

.main_menu_content_list li:hover .main_menu_content_list_submenu {
  opacity: 1;
  pointer-events: auto;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(2) .main_menu_content_list_submenu_popup {
  margin: 2.9em 0 0 0;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(3) .main_menu_content_list_submenu_popup {
  margin: 6.7em 0 0 0;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(4) .main_menu_content_list_submenu_popup {
  margin: 19.1em 0 0 0;
}

.main_menu_content_list .main_menu_content_list_arrow:nth-child(8) .main_menu_content_list_submenu_popup {
  margin: 43.5em 0 0 0;
}

.main_menu_content_list_submenu_popup li:not(:first-child) {
  margin: 15px 0 0 0;
}

.main_menu_content_list_submenu_popup a {
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 21px;
  color: #38618C;
}

.main_menu_content_list_submenu_popup a:hover {
  color: #38618C;
  text-decoration: underline;
}

.main_menu_content_list_submenu_popup a:active {
  color: #FF5964;
}

<div class="main">

<div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li><a href="">11111111</a></li>
                    <li class="main_menu_content_list_arrow"><a href="/content/internet.html">
                            <div class="main_menu_content_list_int"></div>222222
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li>
                                    <p class="opendinamicmodal_internet">test</p>
                                </li>
                                <li><a href="/content/internet_additionalservices.html">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li>
                                    <p class="opendinamicmodal_fastpayment_internet">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_tv"></div>333333
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li>
                                    <p class="opendinamicmodal_tv">test</p>
                                </li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li>
                                    <p class="opendinamicmodal_fastpayment_tv">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_video"></div>444444
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a href="">test</a></li>
                                <li><a href="">test</a></li>
                                <li>
                                    <p class="opendinamicmodal_video">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="/content/rek.html">
                            <div class="main_menu_content_list_tvr"></div>555555
                        </a></li>
                    <li><a href="content/intb.html">
                            <div class="main_menu_content_list_intb"></div>6666666
                        </a></li>

                    <li><a href="">77777</a></li>

                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_sub_account"></div>888888
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li>
                                    <p class="entertoaccount_internet">test</p>
                                </li>
                                <li>
                                    <p class="entertoaccount_tv">test</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
<div class="main_content">
</div>

</div>