<ul class="space-y-1 font-inter font-medium">
    <li x-data="{expanded:false}">
      <div
        tabindex="0"
        :class="expanded && 'text-slate-800 dark:text-navy-100'"
        class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && '-rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
        <span>Application</span>
      </div>
      <ul x-show="expanded" x-collapse class="pr-4">
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>Chrome</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>VS Code</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>Mail App</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="flex size-5 items-center justify-center"></div>
            <span>Firefox</span>
          </div>
        </li>
      </ul>
    </li>
    <li x-data="{expanded:true}">
      <div
        tabindex="0"
        :class="expanded && 'text-slate-800 dark:text-navy-100'"
        class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && '-rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
        <span>Document</span>
      </div>
      <ul x-show="expanded" x-collapse class="pr-4">
        <li x-data="{expanded:true}">
          <div
            tabindex="0"
            :class="expanded && 'text-slate-800 dark:text-navy-100'"
            class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <button
              @click="expanded = !expanded"
              class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5 transition-transform"
                :class="expanded && '-rotate-90'"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
            <span>React App</span>
          </div>
          <ul x-show="expanded" x-collapse class="pr-4">
            <li x-data="{expanded:true}">
              <div
                tabindex="0"
                :class="expanded && 'text-slate-800 dark:text-navy-100'"
                class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <button
                  @click="expanded = !expanded"
                  class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="size-4.5 transition-transform"
                    :class="expanded && '-rotate-90'"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                      clip-rule="evenodd"
                    />
                  </svg>
                </button>
                <span>src</span>
              </div>
              <ul x-show="expanded" x-collapse class="pr-4">
                <li x-data="{expanded:true}">
                  <div
                    tabindex="0"
                    :class="expanded && 'text-slate-800 dark:text-navy-100'"
                    class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                  >
                    <button
                      @click="expanded = !expanded"
                      class="btn size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="size-4.5 transition-transform"
                        :class="expanded && '-rotate-90'"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                          clip-rule="evenodd"
                        />
                      </svg>
                    </button>
                    <span>کامپوننت‌ها</span>
                  </div>
                  <ul x-show="expanded" x-collapse class="pr-4">
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Button.js</span>
                      </div>
                    </li>
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Treeview.js</span>
                      </div>
                    </li>
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Menu.js</span>
                      </div>
                    </li>
                    <li>
                      <div
                        tabindex="0"
                        class="flex cursor-pointer items-center  space-x-1.5 rounded-sm px-2 py-1 tracking-wide outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
                      >
                        <div
                          class="flex size-5 items-center justify-center"
                        ></div>
                        <span>Avatar.js</span>
                      </div>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
                
              

                
  <ul class="space-y-1 font-inter font-medium">
    <li x-data="{expanded:false}">
      <div
        tabindex="0"
        class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <button
          @click="expanded = !expanded"
          class="btn mr-1 size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="size-4.5 transition-transform"
            :class="expanded && '-rotate-90'"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ml-3 size-6 text-warning"
          viewBox="0 0 20 20"
          fill="currentColor"
        >
          <path
            d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
          />
        </svg>
        <span>Design</span>
      </div>
      <ul x-show="expanded" x-collapse class="pr-4">
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ml-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              />
            </svg>
            <span>Web Apps</span>
          </div>
        </li>
        <li x-data="{expanded:false}">
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <button
              @click="expanded = !expanded"
              class="btn mr-1 size-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5 transition-transform"
                :class="expanded && '-rotate-90'"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fill-rule="evenodd"
                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                  clip-rule="evenodd"
                />
              </svg>
            </button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ml-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              />
            </svg>
            <span>CRM Apps</span>
          </div>
          <ul x-show="expanded" x-collapse class="pr-4">
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="ml-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  />
                </svg>
                <span>LMS App</span>
              </div>
            </li>
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="ml-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  />
                </svg>
                <span>Ecommerce</span>
              </div>
            </li>
            <li>
              <div
                tabindex="0"
                class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
              >
                <div
                  class="mr-1 flex size-5 items-center justify-center"
                ></div>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="ml-3 size-6 text-warning"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
                  />
                </svg>
                <span>Dashboard</span>
              </div>
            </li>
          </ul>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ml-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              />
            </svg>
            <span>Desktop Apps</span>
          </div>
        </li>
        <li>
          <div
            tabindex="0"
            class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
          >
            <div class="mr-1 flex size-5 items-center justify-center"></div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="ml-3 size-6 text-warning"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
              />
            </svg>
            <span>Mobile Apps</span>
          </div>
        </li>
      </ul>
    </li>
    <li>
      <div
        tabindex="0"
        class="flex cursor-pointer items-center rounded-sm px-2 py-1 tracking-wide text-slate-800 outline-hidden transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
      >
        <div class="mr-1 flex size-5 items-center justify-center"></div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="ml-3 size-6 text-warning"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
          />
        </svg>
        <span>Archives</span>
      </div>
    </li>
  </ul>