Hidden Shearch Widget

<div class="dock" role="search" aria-label="Búsqueda">
  <input id="search" type="text" class="input form-control" placeholder="Buscar..." aria-label="Campo de búsqueda" />
  <button class="btn btn-light position-absolute top-0 start-0" aria-controls="search" aria-expanded="false" aria-label="Mostrar/Ocultar búsqueda">
    <i class="fas fa-search" aria-hidden="true"></i>
  </button>
</div>

.dock { position: relative; height: 50px; }
.dock .input { width: 50px; transition: width .3s ease; padding-left: 52px; }
.dock.active .input { width: 280px; }
.dock .btn { width: 50px; height: 50px; }
.dock.active .btn { transform: translateX(230px); transition: transform .3s ease; }

const dock = document.querySelector(".dock");
const btn  = dock.querySelector(".btn");
const input = dock.querySelector(".input");

function toggle() {
  const active = dock.classList.toggle("active");
  btn.setAttribute("aria-expanded", String(active));
  if (active) input.focus();
}

btn.addEventListener("click", toggle);
// Atajo "/"
window.addEventListener("keydown", e => {
  if (e.key === "/" && !e.defaultPrevented) {
    e.preventDefault();
    if (!dock.classList.contains("active")) toggle();
    input.focus();
  }
});