<div class="options-nav no-shadow">
  <div class="container is-fluid">
    <div class="nav-inner is-friends">
      <a id="show-filters" class="nav-item is-icon">
        <i data-feather="filter"></i>
      </a>
      <a id="hide-filters" class="nav-item is-icon is-hidden">
        <i data-feather="x"></i>
      </a>
      <div class="option-tabs is-friends">
        <a class="option-tab is-active" data-tab="all-friends">
          <span>All</span>
        </a>
        <a class="option-tab" data-tab="starred-friends">
          <span>Starred</span>
        </a>
        <a class="option-tab" data-tab="new-friends">
          <span>New</span>
        </a>
        <div class="option-naver"></div>
      </div>
      <div class="end-group">
        <div class="nav-item is-friend-count">979 friends</div>
        <div id="subsearch" class="nav-item is-search is-hidden">
          <div class="control">
            <input
              type="text"
              class="input textFilter-input"
              placeholder="Search your friends"
            />
          </div>
        </div>
        <a id="show-subsearch" class="nav-item is-icon">
          <i data-feather="search"></i>
        </a>
        <a id="hide-subsearch" class="nav-item is-icon is-hidden">
          <i data-feather="x"></i>
        </a>
      </div>
    </div>
  </div>
</div>
