tailwind-ai/application_ui/navigation/sidebar_navigation/with_expandable_sections.html

<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<div
    class="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6"
>
    <div class="flex h-16 shrink-0 items-center">
        <img
            src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
            alt="Your Company"
            class="h-8 w-auto"
        />
    </div>
    <nav class="flex flex-1 flex-col">
        <ul role="list" class="flex flex-1 flex-col gap-y-7">
            <li>
                <ul role="list" class="-mx-2 space-y-1">
                    <li>
                        <!-- Current: "bg-gray-50", Default: "hover:bg-gray-50" -->
                        <a
                            href="#"
                            class="block rounded-md bg-gray-50 py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700"
                            >Dashboard</a
                        >
                    </li>
                    <li>
                        <button
                            type="button"
                            command="--toggle"
                            commandfor="sub-menu-1"
                            class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
                        >
                            <svg
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                data-slot="icon"
                                aria-hidden="true"
                                class="size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
                            >
                                <path
                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                                    clip-rule="evenodd"
                                    fill-rule="evenodd"
                                />
                            </svg>
                            Teams
                        </button>
                        <el-disclosure id="sub-menu-1" hidden class="contents">
                            <ul class="mt-1 px-2">
                                <li>
                                    <a
                                        href="#"
                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
                                        >Engineering</a
                                    >
                                </li>
                                <li>
                                    <a
                                        href="#"
                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
                                        >Human Resources</a
                                    >
                                </li>
                                <li>
                                    <a
                                        href="#"
                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
                                        >Customer Success</a
                                    >
                                </li>
                            </ul>
                        </el-disclosure>
                    </li>
                    <li>
                        <button
                            type="button"
                            command="--toggle"
                            commandfor="sub-menu-2"
                            class="flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
                        >
                            <svg
                                viewBox="0 0 20 20"
                                fill="currentColor"
                                data-slot="icon"
                                aria-hidden="true"
                                class="size-5 shrink-0 not-in-aria-expanded:text-gray-400 in-aria-expanded:rotate-90 in-aria-expanded:text-gray-500"
                            >
                                <path
                                    d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
                                    clip-rule="evenodd"
                                    fill-rule="evenodd"
                                />
                            </svg>
                            Projects
                        </button>
                        <el-disclosure id="sub-menu-2" hidden class="contents">
                            <ul class="mt-1 px-2">
                                <li>
                                    <a
                                        href="#"
                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
                                        >GraphQL API</a
                                    >
                                </li>
                                <li>
                                    <a
                                        href="#"
                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
                                        >iOS App</a
                                    >
                                </li>
                                <li>
                                    <a
                                        href="#"
                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
                                        >Android App</a
                                    >
                                </li>
                                <li>
                                    <a
                                        href="#"
                                        class="block rounded-md py-2 pr-2 pl-9 text-sm/6 text-gray-700 hover:bg-gray-50"
                                        >New Customer Portal</a
                                    >
                                </li>
                            </ul>
                        </el-disclosure>
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
                            >Calendar</a
                        >
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
                            >Documents</a
                        >
                    </li>
                    <li>
                        <a
                            href="#"
                            class="block rounded-md py-2 pr-2 pl-10 text-sm/6 font-semibold text-gray-700 hover:bg-gray-50"
                            >Reports</a
                        >
                    </li>
                </ul>
            </li>
            <li class="-mx-6 mt-auto">
                <a
                    href="#"
                    class="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
                >
                    <img
                        src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                        alt=""
                        class="size-8 rounded-full bg-gray-50"
                    />
                    <span class="sr-only">Your profile</span>
                    <span aria-hidden="true">Tom Cook</span>
                </a>
            </li>
        </ul>
    </nav>
</div>