Semantic-UI tab destroy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<style>
html.ios {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
html.ios,
html.ios body {
  height: initial !important;
}
</style>
<div class="ui right sidebar vertical menu" id="slidebar">
  <div class="item header inverted">
    MENU
  </div>
</div>

<header class="ui inverted attached borderless main menu fixed-top" id="header">
  <div class="ui container">
    <h1 class="ui grey inverted header content" id="header-title">
      title
    </h1>
    <div class="right menu">
      <div class="item" id="sidebar-trigger">
        <i class="sidebar icon"></i>MENU
      </div>
    </div>
  </div>
</header>

<div class="pusher">
  <div class="ui container">
  <h1>
    PAGE
  </h1>
  <p>
    Find me in app/views/pages/home.html.slim
  </p>
</div>
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
$(function() {
  var $sidebar = $('.ui.right.sidebar#slidebar');
  var $sidebarTrigger = $('#sidebar-trigger');
  // Slidebar
  $sidebar
  	.sidebar({
  	  transition: 'push',
      mobileTransition: 'overlay'
  	})
    .sidebar('attach events', $sidebarTrigger)
  ;
  
  
});
</script>

CSS

html.ios {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
html.ios,
html.ios body {
  height: initial !important;
}

JavaScript

$(function() {
  var $sidebar = $('.ui.right.sidebar#slidebar');
  var $sidebarTrigger = $('#sidebar-trigger');
  // Slidebar
  $sidebar
  	.sidebar({
  	  transition: 'push',
      mobileTransition: 'overlay'
  	})
    .sidebar('attach events', $sidebarTrigger)
  ;
  
  
});