Layout = "top" with RightContentRender

[michaelcsikos]

Hi @ElderJames when Layout = "top" the RightContentRender is ignored. How can we get this to work?

[michaelcsikos]

OK, it looks like we have to use <HeaderContentRender> with <Menu> instead of MenuData.

[Aamirkhan10218]

hi @michaelcsikos have you fixed this issue . is there any workaround available?

[michaelcsikos]

Hi @Aamirkhan10218

This is what worked for me:

<AntDesign.ProLayout.BasicLayout>
    <HeaderContentRender>
        <MenuDark Mode = "MenuMode.Horizontal" MenuData = "MenuData" />
    </HeaderContentRender>
    <RightContentRender>
        <RightContent />
    </RightContentRender>
    <ChildContent>
        @Body
    </ChildContent>
</AntDesign.ProLayout.BasicLayout>

@code
{
    private MenuDataItem[] MenuData { get; set; } = { };

    protected async override Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var list  = new List<MenuDataItem>();

       // Set up menu options based on current user privileges, etc

        var menuContacts = new MenuDataItem
        {
            Path = "/contact/list",
            Name = "Contacts",
            Key  = "Contacts",
            Icon = "team",

            Children = new[]
            {
                new MenuDataItem
                {
                    Path = "/contact/list",
                    Name = "All contacts",
                    Key  = "All contacts",
                },
                new MenuDataItem
                {
                    Path = "/contact/list/staff",
                    Name = "Staff",
                    Key  = "Staff",
                },
                new MenuDataItem
                {
                    Path = "/contact/list/customer",
                    Name = "Customers",
                    Key  = "Customers",
                },
            },
        };

        list.Add(menuContacts);

        MenuData = list.ToArray();
    }
}

[Aamirkhan10218]

@michaelcsikos could you please mention you Ant Design version because I am unable to find MenuDark?

[michaelcsikos]

@Aamirkhan10218 Oh, sorry, that's one of my razor files. It just sets the NavTheme = MenuTheme.Dark as follows:

@* MenuDark.razor *@

@inherits BaseMenu
@{
    base.BuildRenderTree(__builder);
}

@code
{
    protected override void OnInitialized()
    {
        NavTheme = MenuTheme.Dark;

        base.OnInitialized();
    }
}