Drop Down On Image Click In MudBlazor

Question

I am creating a user login page after success login the user image is displaying in the appbar.

I want to implement functionality in such a way that when i click on image logout option should appear in the drop down along with FAQ menu.

@inherits LayoutComponentBase
@using ProfitBookingApp.Client.Components

<MyMudThemeProvider />
<MyMudProviders />

<MudLayout>
    <MudAppBar>
        <MudText Typo="Typo.h5" Class="ml-3">Portfolio</MudText>
        <MudSpacer />
        <MudAvatar>
            <MudImage Src="images/mony.jpg" ></MudImage>
        </MudAvatar>
    </MudAppBar>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

Please let me know if this is possible in Mudblazor

Thanks

Answer 1

There are various examples in the MudBlazor documentation for Custom Activators for MudMenu

MudMenu Custom Activator

In case for your MudAvatar you would implement it as:

<MudMenu>
    <ActivatorContent>
        <MudAvatar Image="images/mony.jpg" />
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>

MudBlazor snippet