JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-sm visible-sm visible-xs container visible-md visible-lg">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Left Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <div class="navbar-collapse collapse">
        <div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
            <!-- A lot of code that I included in the dropdown menu -->
        </div>
    </div>
</div>

CSS

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }

.navbar-toggle {
  position: relative;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: rgb(241, 241, 241);
  background-image: none;
  border: 1px solid rgb(241, 241, 241);
  border-radius: 4px;
  width: 695px;
}

JavaScript

var mql = window.matchMedia('only screen and (min-width: 268px)'),
      handleMQL = function(mql) {
    if (mql.matches) {
        console.log('MATCH');
        // Media query does match
    } else {
        // Media query does not match anymore
         console.log('UNMATCH');
    }
};
handleMQL(mql);
mql.addListener(handleMQL);