SharpRSS/WebSharpRSS/Shared/CategoryGuide.razor

@using WebSharpRSS.Models
@using CodeHollow.FeedReader
<style>
    .cat-item {
    background: var(--background-color);
    tab-index: 0;
    width: 100%;
    display: flex;
    position: relative;
    box-sizing: border-box;
    text-align: start;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: flex-start;
    text-decoration: none;
    }
    .cat-item:hover {
    background: var(--hover-bg-color);
    }
    .cat-item-text {
    flex: 1 1 auto;
    min-width: 0;
    }
    .cat-item-icon {
    display: inline-flex;
    min-width: 56px;
    flex-shrink: 0;
    }
    
    .feed-item {
    background: var(--background-color);
    tab-index: 1;
    }
    .feed-item:hover {
    background: var(--hover-bg-color);
    }
</style>

<div>
    <MudText>@HeaderText</MudText>
    @foreach (CategoryGuideItem catItem in Categories)
    {
        <div>
            <div @onclick="@(() => CatItemClicked(catItem))" class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(catItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
                @*<MudListItem Icon="@catItem.CategoryIcon">@catItem.CategoryTitle</MudListItem>*@
                <div class="cat-item-icon">
                    <MudIcon Class="pointer-events-none" Icon="@catItem.CategoryIcon" Size="Size.Medium"/>
                </div>
                <div class="cat-item-text">
                    <MudText Class="pointer-events-none" Typo="Typo.subtitle1">@catItem.CategoryTitle</MudText>
                </div>
            </div>
            @* Feeds *@
            @if (catItem.IsExpanded && catItem.Feeds != null)
            {
                foreach (Feed feed in catItem.Feeds)
                {
                    <div class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor">
                        @* Items *@
                        <div @onclick="() => FeedItemClicked(feed)">
                            @* Image *@
                            <MudText Class="pointer-events-none">@feed.Title</MudText>
                        </div>
                    </div>
                }
            }
        </div>
    }
</div>

@code {
    [Parameter]
    public string HeaderText { get; set; }
    [Parameter]
    public HashSet<CategoryGuideItem> Categories { get; set; } = new HashSet<CategoryGuideItem>();
    [Parameter]
    public Action<CategoryGuideItem> HandleCat { get; set; }

    CategoryGuideItem? _selectedCategory;

    void CatItemClicked(CategoryGuideItem categoryItem)
    {
        categoryItem.IsExpanded = !categoryItem.IsExpanded;
        
        if (_selectedCategory != categoryItem)
        {
            if (_selectedCategory != null)
                _selectedCategory.IsSelected = false;
            _selectedCategory = categoryItem;
            _selectedCategory.IsSelected = true;
        }
        //TODO: Handle click!
        HandleCat(categoryItem);
    }

    void FeedItemClicked(Feed feed)
    {
        
    }

}