JSFiddle - React, Tailwind, and code Playground

HTML

<div class="right">
		<div class="troggler">x</div>
		<div class="story">
			<h2>title</h2>
			<p>text...</p>
		</div>
	</div>

CSS

.right{position:fixed!important; top:50px; right:0; width:400px; background:#ccc;}
	.right .troggler{position:absolute; left:-25px; top:4px; width:25px; height:25px; line-height:25px; background:#333; display:block; background-position:0 0; color:#fff; text-align:center; cursor:pointer; cursor:hand;}
.story{padding:0 20px;}

JavaScript

function showNavi(){
    $('.right').animate({"right": "0"}, "slow");
	$('.troggler').animate({"background-position": "0"}, "fast");
    
    
}
function hideNavi(){
    $('.right').animate({"right": "-400px"}, "slow");
	$('.troggler').animate({"background-position": "-25px"}, "fast");
    
}
$('.troggler').toggle(
	function() {
		showNavi();
	}, function() {
		hideNavi();
});
var timer = 0;
	var delayToCall = (function () {
		
		return function (callback, ms) {
			
			if (timer > 0) {
				clearTimeout (timer);
			}
			timer = setTimeout(callback, ms);
		};
	})();
$(window).resize(function () {
   delayToCall(function(){
	 applyLayout();
	}, 500);
});

function applyLayout() {
    if ($(window).width() < 740) {
       hideNavi();
    }else {
        showNavi();
    }
}