Как подправить мобильное меню(показ)?

$(function() { 
  $a = $('.side-menu > li > span'); 
  $showlist = $('.side-menu > li > span + ul'); 
  $a.on('click', function() { 
    if ($(this).next().css('overflow', 'hidden')) { 
      $(this).next().slideDown(300); 
      $a.not(this).next().slideUp(300); 
    } 
  }); 
}); 
 
$(function() { 
  $(".mobile").on('click', function() { 
    $(".side-menu").slideToggle(300); 
  }) 
}); 
 
$(window).resize(function() { 
  if ($(window).width() > 992) { 
    $('.side-menu').removeAttr('style'); 
  } 
   if ($(window).width() < 992) { 
    $('.sub-menu').removeAttr('style'); 
  } 
});

* { 
  padding: 0; 
  margin: 0; 
} 
ul { 
  list-style: none; 
} 
.main-container { 
  display: flex; 
  padding: 20px 0; 
} 
.sidebar { 
  flex: 3; 
} 
aside a { 
  color: #000; 
  display: block; 
  padding: 8px 30px; 
} 
.sidebar aside { 
  margin-right: 50px; 
  border: 1px solid #e2e1e1; 
  cursor: pointer; 
  background: white; 
  margin-right: 35px; 
} 
.mobile { 
  display: none; 
  padding: 15px 20px; 
  background: rgba(33, 32, 32, 0.83); 
  color: #fff; 
  letter-spacing: 5px; 
} 
.our-menu { 
  padding: 15px 20px; 
  background: rgba(33, 32, 32, 0.83); 
  color: #fff; 
  letter-spacing: 5px; 
} 
.invisible { 
  display: none; 
} 
.sub-menu li { 
  background: #f7f7f7; 
} 
.side-menu li { 
  transition: all .3s; 
} 
.side-menu li .sub-menu li { 
  font-style: italic; 
  font-size: 16px; 
} 
.side-menu li:hover { 
  background: #e8e8e8; 
} 
.side-menu > li > a, 
.side-menu > li > span { 
  padding: 10px 18px; 
  display: block; 
  font-size: 18px; 
  border-top: 1px solid #eeeeee; 
} 
.active { 
  background: #e8e8e8; 
  ; 
} 
.main { 
  flex: 9; 
} 
@media (max-width: 992px) { 
  .our-menu { 
    display: none; 
  } 
  .mobile { 
    display: block 
  } 
  .side-menu { 
    display: none; 
  } 
  .main-container { 
    display: block; 
  } 
  .sidebar aside { 
    margin: 20px 0px; 
  } 
  .sub-menu { 
    display: none; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="main-container"> 
  <div class="sidebar"> 
    <aside> 
      <h3 class="our-menu"><i class="fa fa-bars"></i>Меню</h3> 
      <div class="mobile"> 
        <h3><i class="fa fa-bars"></i>Меню</h3> 
      </div> 
      <ul class="side-menu"> 
        <li><span>Основное меню</span> 
          <ul class="sub-menu"> 
            <li><a href="index.php" class="sub-list" data="1">Холодные закуски</a> 
            </li> 
            <li><a href="index.php" class="sub-list" data="2">Горячие закуски</a> 
            </li> 
            <li><a href="index.php" class="sub-list" data="3">Первые блюда</a> 
            </li> 
          </ul> 
        </li> 
        <li><span>Второе меню</span> 
          <ul class="sub-menu invisible"> 
            <li><a href="index.php" class="sub-list" data="14">Первые блюда</a> 
            </li> 
            <li><a href="index.php" class="sub-list" data="15">Вторые блюда</a> 
            </li> 
            <li><a href="index.php" class="sub-list" data="16">Сладкие блюда</a> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </aside> 
  </div> 
  <div class="main"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus nostrum explicabo rem dolorem vel vero culpa repellat ipsa maiores, optio alias tempora ducimus voluptates et neque unde. Quia necessitatibus, deserunt!</div> 
    <div>Vero eius molestias exercitationem non molestiae, sint aspernatur. Quos voluptatum modi vitae minima eos magni quas nesciunt architecto, odio vel explicabo officiis hic, voluptates ut. Repudiandae voluptatum maxime eos consequatur!</div> 
    <div>Quasi mollitia illo, aliquid rerum atque ipsum accusantium, maiores nulla, repudiandae quo libero rem. Mollitia dolore, ipsum asperiores praesentium voluptatum, aliquam laudantium magnam nemo, tenetur rerum iusto quo laboriosam ullam.</div> 
    <div>Expedita minima accusantium asperiores vel doloremque, unde est nulla dolore debitis dolorem, corrupti eos earum nemo, sunt, quos quidem perferendis. Harum enim praesentium vero quo id tempore, voluptatum aliquid cumque.</div> 
    <div>In repellat, vel impedit delectus fugiat eligendi eum expedita aspernatur velit hic provident veniam quaerat nostrum assumenda, id ducimus? Maxime eligendi dolores laboriosam. Molestias eius est dicta eaque in! Et!</div> 
    <div>Totam possimus officiis odio necessitatibus, ratione repellendus id nesciunt delectus explicabo, amet inventore quaerat, laborum mollitia earum quos nihil eaque at quisquam suscipit non officia unde. Excepturi dignissimos eaque, facere.</div> 
    <div>Fugiat voluptas nam repudiandae sed facere, iste, quae enim cum! Quaerat distinctio sed consequuntur neque dolores, necessitatibus totam animi cum veniam, ad obcaecati assumenda iste tempore, itaque nostrum eius sint!</div> 
    <div>Voluptatibus minima inventore consequatur voluptatem dolorem quia illum doloremque ducimus provident veritatis voluptates natus amet assumenda, ullam sequi delectus distinctio eum repudiandae quibusdam quod aspernatur voluptate, culpa itaque dolore. 
      Nemo.</div> 
    <div>Possimus placeat ipsa asperiores doloribus, totam, unde provident illo, cumque, ut similique dolore iure. At ex explicabo iure officiis numquam eligendi aliquam tempore dolores aut distinctio quibusdam quaerat minima, obcaecati.</div> 
    <div>Quia voluptatem sed nam possimus qui ad doloremque quos placeat, sequi laboriosam sunt maiores distinctio repellat laborum, cum labore iste illo vitae. Aut expedita modi, tempora laborum! Neque, nulla, blanditiis.</div> 
  </div>