JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
  <header>
    <nav>
      <ul class="navigation">
        <li>
          <a href="#">asd</a>
        </li>
        <li>
          <a href="#">asd</a>
        </li>
        <li>
          <a href="#">asd</a>
        </li>
        <li>
          <a href="#">asd</a>
        </li>
        <li>
          <a href="#">asd</a>
        </li>
        <button type="button" id="showmenu">
          << </button>
      </ul>
    </nav>
  </header>

CSS

#all {
  background: url("https://thumbs.dreamstime.com/t/blue-background-simple-abstract-header-footer-50000907.jpg");
  background-size: 80px 60px;
  background-repeat: repeat-x;
  background-position: bottom;
  border: 3px solid lightblue;
  width: 99%;
  height: 99%;
  margin: auto;
}

header nav {
  width: 100%;
  height: 100%;
}

nav ul {
  list-style-type: none;
  display: inline-block;
  margin: auto;
  padding: 0;
  background-color: darkblue;
  border: 1px solid #CCCCFF;
  border-radius: 0 0 15px;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

nav ul li {
  display: inline;
  text-align: center;
  font-size: 20px;
}

nav li a {
  background-color: #6666FF;
  border: 1px solid gray;
  border-radius: 0px 0px 25px 25px;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
  font-size: 25px;
}

header nav button {
  float: right;
  margin-right: 10px;
  margin-top: 2px;
  padding: 10px;
  color: black;
  background-color: lightblue;
  border-radius: 5px;
  font-size: 10px;
}

header nav button:hover {
  background-color: pink;
}

JavaScript

$(document).ready(function() {
	var menu = 1;
  if (menu = 1) {
    $('#showmenu').click(function() {
      $('nav ul li').hide()
      $('nav ul').css('width', '3%');
      menu = 2;
    });
  } else {

    $('#showmenu').click(function() {
      $('nav ul ').show();
      $('nav ul').css('width', '100%');
      menu = 1;
    });
  }
});