Search Filtered Nav

<div class="nuda-sb2-search-nav">
  <div class="nuda-sb2-search-nav__field">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-4.35-4.35" />
    </svg>
    <input type="search" class="nuda-sb2-search-nav__input" placeholder="Filter…" aria-label="Filter navigation">
  </div>
  <nav aria-label="Main">
    <ul class="nuda-sb2-search-nav__list">
      <li><a href="#" class="nuda-sb2-search-nav__item is-match" aria-current="page">Settings</a></li>
      <li><a href="#" class="nuda-sb2-search-nav__item">Dashboard</a></li>
    </ul>
  </nav>
</div>

const wrap = document.querySelector('.nuda-sb2-search-nav');
const input = wrap.querySelector('.nuda-sb2-search-nav__input');
const items = [...wrap.querySelectorAll('.nuda-sb2-search-nav__item')];

input.addEventListener('input', () => {
  const q = input.value.trim().toLowerCase();
  items.forEach((item) => {
    const match = !q || item.textContent.toLowerCase().includes(q);
    item.classList.toggle('is-match', match);
  });
});

.nuda-sb2-search-nav {
  width: 200px;
  padding: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nuda-sb2-search-nav__field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 36px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  transition: border-color .2s,box-shadow .2s;
}

.nuda-sb2-search-nav__field:focus-within {
  border-color: #e4ff54;
  box-shadow: 0 0 0 3px rgba(228,255,84,.15);
}

.nuda-sb2-search-nav__field svg {
  width: 14px;
  height: 14px;
  color: #777;
  flex-shrink: 0;
}

.nuda-sb2-search-nav__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #fafafa;
  font-size: 12px;
  outline: 0;
}

.nuda-sb2-search-nav__input::placeholder {
  color: #63636e;
}

.nuda-sb2-search-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nuda-sb2-search-nav__item {
  display: block;
  padding: 7px 10px;
  min-height: 32px;
  border-radius: 8px;
  color: #66666e;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  opacity: .35;
  transform: scale(.98);
  transition: opacity .25s,transform .25s,background .2s,color .2s;
}

.nuda-sb2-search-nav__item.is-match {
  opacity: 1;
  transform: scale(1);
  color: #a0a0a8;
}

.nuda-sb2-search-nav__item.is-match:hover {
  background: rgba(255,255,255,.05);
  color: #fafafa;
}

.nuda-sb2-search-nav__item[aria-current="page"] {
  color: #e4ff54;
  background: rgba(228,255,84,.08);
}

.nuda-sb2-search-nav__item:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sb2-search-nav__item {
    transition: none;
  }
}