JSFiddle - React, Tailwind, and code Playground

HTML

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link href="https://fonts.googleapis.com/css?family=Ruslan+Display|Titillium+Web" rel="stylesheet">

<div class="menu">
   <div class="logo">
     <img src="http://3.bp.blogspot.com/-0s0fzP91qhg/TfCQPEpFoDI/AAAAAAAABAk/acLUbrU4yMk/s1600/eagle+2dimescom.png" alt="">
   </div>
   <div class="name">
     griffon
   </div>
   <span class="trigger">
    <i></i>
    <i></i>
    <i></i>
  </span>
  <ul class="mobile">
    <li><a href="">home</a></li>
    <li><a href="">profile</a></li>
    <li><a href="">scills</a></li>
    <li><a href="">portfolio</a></li>
    <li><a href="">adres</a></li>
    <span class="close">
      <i></i>
      <i></i>
    </span>
  </ul>
</div>

<div class="text"></div>

CSS

*{
  margin:0;
  padding:0;
  list-style:none;
  text-decoration:none;
}

.menu{
  display:flex;
  justify-content:space-around;
  align-items:center;
}

.name{
  display:none;
}


.logo{
  width:40px;
  height:40px;
}

.logo img{
  display:block;
  width:inherit;
  height:inherit;
}

.menu  ul{
  width:805;
  display:flex;
}

.menu ul li{
  margin:0 10px;
}
 li a{
   font-family: 'Titillium Web', sans-serif;
   font-weight:600;
   color:#991B27;
}


.text{
  position: fixed;
  bottom:20px;
  right:20px;
  color:red;
}

@media (max-width:640px){
  .menu ul{
    display:none;
  }
  .name{
    display:block;
    color:#991B27;
    font-weight:900;
    font-family: 'Ruslan Display', cursive;
    position: relative;
    z-index:12;
  }
  .trigger{
    display:block;
    width:40px;
    height:40px;
  }
  
  .trigger i{
    display:block;
    width:35px;
    height:6px;
    margin:6px auto;
    background:#991B27;
  }
  .show{
    display:block !important;
    width:100vw;
    height:100vh;
    height:auto;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    background:#fbfbfb;
    padding-top:50px;
  }
  
  .show li a{
    color:#991B27;
  }
  .close{
    display:block;
    width:40px;
    height:40px;
    position: absolute;
    top:10px;
    right:10px;
  }
  .close i:nth-of-type(1),
  .close i:nth-of-type(2){
    display:block;
    width:8px;
    height:40px;
    background:#991B27;
  }
  .close i:nth-of-type(1){
      transform:rotate(45deg)translateX(10px)translateY(-7px);
  }
  .close i:nth-of-type(2){
      transform:rotate(-45deg)translateX(35px)translateY(-18px); 
  }
}

JavaScript

$(document).ready(function(){
  $(".text").text($(document).width());
  
    $(window).on("resize", function(){
   	$("ul.mobile").removeClass("show");
      $(".text").text($(document).width());
    });

   $(".trigger, .close").on("click", function(){
    $("ul.mobile").toggleClass("show");
   });

});