Navigation (Horizontal) Components in Asitrastudio library

<section x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="container mx-auto px-4">
      <div class="flex h-24 items-center">
        <a class="inline-block" href="#">
          <img class="h-5" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="lg:hidden py-1 ml-auto">
          <svg width="44" height="16" viewBox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
        </button>
        <div class="hidden lg:flex ml-auto mr-12 items-center"><a class="inline-block hover:underline mr-10" href="#">About</a><a class="inline-block hover:underline mr-10" href="#">Services</a><a class="inline-block hover:underline mr-10" href="#">Projects</a><a class="inline-block hover:underline" href="#">Contact us</a></div>
        <a class="group hidden lg:inline-flex py-4 px-8 items-center justify-center leading-none font-medium text-black hover:text-white border border-black rounded-full hover:bg-black transition duration-200" href="#">
          <span class="mr-2">Get consulation</span>
          <span class="group-hover:rotate-45 transform transition duration-100">
            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1L1 9" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.33571V1H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen,'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-md z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-50"></div>
    <nav class="relative flex flex-col py-6 px-10 w-full h-full bg-white overflow-y-auto">
      <div class="flex mb-auto items-center">
        <a class="inline-block mr-auto" href="#">
          <img class="h-4" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="py-12 mb-auto">
        <ul class="flex-col">
          <li class="mb-6"><a class="inline-block hover:underline text-black" href="#">About</a></li>
          <li class="mb-6"><a class="inline-block hover:underline text-black" href="#">Services</a></li>
          <li class="mb-6"><a class="inline-block hover:underline text-black" href="#">Projects</a></li>
          <li><a class="inline-block hover:underline text-black" href="#">Contact us</a></li>
        </ul>
      </div>
      <div><a class="block mb-3 px-4 py-4 text-center font-medium text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-200" href="#">Login</a><a class="block px-4 py-4 text-center font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Sign in</a></div>
    </nav>
  </div>
</section>

<section class="is-relative" x-data="{ mobileNavOpen: false }">
  <nav class="navbar py-2 is-white" role="navigation" aria-label="navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">
        <img class="image" src="asitrastudio-assets/logos/logo-asi.svg" alt="">
      </a>
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="is-hidden-desktop is-inline-flex is-align-items-center is-justify-content-center navbar-menu-open navbar-burger" href="#">
        <svg width="38" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="44" height="2" rx="1" fill="black"></rect><rect y="14" width="44" height="2" rx="1" fill="black"></rect></svg>
      </button>
    </div>
    <div class="navbar-menu" id="navExample">
      <div class="navbar-end">
        <a class="navbar-item">About</a><a class="navbar-item">Services</a><a class="navbar-item">Projects</a><a class="navbar-item">Contact us</a>
        <div class="navbar-item">
          <a class="button is-outlined is-rounded is-dark is-flex is-align-items-center" href="#">
            <span class="mr-3">Get consulation</span>
            <svg class="is-rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </nav>
  <div :class="{ 'is-block': mobileNavOpen, 'is-hidden': !mobileNavOpen }" class="is-hidden navbar-side is-fixed is-top-0 is-bottom-0 is-left-0 has-mw-sm" style="width: 75%; z-index: 9999;">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="is-fixed is-inset-0 has-background-dark" style="opacity: 75%; z-index: 50;"></div>
    <aside class="menu is-relative is-flex is-flex-direction-column pb-6 px-6 has-background-white" style="width: 100%; height: 100%; z-index: 50; overflow-y: auto;">
      <div class="is-flex is-align-items-center mb-10">
        <a class="mr-auto mb-0" href="#">
          <span class="navbar-item px-0 title is-5 has-text-dark">
            <img src="asitrastudio-assets/logos/logo-asi.svg" alt="" style="height: 21px;" width="auto">
          </span>
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="button is-text p-0 mb-2" type="button" aria-label="Close">
          <svg style="width: 18px; height: 18px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <ul class="menu-list is-size-7">
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">About</a></li>
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">Services</a></li>
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">Projects</a></li>
        <li class="mb-2"><a class="has-background-white has-text-dark" href="#">Contact us</a></li>
      </ul>
      <div class="mt-auto"><a class="button mb-3 is-fullwidth is-outlined is-rounded is-dark" href="#">Login</a><a class="button is-fullwidth is-rounded is-primary" href="#">Sign in</a></div>
    </aside>
  </div>
</section>

<section class="position-relative">
  <nav class="navbar navbar-expand-lg navbar-light bg-light-light py-4"  >
    <div class="container"><a class="navbar-brand" href="#"><img class="img-fluid" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a>
      <button class="d-lg-none navbar-burger btn px-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="44" height="16" viewbox="0 0 44 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="44" height="2" rx="1" fill="black"></rect>
          <rect y="14" width="44" height="2" rx="1" fill="black"></rect>
        </svg>
      </button>
      <div class="collapse navbar-collapse" id="nav05">
        <ul class="navbar-nav ms-lg-auto me-4">
          <li class="nav-item me-4"><a class="nav-link" href="#" >About</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Services</a></li>
          <li class="nav-item me-4"><a class="nav-link" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link" href="#" >Contact us</a></li>
        </ul>
        <div><a class="btn btn-outline-dark d-flex align-items-center rounded-pill" href="#"><span class="me-3" >Get consulation</span>
            <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-white overflow-auto"  >
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="asitrastudio-assets/logos/logo-asi.svg" alt=""/></a><a class="navbar-close" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="py-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#" >About</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#" >Services</a></li>
          <li class="nav-item mb-6"><a class="nav-link text-dark" href="#" >Projects</a></li>
          <li class="nav-item"><a class="nav-link text-dark" href="#" >Contact us</a></li>
        </ul>
      </div>
      <div><a class="btn btn-outline-dark mb-3 w-100 rounded-pill" href="#" >Login</a><a class="btn btn-primary w-100 rounded-pill" href="#" >Sign in</a></div>
    </nav>
  </div>
</section>