<!--  Mobilenavbar -->
<div class="offcanvas offcanvas-start pt-0" data-bs-scroll="true" tabindex="-1" id="mobilenavbar"
  aria-labelledby="offcanvasWithBothOptionsLabel">
  <nav class="sidebar-nav scroll-sidebar">
    <div class="offcanvas-header justify-content-between">
      <a href="@@webRoot" class="text-nowrap logo-img">
        <img src="@@webRoot/assets/images/logos/logo-icon.svg" alt="Logo" />
      </a>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body pt-0" data-simplebar style="height: calc(100vh - 80px)">
      <ul id="sidebarnav">
        <li class="sidebar-item">
          <a class="sidebar-link has-arrow ms-0" href="javascript:void(0)" aria-expanded="false">
            <span>
              <iconify-icon icon="solar:slider-vertical-line-duotone" class="fs-7"></iconify-icon>
            </span>
            <span class="hide-menu">Apps</span>
          </a>
          <ul aria-expanded="false" class="collapse first-level my-3 ps-3">
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-primary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:chat-line-bold-duotone" class="fs-7 text-primary"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">Chat Application</h6>
                  <span class="fs-11 d-block text-body-color">New messages arrived</span>
                </div>
              </a>
            </li>
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-secondary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:bill-list-bold-duotone" class="fs-7 text-secondary"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">Invoice App</h6>
                  <span class="fs-11 d-block text-body-color">Get latest invoice</span>
                </div>
              </a>
            </li>
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-warning-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:phone-calling-rounded-bold-duotone"
                    class="fs-7 text-warning"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">Contact Application</h6>
                  <span class="fs-11 d-block text-body-color">2 Unsaved Contacts</span>
                </div>
              </a>
            </li>
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-danger-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:letter-bold-duotone" class="fs-7 text-danger"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">Email App</h6>
                  <span class="fs-11 d-block text-body-color">Get new emails</span>
                </div>
              </a>
            </li>
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-success-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:user-bold-duotone" class="fs-7 text-success"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">User Profile</h6>
                  <span class="fs-11 d-block text-body-color">learn more information</span>
                </div>
              </a>
            </li>
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-primary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:calendar-minimalistic-bold-duotone"
                    class="fs-7 text-primary"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">Calendar App</h6>
                  <span class="fs-11 d-block text-body-color">Get dates</span>
                </div>
              </a>
            </li>
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-secondary-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:smartphone-2-bold-duotone"
                    class="fs-7 text-secondary"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">Contact List Table</h6>
                  <span class="fs-11 d-block text-body-color">Add new contact</span>
                </div>
              </a>
            </li>
            <li class="sidebar-item py-2">
              <a href="javascript:void(0)" class="d-flex align-items-center">
                <div class="bg-warning-subtle rounded round-48 me-3 d-flex align-items-center justify-content-center">
                  <iconify-icon icon="solar:notes-bold-duotone" class="fs-7 text-warning"></iconify-icon>
                </div>
                <div class="d-inline-block">
                  <h6 class="mb-0 bg-hover-primary">Notes Application</h6>
                  <span class="fs-11 d-block text-body-color">To-do and Daily tasks</span>
                </div>
              </a>
            </li>
        </li>
      </ul>
    </div>
  </nav>
</div>