Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Treeview

- Components
- Treeview

## Basic Treeview

Code

A tree view component presents a hierarchical list. Check out code for detail of usage.

- Application
  - Chrome
  - VS Code
  - Mail App
  - Firefox
- Document
  - React App
    - src
      - Components
        - Button.js
        - Treeview.js
        - Menu.js
        - Avatar.js

      <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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <span>Application</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <span>Document</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </button>
                <span>React App</span>
              </div>
              <ul x-show="expanded" x-collapse class="pl-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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                          clip-rule="evenodd"
                        ></path>
                      </svg>
                    </button>
                    <span>src</span>
                  </div>
                  <ul x-show="expanded" x-collapse class="pl-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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                              clip-rule="evenodd"
                            ></path>
                          </svg>
                        </button>
                        <span>Components</span>
                      </div>
                      <ul x-show="expanded" x-collapse class="pl-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>

## Advanced Treeview

Code

A tree view component presents a hierarchical list. Check out code for detail of usage.

- Design
  - Web Apps
  - CRM Apps
    - LMS App
    - Ecommerce
    - Dashboard
  - Desktop Apps
  - Mobile Apps
- Backup Files
- Documents
  - Sheets
  - Slides
  - Words
- Application
  - Web Apps
  - CRM Apps
    - LMS App
    - Ecommerce
    - Dashboard
  - Desktop Apps
  - Mobile Apps
- Archives

      <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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-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"
              ></path>
            </svg>
            <span>Design</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-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="mr-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"
                  ></path>
                </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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </button>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-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"
                  ></path>
                </svg>
                <span>CRM Apps</span>
              </div>
              <ul x-show="expanded" x-collapse class="pl-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="mr-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"
                      ></path>
                    </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="mr-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"
                      ></path>
                    </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="mr-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"
                      ></path>
                    </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="mr-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"
                  ></path>
                </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="mr-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"
                  ></path>
                </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="mr-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"
              ></path>
            </svg>
            <span>Backup Files</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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-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"
              ></path>
            </svg>
            <span>Documents</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-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="mr-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"
                  ></path>
                </svg>
                <span>Sheets</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="mr-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"
                  ></path>
                </svg>
                <span>Slides</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="mr-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"
                  ></path>
                </svg>
                <span>Words</span>
              </div>
            </li>
          </ul>
        </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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clip-rule="evenodd"
                ></path>
              </svg>
            </button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-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"
              ></path>
            </svg>
            <span>Application</span>
          </div>
          <ul x-show="expanded" x-collapse class="pl-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="mr-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"
                  ></path>
                </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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </button>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-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"
                  ></path>
                </svg>
                <span>CRM Apps</span>
              </div>
              <ul x-show="expanded" x-collapse class="pl-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="mr-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"
                      ></path>
                    </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="mr-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"
                      ></path>
                    </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="mr-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"
                      ></path>
                    </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="mr-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"
                  ></path>
                </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="mr-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"
                  ></path>
                </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="mr-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"
              ></path>
            </svg>
            <span>Archives</span>
          </div>
        </li>
      </ul>