Collapse

<ul class="min-w-48">
    <li>
        <div class="flex items-center gap-2 px-2 py-1 cursor-pointer rounded-lg hover:bg-indigo-50 hover:text-indigo-600"
             @onclick="@ToggleExpansion">
            <LumexIcon Icon="@FolderIcon" />
            <span>src</span>
        </div>
        <LumexCollapse As="ul"
                       Expanded="@_expanded"
                       Class="ml-4">
            @foreach( var dir in _directories )
            {
                <li class="flex items-center gap-2 px-2 py-1 cursor-pointer rounded-lg hover:bg-indigo-50 hover:text-indigo-600">
                    <LumexIcon Icon="@Icons.Rounded.Folder" />
                    <span>@dir</span>
                </li>
            }
        </LumexCollapse>
    </li>
</ul>

@code {
    private readonly string[] _directories = new string[]
    {
        "app", "pages", "components"
    };

    private bool _expanded = true;

    private string FolderIcon => _expanded
        ? Icons.Rounded.FolderOpen
        : Icons.Rounded.Folder;

    private void ToggleExpansion()
    {
        _expanded = !_expanded;
    }
}