JSFiddle - React, Tailwind, and code Playground

by Dmitri Ganenco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<button id="main-menu-toggle" type="button"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>

<div id="main-menu" class="sminscroll">
  <p class="navtxt hide">NAVIGATION</p>
  <ul class="navigation">
    <li class="mm-dropdown mm-dropdown-root"><a href="Javascript:void(0);"><i class="menu-icon fa fa-cubes"></i> <span>Group Management</span></a>
      <ul>
        <li class="mmc-title">Group Management</li>
        <li><a href="group-management.php"><span class="dash"><i class="fa fa-angle-double-right"></i></span>View Group</a></li>
        <li><a href="create-groups.php"><span class="dash"><i class="fa fa-angle-double-right"></i></span>Create Group</a></li>
        <li class="hide"><a href="edit-group.php"><span class="dash"><i class="fa fa-angle-double-right"></i></span>Edit Group</a></li>

        <li class="hide"><a href="group-details.php"><span class="dash"><i class="fa fa-angle-double-right"></i></span>Group Details</a></li>
      </ul>
    </li>
    <ul>
</div>

JavaScript

$(document).ready(function() {
  debugger;
  const $body = $('body');
  for (var panel in $.cookie()) {
    $body.toggleClass('mmc', $body.hasClass('mmc'));
  }
});


$(window).on("load resize", function(e) {
  debugger;
  const shouldAddClass = $(window).width() < 851;
  $("body").toggleClass("mmc", shouldAddClass);

  if (e.type === 'resize' && !shouldAddClass) {
    $(".topnav_cont").removeAttr("style")
  }
});

//used for collapse menu when not active sidebar only if you remove this all menu in exmapd mode 
$("#main-menu .mm-dropdown > ul").hide();

//use for sidebar menu  
$("#main-menu-toggle").on("click", function(e) {
  $("body").toggleClass("mmc");

  var isBodyClassMMC = $("body").attr("class") === 'mmc';
  $("#main-menu > ul > li.active").addClass("mm-dropdown-root open").children("ul").toggle(!isBodyClassMMC);
	$('#main-menu').toggleClass('sminscroll', !isBodyClassMMC);
  
	if (isBodyClassMMC) {
    $("#main-menu .mm-dropdown.open > a").mouseover();
    $('#main-menu').removeAttr('style');
    $('.slimScrollDiv').removeAttr('style');
  }
	
});