amics/resources/views/partials/navbar.antlers.html

<nav class="navbar navbar-expand-lg navbar-custom px-6 py-3 fixed-top">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
      aria-controls="offcanvasExample">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse navbar-innner-container d-none d-lg-block" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="/">
        <img src="../../assets/images/amics-logo.png" width="150">
      </a>
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="gap: 20px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="/pricing">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Whats' new
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link text-decoration-underline" aria-current="page" href="/register">Start Free Trial</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!--Off Canvas-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <a class="navbar-brand" href="#">
      <img src="../../assets/images/amics-logo.png" width="150">
    </a>
    <button type="button" class="btn-close text-light" data-bs-dismiss="offcanvas" aria-label="Close"
      style="color: #FFF;"></button>
  </div>
  <div class="offcanvas-body">

    <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="gap: 20px;">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#collapseExample" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-controls="collapseExample">
          Link with href
        </a>
        <div class="collapse" id="collapseExample">
          <div class="card card-body px-0">
            <ul class="p-0" style="list-style: none;">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="collapse" href="#collapseExample2" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-controls="collapseExample">
          What's New
        </a>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body px-0">
            <ul class="p-0" style="list-style: none;">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link text-decoration-underline" aria-current="page" href="#">Start Free Trial</a>
      </li>
    </ul>

  </div>
</div>