Jade Nav

  <x-jade-nav class="mb-4" :links="[
    [
      'class' => 'text-stripe-100 fs-5 fw-bolder',
      'title' => 'LOGO',
      'href' => '#',
    ],
    [
      'title' => 'Dropdown',
      'slot' => 'slot1',
    ],
    [
      'title' => 'Dropdown',
      'slot' => 'slot2',
    ],
    [
      'title' => 'Dropdown',
      'slot' => 'slot3',
    ],
    [
      'title' => 'Link',
      'href' => '#',
    ],
    [
      'class' => 'ms-md-auto',
      'title' => 'Link',
      'href' => '#',
    ],
  ]">
    <x-slot name="slot1">
      <div class="px-4 py-3"{!! $agent->isMobile() ? '' : ' style="width:320px"' !!}>
        <h6 class="fw-bold text-uppercase mt-2">Dropdown</h6>
        <div class="row">
          <div class="col-6">
            <ul class="nav flex-column">
              <li class="nav-item">
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
              </li>
            </ul>
          </div>
          <div class="col-6">
            <ul class="nav flex-column">
              <li class="nav-item">
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </x-slot>

    <x-slot name="slot2">
      <div class="px-4 py-3"{!! $agent->isMobile() ? '' : ' style="width:480px"' !!}>
        <h6 class="fw-bold text-uppercase mt-2">Dropdown</h6>
        <div class="row">
          <div class="col-4">
            <ul class="nav flex-column">
              <li class="nav-item">
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
              </li>
            </ul>
          </div>
          <div class="col-4">
            <ul class="nav flex-column">
              <li class="nav-item">
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
              </li>
            </ul>
          </div>
          <div class="col-4">
            <ul class="nav flex-column">
              <li class="nav-item">
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
                <x-link class="nav-link" href="#" text="Link"/>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </x-slot>

    <x-slot name="slot3">
      <div class="px-4 py-3">
        <h6 class="fw-bold text-uppercase mt-2">Dropdown</h6>
        <ul class="nav flex-column">
          <li class="nav-item">
            <x-link class="nav-link" href="#" text="Link"/>
            <x-link class="nav-link" href="#" text="Link"/>
            <x-link class="nav-link" href="#" text="Link"/>
            <x-link class="nav-link" href="#" text="Link"/>
          </li>
        </ul>
      </div>
    </x-slot>
  </x-jade-nav>