Navigation (Horizontal) Components in Vista library

<section x-data="{ mobileNavOpen: false }">
    <nav class="py-5 bg-darkPink-900">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <a href="#">
                    <img src="vista-assets/images/logos/vista-logo.svg" alt="">
                </a>
                <div class="hidden lg:flex gap-2 p-1 rounded-full bg-white bg-opacity-10">
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Home</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Features</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Pricing</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">About</a>
                    <a href="#" class="px-3 py-2 rounded-full text-white text-sm hover:bg-white hover:bg-opacity-20 transition duration-200">Contact</a>
                </div>
                <a href="#" class="hidden lg:flex items-center gap-2 text-white hover:text-pink-500 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
                <button class="lg:hidden" x-on:click="mobileNavOpen = !mobileNavOpen">
                    <svg width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="56" height="56" rx="28" fill="white"></rect>
                        <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </div>
        </div>
    </nav>
    <div :class="{ 'hidden': !mobileNavOpen, 'block': mobileNavOpen }" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
        <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
        <nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
            <div class="flex items-center justify-between">
                <a href="#" class="inline-block">
                    <img src="vista-assets/images/logos/vista-logo-dark.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>
            <ul class="flex flex-col gap-12 py-12 my-12">
                <li>
                    <a href="#" class="text-sm font-medium">Home</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Features</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Pricing</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">About</a>
                </li>
                <li>
                    <a href="#" class="text-sm font-medium">Contact</a>
                </li>
            </ul>
            <div class="text-center">
                <a href="#" class="inline-flex items-center gap-2 text-black hover:text-opacity-80 transition duration-200">
                    <span class="text-sm font-medium">Sign in</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </a>
            </div>
        </nav>
    </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger-dark">
    <div class="container"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo.svg" alt=""></a>
      <button class="d-lg-none navbar-burger p-1 border-0 bg-white bg-opacity-10 rounded-pill ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link bg-white bg-opacity-10 rounded-pill" href="#">Home</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Features</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Pricing</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link rounded-pill" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block ms-auto"><a class="btn btn-sm pe-3 d-flex align-items-center btn-outline-light border-0" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" 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 pt-6 pb-10 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="vista-assets/images/logos/vista-logo-dark.svg" alt=""></a><a class="navbar-close" href="#">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M23.2 8.79999L8.80005 23.2M8.80005 8.79999L23.2 23.2" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="pt-20 pb-12">
        <ul class="nav flex-column">
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Home</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Features</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Pricing</a></li>
          <li class="nav-item mb-4"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">About</a></li>
          <li class="nav-item"><a class="btn btn-outline-light text-start border-0 w-100 text-dark" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="mt-auto"><a class="btn w-100 btn-danger-dark" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </nav>
  </div>
</section>