<header class=“top-navbar”>

<a href="<%= rel_prefix %>/index.html" class="navbar-brand">
  <%= h @options.title %>
</a>

<!-- Desktop search bar -->
<div class="navbar-search navbar-search-desktop" role="search">
  <form action="#" method="get" accept-charset="utf-8">
    <input id="search-field" role="combobox" aria-label="Search"
           aria-autocomplete="list" aria-controls="search-results"
           type="text" name="search" placeholder="Search (/) for a class, method..."
           spellcheck="false" autocomplete="off"
           title="Type to search, Up and Down to navigate, Enter to load">
    <ul id="search-results" aria-label="Search Results"
        aria-busy="false" aria-expanded="false"
        aria-atomic="false" class="initially-hidden"></ul>
  </form>
</div>

<!-- Mobile search icon button -->
<button id="search-toggle" class="navbar-search-mobile" aria-label="Open search" type="button">
  <span aria-hidden="true">🔍</span>
</button>

<!-- Theme toggle button -->
<button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
  <span class="theme-toggle-icon" aria-hidden="true">🌙</span>
</button>

</header>

<!– Search Modal (Mobile) –> <div id=“search-modal” class=“search-modal” hidden aria-modal=“true” role=“dialog” aria-label=“Search”>

<div class="search-modal-backdrop"></div>
<div class="search-modal-content">
  <div class="search-modal-header">
    <form class="search-modal-form" action="#" method="get" accept-charset="utf-8">
      <span class="search-modal-icon" aria-hidden="true">🔍</span>
      <input id="search-field-mobile" role="combobox" aria-label="Search"
             aria-autocomplete="list" aria-controls="search-results-mobile"
             type="text" name="search" placeholder="Search documentation"
             spellcheck="false" autocomplete="off">
      <button type="button" class="search-modal-close" aria-label="Close search" id="search-modal-close">
        <span aria-hidden="true">esc</span>
      </button>
    </form>
  </div>
  <div class="search-modal-body">
    <ul id="search-results-mobile" aria-label="Search Results"
        aria-busy="false" aria-expanded="false"
        aria-atomic="false" class="search-modal-results initially-hidden"></ul>
    <div class="search-modal-empty">
      <p>No recent searches</p>
    </div>
  </div>
</div>

</div>