medium navbar

app.js

const searchIcon = document.getElementById('search-icon');
const searchInput = document.getElementById('search-input');

searchIcon.addEventListener('click', () => {
  searchInput.style.width = '200px';
  searchInput.focus();       
});

styles.css

.wrapper {
  width: 900px;
  margin: auto;
}

ul {
  padding: 0;
  list-style: none;
}

input {
  outline: none;
}

.medium {
  display: flex;
  align-items: center;
  color: #A6A8AB;
}

.medium__title {
  margin-right: auto;
}

.medium li {
  padding: 5px 10px;
}

.medium li a {
  color: #02b875;
  text-decoration: none;
}

.medium__title {
  font-size: 24px;
}

.medium .medium__search {
  padding: 0;
  overflow: hidden;
}

.medium__search input {
  width: 0;
  border: 0;
  transition: width .3s ease-in-out;
}