Navigation (Horizontal) Components in Trizzle library

<section class="relative" x-data="{ mobileNavOpen: false }">
  <nav class="flex items-center p-8 bg-gray-700 mb-3">
    <div class="w-full xl:w-auto px-2 xl:mr-12">
      <div class="flex items-center justify-between">
        <a class="inline-flex items-center h-8" href="#">
          <img src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <div class="xl:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="text-gray-400 hover:text-gray-300 focus:outline-none">
            <svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <title>Mobile menu</title>
              <path d="M1 2H19C19.2652 2 19.5196 1.89464 19.7071 1.70711C19.8946 1.51957 20 1.26522 20 1C20 0.734784 19.8946 0.48043 19.7071 0.292893C19.5196 0.105357 19.2652 0 19 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2ZM19 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H19C19.2652 12 19.5196 11.8946 19.7071 11.7071C19.8946 11.5196 20 11.2652 20 11C20 10.7348 19.8946 10.4804 19.7071 10.2929C19.5196 10.1054 19.2652 10 19 10ZM19 5H1C0.734784 5 0.48043 5.10536 0.292893 5.29289C0.105357 5.48043 0 5.73478 0 6C0 6.26522 0.105357 6.51957 0.292893 6.70711C0.48043 6.89464 0.734784 7 1 7H19C19.2652 7 19.5196 6.89464 19.7071 6.70711C19.8946 6.51957 20 6.26522 20 6C20 5.73478 19.8946 5.48043 19.7071 5.29289C19.5196 5.10536 19.2652 5 19 5Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2 mr-auto">
      <ul class="flex items-center">
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mr-10"><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mr-10">
          <a class="inline-flex items-center text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">
            <span>Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li><a class="inline-block text-sm font-semibold text-gray-300 hover:text-gray-200" href="#">Customers</a></li>
      </ul>
    </div>
    <div class="hidden xl:block w-full md:w-auto px-2">
      <div class="flex flex-wrap items-center -mb-2">
        <a class="inline-block mb-2 mr-6 text-gray-400 hover:text-gray-300" href="#">
          <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3L10 7.88L2 3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V5.28L9.48 9.85C9.63202 9.93777 9.80446 9.98397 9.98 9.98397C10.1555 9.98397 10.328 9.93777 10.48 9.85L18 5.28V13Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="inline-block mb-2 mr-8 text-gray-400 hover:text-gray-300" href="#">
          <svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="group inline-flex mb-2 items-center" href="#">
          <img class="h-8 w-8 mr-3 rounded-full object-cover" src="trizzle-assets/images/avatar-men.png" alt="">
          <h4 class="text-white font-extrabold tracking-wide mr-4">John Doe</h4>
          <span class="text-gray-400 group-hover:text-gray-300">
            <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="2" 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-3/4 lg:w-80 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 opacity-50"></div>
    <nav class="relative flex flex-col p-8 h-full w-full bg-gray-700 overflow-y-auto">
      <div class="flex items-center justify-between mb-8">
        <a class="inline-flex items-center" href="#">
          <img class="h-10" src="trizzle-assets/logos/trizzle-logo.svg" alt="">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg class="h-6 w-6 text-gray-400 cursor-pointer" 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="mb-10">
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Overview</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Analytics</a></li>
        <li class="mb-10"><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Products</a></li>
        <li class="mb-10">
          <a class="inline-flex w-full items-center justify-between text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">
            <span>Orders</span>
            <div class="flex w-5 h-5 ml-2 items-center justify-center text-xs text-white bg-blue-500 rounded-full">4</div>
          </a>
        </li>
        <li><a class="inline-block text-lg font-semibold text-gray-300 hover:text-gray-200" href="#">Customers</a></li>
      </ul>
      <a class="flex mt-auto items-center justify-between" href="#">
        <div class="flex items-center">
          <img class="h-8 w-8 mr-3 rounded-full" src="trizzle-assets/images/avatar-men-2.png" alt="">
          <h5 class="leading-none font-semibold text-gray-100">John Doe</h5>
        </div>
        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1 1L5 5L9 1" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </a>
    </nav>
  </div>
</section>

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-light">
    <div class="container" type="button" aria-controls="nav01" aria-expanded="false"><a class="navbar-brand" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a>
      <div class="collapse navbar-collapse" id="nav01">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Overview</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" href="#">Analytics</a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" hre="" f="#">Products</a></li>
          <li class="nav-item"><a class="nav-link d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
              <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
          <li class="nav-item"><a class="nav-link" aria-current="page" hre="" f="#">Customers</a></li>
        </ul>
        <div class="d-none d-xl-flex align-items-center ms-auto"><a class="btn border-0 p-0 me-6" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 4H5C4.20435 4 3.44129 4.31607 2.87868 4.87868C2.31607 5.44129 2 6.20435 2 7V17C2 17.7956 2.31607 18.5587 2.87868 19.1213C3.44129 19.6839 4.20435 20 5 20H19C19.7956 20 20.5587 19.6839 21.1213 19.1213C21.6839 18.5587 22 17.7956 22 17V7C22 6.20435 21.6839 5.44129 21.1213 4.87868C20.5587 4.31607 19.7956 4 19 4ZM5 6H19C19.2652 6 19.5196 6.10536 19.7071 6.29289C19.8946 6.48043 20 6.73478 20 7L12 11.88L4 7C4 6.73478 4.10536 6.48043 4.29289 6.29289C4.48043 6.10536 4.73478 6 5 6ZM20 17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H5C4.73478 18 4.48043 17.8946 4.29289 17.7071C4.10536 17.5196 4 17.2652 4 17V9.28L11.48 13.85C11.632 13.9378 11.8045 13.984 11.98 13.984C12.1555 13.984 12.328 13.9378 12.48 13.85L20 9.28V17Z" fill="#3D485B"></path>
            </svg></a><a class="btn border-0 p-0 me-8" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="#3D485B"></path>
            </svg></a><a class="btn border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
      <button class="d-block d-xl-none navbar-burger navbar-toggler py-1 px-2 border-0 rounded-1">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
    </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-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark-light bg-opacity-25"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-8 pb-10 px-8 bg-dark-light overflow-auto">
      <div class="d-flex align-items-center justify-content-between mb-16"><a class="inline-flex items-center" href="#"><img class="img-fluid" src="trizzle-assets/logos/trizzle-logo.svg" alt=""></a><a class="navbar-close text-light" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
            <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" fill="currentColor"></path>
          </svg></a></div>
      <ul class="list-unstyled mb-10">
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Overview</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Analytics</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light" href="#">Products</a></li>
        <li class="mb-10"><a class="btn p-0 btn-link fs-7 text-light d-flex align-items-center" aria-current="page" href="#"><span>Orders</span>
            <div class="ms-2 d-flex align-items-center justify-content-center bg-primary rounded-pill text-white fs-10" style="width: 22px; height: 22px;">4</div></a></li>
        <li><a class="btn p-0 btn-link text-light" href="#">Customers</a></li>
      </ul><a class="btn mt-auto border-0 d-flex align-items-center p-0" href="#"><img class="img-fluid" src="trizzle-assets/images/avatar-men.png" alt=""><span class="ms-3 me-4 fw-bold text-white">John Doe</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4 6L8 10L12 6" stroke="#3D485B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a>
    </nav>
  </div>
</section>