JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.js"></script>
<body>

  <div class="ui sidebar inverted vertical menu">
    <div class="item">
      <i class="times circle big icon nav-sidebar__close-icon"></i>
    </div>       
    <a class="item">
     1
    </a>
    <a class="item">
      1
    </a>
    <a class="item">
      2
    </a>
  </div>
  <div class="pusher">
  <button class="ui button expand-btn">Expand</button>
    <!-- Site content !-->
  </div>
</body>

CSS

.nav-sidebar__close-icon {
    position: absolute;
    right: -19px;
    color: green;
}
.ui.visible.sidebar{
  z-index: 4;
  overflow: visible !important;
}

JavaScript

jQuery('.expand-btn').on('click', function () {
  jQuery('.ui.sidebar')
    .sidebar('toggle')
  ;
});