<!--  Search Bar -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content rounded-1">
      <div class="modal-header border-bottom">
        <input type="search" class="form-control fs-3" placeholder="Search here" id="search" />
        <a href="javascript:void(0)" data-bs-dismiss="modal" class="lh-1">
          <i class="ti ti-x fs-5 ms-3"></i>
        </a>
      </div>
      <div class="modal-body message-body" data-simplebar="">
        <h5 class="mb-0 fs-5 p-1">Quick Page Links</h5>
        <ul class="list mb-0 py-2">
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Modern</span>
              <span class="text-muted d-block">/dashboards/dashboard1</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Dashboard</span>
              <span class="text-muted d-block">/dashboards/dashboard2</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Contacts</span>
              <span class="text-muted d-block">/apps/contacts</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Posts</span>
              <span class="text-muted d-block">/apps/blog/posts</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Detail</span>
              <span
                class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Shop</span>
              <span class="text-muted d-block">/apps/ecommerce/shop</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Modern</span>
              <span class="text-muted d-block">/dashboards/dashboard1</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Dashboard</span>
              <span class="text-muted d-block">/dashboards/dashboard2</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Contacts</span>
              <span class="text-muted d-block">/apps/contacts</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Posts</span>
              <span class="text-muted d-block">/apps/blog/posts</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Detail</span>
              <span
                class="text-muted d-block">/apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow</span>
            </a>
          </li>
          <li class="p-1 mb-1 bg-hover-light-black">
            <a href="javascript:void(0)">
              <span class="d-block">Shop</span>
              <span class="text-muted d-block">/apps/ecommerce/shop</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>