JSFiddle - React, Tailwind, and code Playground

by Apple Pie

HTML

<div id="bar">
  <a href="#">Action 1</a> <a href="#">Action 2</a> <a href="#">Action 3</a> <a href="#">Action 4</a> <a href="#">Action 5</a> <a href="#">Action 6</a> <a href="javascript:void(0)" id="r">&lt;&lt;</a>
</div>

CSS

#bar{
  font-family: Verdana;
    min-width: 98%;
    position: absolute;
    left: 0;
    transition: left 500ms ease-in-out;
}
#r{
  position: relative;
  float: right;
}

JavaScript

affiche = true;

document.getElementById("r").onclick = function(){toggle();};

function toggle(){
	if (affiche == true){
  	document.getElementById("bar").style.left = "-93%";
    document.getElementById("r").innerHTML = ">>";
    affiche = false;
  } else {
  	document.getElementById("bar").style.left = "0";
    document.getElementById("r").innerHTML = "<<";
    affiche = true;
  }
}