Navigation (Horizontal) Components in Acros library

<section>
  <nav class="navbar py-2 has-background-grey-darker">
    <div class="container px-8-mobile">
      <div class="navbar-brand is-align-items-center">
        <a class="navbar-item" href="#">
          <span class="px-0 title is-size-4 has-text-white">
            <img src="acros-assets/logo/logo-acros-white.svg" width="auto" style="max-height: initial;" alt="">
          </span>
        </a>
        <a class="navbar-menu-open navbar-burger" role="button" type="button" data-toggle="side-menu">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <ul class="navbar-item pl-0">
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">About</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Company</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Services</a></li>
            <li><a class="title is-size-6 has-text-white has-text-weight-normal navbar-item" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="control has-icons-right">
              <input class="input has-background-grey-dark pl-4 pr-12" style="border: none; height: 56px;" placeholder="Search here">
              <span class="icon is-right pr-4" style="height: 100%;">
                <img src="acros-assets/icons/navigations/search-white.svg" alt="">
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div class="navbar-side is-hidden is-fixed is-top-0 is-left-0 has-background-blur" style="z-index: 50; width:100%; height: 100%;">
    <div class="is-absolute" style="z-index: -1;"></div>
    <div class="container is-relative">
      <a class="navbar-close is-absolute is-right-0 mt-6 mr-6" href="#">
        <img src="acros-assets/icons/mobile-decline.svg" alt="">
      </a>
    </div>
    <aside class="py-6 px-6 pb-8 has-background-white is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%; width: 288px; overflow-y: auto">
      <div class="mb-8">
        <a class="navbar-item title is-size-4 has-text-dark pl-4 mb-5" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" width="auto" style="max-height: initial" alt="">
        </a>
        <div class="control has-icons-right mb-8">
          <input class="input has-background-white-ter pl-4 pr-12" style="border: none; height: 56px;" placeholder="Search here">
          <span class="icon is-right pr-4" style="height: 100%;">
            <img src="acros-assets/icons/navigations/search-black.svg" alt="">
          </span>
        </div>
        <ul class="menu-list title is-size-6">
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">About</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Company</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Services</a></li>
          <li><a class="py-4 px-6 has-text-grey-darker" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div><small class="has-text-grey-darker ml-6">2021 &copy; Shuffle</small></div>
    </aside>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-gray-900">
    <div class="flex items-center justify-between">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto mr-14">
            <a class="inline-block" href="#">
              <img src="acros-assets/logo/logo-acros-white.svg" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center">
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">About</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Company</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Services</a></li>
              <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Testimonials</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap">
          <div class="w-auto hidden lg:block">
            <div class="relative">
              <a class="absolute right-5 top-1/2 transform -translate-y-1/2" href="#">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.8 13.8L17 17M15.9333 8.46667C15.9333 12.5904 12.5904 15.9333 8.46667 15.9333C4.34294 15.9333 1 12.5904 1 8.46667C1 4.34294 4.34294 1 8.46667 1C12.5904 1 15.9333 4.34294 15.9333 8.46667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
              <input class="px-4 pr-12 w-72 h-14 text-gray-300 placeholder-gray-300 bg-gray-800 outline-none" type="text" placeholder="Search here">
            </div>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-500 hover:bg-gray-600 rounded-full">
              <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 9H1M19 1H1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>