Sidebar

<aside
  flowbiteSidebar
  class="relative! z-[0]! h-full!">
  <div flowbiteSidebarContent>
    <li>
      <a flowbiteSidebarItem>
        <flowbite-icon name="chartPie" />
        Dashboard
      </a>
    </li>
    <li>
      <a flowbiteSidebarItem>
        <flowbite-icon name="drawSquare" />
        Kanban
      </a>
    </li>
    <li>
      <a flowbiteSidebarItem>
        <flowbite-icon name="inbox" />
        Inbox
      </a>
    </li>
    <li>
      <a flowbiteSidebarItem>
        <flowbite-icon name="users" />
        Users
      </a>
    </li>
    <li>
      <a flowbiteSidebarItem>
        <flowbite-icon name="cart" />
        Products
      </a>
    </li>
    <li>
      <a flowbiteSidebarItem>Sign In</a>
    </li>
    <li>
      <a flowbiteSidebarItem>Sign Up</a>
    </li>
  </div>
</aside>
<div class="h-full w-full overflow-scroll">
  <button flowbiteSidebarToggle>
    <flowbite-icon
      name="barsFromLeft"
      class="size-10 stroke-2" />
  </button>

  <div class="p-4">
    <div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
      @for (i of [0, 1]; track $index) {
        <div class="mb-4 grid grid-cols-3 gap-4">
          <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
            <p class="text-2xl text-gray-400 dark:text-gray-500">
              <svg
                class="h-3.5 w-3.5"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 18 18">
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 1v16M1 9h16"></path>
              </svg>
            </p>
          </div>
          <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
            <p class="text-2xl text-gray-400 dark:text-gray-500">
              <svg
                class="h-3.5 w-3.5"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 18 18">
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 1v16M1 9h16"></path>
              </svg>
            </p>
          </div>
          <div class="flex h-24 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
            <p class="text-2xl text-gray-400 dark:text-gray-500">
              <svg
                class="h-3.5 w-3.5"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 18 18">
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 1v16M1 9h16"></path>
              </svg>
            </p>
          </div>
        </div>
        <div
          class="mb-4 flex h-48 items-center justify-center rounded-sm bg-gray-50 dark:bg-gray-800">
          <p class="text-2xl text-gray-400 dark:text-gray-500">
            <svg
              class="h-3.5 w-3.5"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 18 18">
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M9 1v16M1 9h16"></path>
            </svg>
          </p>
        </div>
      }
    </div>
  </div>
</div>