Professional menu with JavaScript and jQuery (last part)

In this part of the professional menu design, instead of using icons (fontawesome), I created my own custom icons using several tags (div).

My codes are working properly and my only problem is that when I click on the created icon its appearance changes but the main menu which is hidden does not appear.

Is there a way around this or is my design completely wrong?

let icon = document.querySelector(".main_lineIcon");
let nav = document.querySelector(".main_menu");

$('.back').hide();
$('.back').click(function () {
    if ($(this).is(':hidden')) return;
    $(this).toggle();
    icon.classList = "main_lineIcon test";

    nav.style.right = '-350px';
});

icon.addEventListener("click", () => {
    icon.classList.toggle("change_icon");
    let ul = document.getElementById("nav");
    ul.classList.toggle("toggle-main_lineIcon");
}, true), function () {
    if (this.classList.contains("main_lineIcon")) {
        this.classList = "change_icon";

        nav.style.right = 0;
    } else {
        this.classList = "main_lineIcon";

        nav.style.right = "-350px";
    }
    $('.back').toggle();
};

$('.main_menu li ul').each(function () {
    $(this).parent().addClass('submenu')
})

$('.submenu').click(function (sub_menu) {
    sub_menu.stopPropagation();
    sub_menu.preventDefault();
    $(this).children('ul').slideToggle();
    $(this).toggleClass('open');
});

.main_menu {
    position: absolute;
    top: 0;
    right: -350px;
    bottom: 0;
    z-index: 999;
    background: #eee;
    padding-left: 2rem;
    width: 300px;
    transition: all 1s ease;
}

/* ************* ICON MENU **************** */

.main_lineIcon {
    display: block;
    cursor: pointer;
    position: relative;
    margin-top: 50px;
    margin-right: 25rem;
}

.lineIcon_1,
.lineIcon_2,
.lineIcon_3 {
    width: 35px;
    height: 5px;
    background-color: #6c03ff;
    margin: 6px 0;
    transition: 0.4s;
}

.toggle-main_lineIcon {
    display: block !important;
    cursor: pointer;
    margin-top: -30px;
}

.change_icon .lineIcon_1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: #f00;
}

.change_icon .lineIcon_2 {
    opacity: 0;
}

.change_icon .lineIcon_3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(39deg) translate(-8px, -8px);
    background-color: #f00;
}


/* *********************** */

.main_menu ul {
    list-style: none;
    line-height: 60px;
    font-size: 25px;
}

.main_menu ul li a {
    color: #000000;
    text-decoration: none;
    padding-right: 15px;
    padding-left: 40px;
    margin-left: -60px;
    margin-bottom: 10px;
}

.back {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9 !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #00000056;
}

.main_menu ul li ul {
    display: none;
}

.main_menu .submenu>a::after {
    font-family: "Font Awesome 6 free";
    font-weight: 900;
    vertical-align: middle;
    content: 'f137';
    color: #f00;
    margin-right: 1rem;
}

.main_menu .open>a::after {
    font-family: "Font Awesome 6 free";
    font-weight: 900;
    vertical-align: middle;
    content: 'f13a' !important;
    color: #f00;
    margin-right: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
        <nav id="nav">
          <aside class="main_menu">

            <div class="main_lineIcon">
              <div class="lineIcon_1"></div>
              <div class="lineIcon_2"></div>
              <div class="lineIcon_3"></div>
             </div>

            <ul>
              <li>
                <a href="#">خانه</a>
              </li>
      
              <li>
                <a href="#">مقالات ما</a>
                <ul>
                  <li>
                    <a href="#">موبایل</a>
                  </li>
      
                  <li>
                    <a href="#">کامپیوتر</a>
                  </li>
      
                  <li>
                    <a href="#">طراحی سایت</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">درباره ما</a>
                <ul>
                    <li>
                        <a href="#"></a>
                        سیاست حریم خصوصی
                    </li>
                    <li>
                        <a href="#"></a>
                        عضویت در خبرنامه
                    </li>
                    <li>
                        <a href="#"></a>
                        آدرس ما
                    </li>
                </ul>
            </li>
            </ul>
          </aside>
        </nav>
      </section>
      <div class="back"></div>