<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="parent">
<img src="https://avatars.mds.yandex.net/get-pdb/1748372/12e685ae-90f4-420d-a5d3-e848d08197ef/s1200?webp=false" class="logo" alt="logo">
  
<ul>
  <li><a href="#">home</a></li>
  <li><a href="#">server</a></li>
  <li><a href="#">forum</a></li>
  <li><a href="#">shop</a></li>
  <li><a href="#">about</a></li>
  <i class="fa fa-shopping-basket"></i>
  <i id="sbtn" class="fa fa-search"></i>
</ul>
<div id="search" class="search">
  <form>
    <input type="search" placeholder="Введите фразу для поиска">
  </form>
 <span id="um" class="um">&#10006;</span>
</div>
</div>

*{
  list-style: none;
  text-decoration: none;
}

body{
  font-size: 24px;
}

.logo{
  display: block;
  width: 50px;
  height: 50px;
}

.parent,ul{
  display: flex;
  align-items: center;
}

.parent{
  position: relative;
  justify-content: space-between;
}

i.fa,ul li{
  margin-right: 10px;
}

i.fa.fa-search{
  cursor: pointer;
}

.search{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.34s linear;
}

.search form, form input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none
}

.search .um{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  cursor: pointer;
}

.search.open{
  opacity: 1;
  visibility: visible;
}

let form = document.getElementById("search");
let um = document.getElementById("um");
let btn = document.getElementById("sbtn");

btn.onclick = function (){
  form.classList.add("open");
}

um.onclick = function (){
  form.classList.remove("open");
}