Bulma Navigation (Horizontal) Components in Yofte library

<section class="is-relative has-background-light is-clipped">
  <nav class="navbar has-background-light" style="border-bottom: 1px solid #CFD5E2">
    <div class="navbar-brand is-align-items-center">
      <a class="navbar-item is-size-4" href="#">
        <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
      <a class="navbar-burger navbar-menu-open is-flex-touch is-align-items-center is-justify-content-center" role="button">
        <svg class="has-text-dark" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 15.4688H0V17.7207H18V15.4688Z" fill="currentColor"></path>
          <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="currentColor"></path>
          <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
    <div class="navbar-menu ml-10 is-align-items-center">
      <div class="navbar-start" style="width: 100%;">
        <div class="mr-10 pl-8 pr-6 is-hidden-touch-only is-hidden-desktop-only is-hidden-widescreen-only is-flex-fullhd has-background-white is-align-items-center" style="border-radius: 6px;">
          <svg class="mr-2 is-flex-shrink-0" style="width: 24px; height: 18px;" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.5 17.1309L12.5042 11.9551" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M7.27524 13.8672C10.8789 13.8672 13.8002 10.945 13.8002 7.34033C13.8002 3.73565 10.8789 0.813477 7.27524 0.813477C3.67159 0.813477 0.750244 3.73565 0.750244 7.34033C0.750244 10.945 3.67159 13.8672 7.27524 13.8672Z" stroke="black" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <input class="input mr-2 has-background-white" style="border: none; box-shadow: none;" type="text" placeholder="">
          <select class="pl-6 py-3 has-background-white" style="border: none; border-left: 1px solid #E8E8E8; box-shadow: none;" name="">
            <option>All items</option>
            <option>Collection</option>
            <option>Option</option>
          </select>
        </div>
        <a class="navbar-item ml-auto" href="#">Category</a><a class="navbar-item" href="#">Collection</a><a class="navbar-item" href="#">Story</a><a class="navbar-item mr-auto" href="#">Brand</a>
      </div>
      <div class="navbar-end">
        <a class="navbar-item is-flex" href="#">
          <svg width="23" height="20" viewbox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </a>
        <a class="navbar-item is-flex is-align-items-center" href="#">
          <svg class="mr-3" width="23" height="23" viewbox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span class="is-inline-flex is-align-items-center is-justify-content-center has-background-white has-text-weight-bold" style="width: 24px; height: 24px; border-radius: 50% !important;">3</span>
        </a>
        <a class="navbar-item pr-10 is-flex is-align-items-center is-align-self-stretch has-text-weight-bold" href="#">
          <svg class="mr-3" width="32" height="31" viewbox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign In</span>
        </a>
      </div>
    </div>
  </nav>
  <div class="navbar-side has-mw-sm is-hidden is-fixed is-top-0 is-bottom-0 is-left-0 is-right-0" style="z-index: 9999; width: 100%;">
    <div class="navbar-backdrop is-fixed is-top-0 is-bottom-0 is-left-0 has-background-dark is-fullwidth" style="height: 100%; width: 100%; opacity: 25%;"></div>
    <nav class="px-6 py-6 is-flex is-relative has-background-white is-flex-direction-column is-fullwidth" style="height: 100%; width: 100%;">
      <div class="mb-8 is-flex is-align-items-center">
        <a class="mr-auto is-size-4" href="#">
          <img class="image" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <button class="navbar-close button p-0" style="border: none;">
          <svg style="width: 8px; height: 8px;" width="10" height="10" viewbox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00002 1L1 9.00002M1.00003 1L9.00005 9.00002" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
      <div class="mb-8 is-flex is-justify-content-space-between">
        <a class="navbar-item p-0 is-inline-flex is-align-items-center has-text-weight-bold" href="#">
          <svg class="mr-3" width="32" height="31" viewbox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.0006 16.3154C19.1303 16.3154 21.6673 13.799 21.6673 10.6948C21.6673 7.59064 19.1303 5.07422 16.0006 5.07422C12.871 5.07422 10.334 7.59064 10.334 10.6948C10.334 13.799 12.871 16.3154 16.0006 16.3154Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M24.4225 23.8963C23.6678 22.3507 22.4756 21.0445 20.9845 20.1298C19.4934 19.2151 17.7647 18.7295 15.9998 18.7295C14.2349 18.7295 12.5063 19.2151 11.0152 20.1298C9.52406 21.0445 8.33179 22.3507 7.57715 23.8963" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <span>Sign In</span>
        </a>
        <div class="is-flex is-align-items-center">
          <a class="navbar-item p-0 mr-6" href="#">
            <svg width="23" height="20" viewbox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11.4998 19.2061L2.70115 9.92527C1.92859 9.14433 1.41864 8.1374 1.24355 7.04712C1.06847 5.95684 1.23713 4.8385 1.72563 3.85053V3.85053C2.09464 3.10462 2.63366 2.45803 3.29828 1.96406C3.9629 1.47008 4.73408 1.14284 5.5483 1.00931C6.36252 0.875782 7.19647 0.939779 7.98144 1.19603C8.7664 1.45228 9.47991 1.89345 10.0632 2.48319L11.4998 3.93577L12.9364 2.48319C13.5197 1.89345 14.2332 1.45228 15.0182 1.19603C15.8031 0.939779 16.6371 0.875782 17.4513 1.00931C18.2655 1.14284 19.0367 1.47008 19.7013 1.96406C20.3659 2.45803 20.905 3.10462 21.274 3.85053V3.85053C21.7625 4.8385 21.9311 5.95684 21.756 7.04712C21.581 8.1374 21.071 9.14433 20.2984 9.92527L11.4998 19.2061Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="navbar-item p-0 is-flex is-align-items-center" href="#">
            <svg class="mr-3" width="23" height="23" viewbox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.1159 8.72461H2.50427C1.99709 8.72461 1.58594 9.12704 1.58594 9.62346V21.3085C1.58594 21.8049 1.99709 22.2074 2.50427 22.2074H18.1159C18.6231 22.2074 19.0342 21.8049 19.0342 21.3085V9.62346C19.0342 9.12704 18.6231 8.72461 18.1159 8.72461Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.34473 6.34469V4.95676C6.34473 3.85246 6.76252 2.79338 7.5062 2.01252C8.24988 1.23165 9.25852 0.792969 10.3102 0.792969C11.362 0.792969 12.3706 1.23165 13.1143 2.01252C13.858 2.79338 14.2758 3.85246 14.2758 4.95676V6.34469" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
            <span class="is-inline-block has-background-light is-rounded has-text-weight-bold has-text-centered" style="width: 24px; height: 24px; border-radius: 50% !important;">3</span>
          </a>
        </div>
      </div>
      <input class="input mb-10 has-background-light" style="border: none;" type="search" placeholder="Search">
      <ul class="mb-0 is-size-4">
        <li class="mb-8"><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Category</a></li>
        <li class="mb-8"><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Collection</a></li>
        <li class="mb-8"><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Story</a></li>
        <li><a class="has-text-dark has-text-weight-semibold is-size-4" href="#">Brand</a></li>
      </ul>
    </nav>
  </div>
</section>