FluentNavGroup does not hide expanders when hosted inside the cusom control derived from FluentNavMenu

[xperiandri]

I have a custom component derived from FluentNavMenu

@inherits FluentNavMenu

<div id="@base.Id" @ref="@base.Element" @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" aria-label="@(base.Collapsible ? null : @Title)" role="menu" aria-expanded="@base.Expanded">
    <CascadingValue Value="@this" IsFixed="true">
        <div>
            @if (@HeaderContent is not null)
            {
                @HeaderContent
                <div class="separator"> </div>
            }

            @ChildContent
        </div>
        <div>
            <div class="separator"> </div>
            <div class="@(base.Expanded ? "bottom-actions-expanded" : "bottom-actions-collapsed")">


                @FooterContent
                @if (base.ExpanderContent is not null)
                {
                    @base.ExpanderContent
                }
                else
                {
                    var icon = Icon.FromImageUrl(
                    base.Expanded
                    ? "./_content/SkillGro.Teams.Components/img/expand.svg"
                    : "./_content/SkillGro.Teams.Components/img/collapse.svg");
                    <FluentButton Class="collapse-expand-button" Appearance="Appearance.Stealth" OnClick="ToggleExpandedAsync" Title="@(base.Expanded ? "Collapse" : "Expand")" IconEnd="@icon" />
                }
            </div>
        </div>
    </CascadingValue>
</div>

namespace SkillGro.Teams.Components;

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.FluentUI.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components.Utilities;

public partial class AzdoFluentNavMenu : FluentNavMenu
{
    internal string? ClassValue => new CssBuilder("fluent-nav-menu").AddClass(base.Class).AddClass("collapsed", () => !base.Expanded).Build();

    internal string? StyleValue => new StyleBuilder(base.Style).AddStyle("margin", base.Margin, !string.IsNullOrEmpty(base.Margin)).AddStyle("width", $"{base.Width}px", () => base.Expanded && base.Width.HasValue).AddStyle("width", "100%", () => base.Expanded && !base.Width.HasValue)
        .AddStyle("width", "40px", () => !base.Expanded)
        .AddStyle("min-width", "40px", () => !base.Expanded)
        .Build();

    /// <summary>
    /// Gets or sets the content to be rendered for the header.
    /// </summary>
    [Parameter]
    public RenderFragment? HeaderContent { get; set; }

    /// <summary>
    /// Gets or sets the content to be rendered for the footer near to collapse/expand button.
    /// </summary>
    [Parameter]
    public RenderFragment? FooterContent { get; set; }

    private Task ToggleExpandedAsync() => SetExpandedAsync(!base.Expanded);

    private async Task SetExpandedAsync(bool value)
    {
        if (value == base.Expanded)
        {
            return;
        }

        base.Expanded = value;
        if (base.ExpandedChanged.HasDelegate)
        {
            await base.ExpandedChanged.InvokeAsync(value);
        }

        base.StateHasChanged();
    }
}

Difference to the original CSS

.fluent-nav-menu {
    display: flex;
    flex-direction: column;
    height: 93vh;
    align-items: stretch;
    justify-content: space-between;
}

.bottom-actions-collapsed {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.bottom-actions-expanded {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

But when I collapse my control expanders do not disappear
Watch a screen recording

[xperiandri]

@vnbaaij any suggestions?

[vnbaaij]

Looks pretty nice! (except for the expanders 😉)

Those expand buttons (css class 'expand-collapse-button' ) are styled and defined in the FluentNavGroup. Maybe that component needs to be overriden too?
Sorry, but this goes way bit beyond what I had envisioned to do with that component. If you want to take it this far than might it perhaps not be easier/better to just copy all the NavMenu related code and adpat that then to your needs?