LgNotificationMenuItem

LgNotificationMenuItem<TItem> adds a notification entry to the Lagoon menu with icon, unread counter, and by default a dropdown list synchronized by INotificationService<TItem>.

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill" />

• Namespace: Lagoon.UI.Components
• Inherits from: LgComponentBase
• Interfaces: IDisposable
• NuGet package: Lagoon.UI.Notifications

Usage

Demonstration

Try notifications in the Lagoon showcase.

Standard menu

The menu initializes the client service, loads local notifications, opens the SignalR connection, and displays the number of unread notifications in the menu item tag.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill"
                        OnNotificationClick="OnNotificationClickAsync" />

MenuConfiguration.razor.cs

public partial class MenuConfiguration
{
    // Handles the click on a notification displayed in the menu.
    private Task OnNotificationClickAsync(NotificationEventArgs<NotificationVm> args)
    {
        return Task.CompletedTask;
    }
}

Filter and customize items

FilterPredicate allows you to create multiple menu entries from the same collection. ItemIconName and ItemCssClass customize each item rendered by the standard template.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#OrderNotifications"
                        IconName="@IconNames.All.BellFill"
                        FilterPredicate="IsOrderNotification"
                        ItemIconName="GetItemIconName"
                        ItemCssClass="GetItemCssClass" />

MenuConfiguration.razor.cs

public partial class MenuConfiguration
{
    // Keeps only the business stream displayed by this menu.
    private bool IsOrderNotification(NotificationVm notification)
    {
        return notification.Category == "order";
    }

    // Selects the icon displayed in each notification card.
    private string GetItemIconName(NotificationVm notification)
    {
        return IconNames.All.BellFill;
    }

    // Adds a class based on the notification's read state.
    private string GetItemCssClass(NotificationVm notification)
    {
        return notification.IsRead ? "notification-read" : "notification-unread";
    }
}

Customize rendering with NotificationTemplate

When NotificationTemplate is specified, the standard rendering of LgNotificationItem is replaced by your template.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill">
    <NotificationTemplate Context="notification">
        <LgCard>
            <div class="notification-template-title">
                @notification.Title.CheckTranslate()
            </div>
            <div class="notification-template-description">
                @notification.Description.CheckTranslate()
            </div>
        </LgCard>
    </NotificationTemplate>
</LgNotificationMenuItem>

Add actions at the bottom of the menu

ChildContent is displayed below the notifications list.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm" Text="#Notifications">
    <ChildContent>
        <LgButton Text="#SeeAllNotifications"
                  Tooltip="#SeeAllNotificationsTooltip"
                  IconName="@IconNames.All.EyeFill"
                  Uri="notifications" />
    </ChildContent>
</LgNotificationMenuItem>

Redirect without dropdown detail

If ShowMenuDetail is false, the component passes Uri and Target to the underlying menu item instead of displaying the list in a submenu.

MenuConfiguration.razor

<LgNotificationMenuItem TItem="NotificationVm"
                        Text="#Notifications"
                        IconName="@IconNames.All.BellFill"
                        ShowMenuDetail="false"
                        Uri="notifications"
                        Target="_self" />

Properties

Name	Type	Default	Declared in	Description
ChildContent	RenderFragment	null	LgNotificationMenuItem<TItem>	Content displayed below the notifications list.
NotificationTemplate	RenderFragment<TItem>	null	LgNotificationMenuItem<TItem>	Custom rendering template for each notification.
ShowMenuDetail	bool	true	LgNotificationMenuItem<TItem>	Indicates whether the notifications list is displayed in the submenu.
Target	string	null	LgNotificationMenuItem<TItem>	Name of the target window when ShowMenuDetail is false.
Uri	string	null	LgNotificationMenuItem<TItem>	URI opened by the menu item when ShowMenuDetail is false.
IconName	string	IconNames.All.BellFill	LgNotificationMenuItem<TItem>	Icon of the menu entry.
Text	string	null	LgNotificationMenuItem<TItem>	Text displayed in the menu.
OnNotificationClick	EventCallback<NotificationEventArgs<TItem>>	default	LgNotificationMenuItem<TItem>	Callback invoked when a notification in the menu is clicked.
FilterPredicate	Func<TItem, bool>	null	LgNotificationMenuItem<TItem>	Filter applied to the notifications collection before sorting.
ItemIconName	Func<TItem, string>	null	LgNotificationMenuItem<TItem>	Function that returns the icon for each notification.
ItemCssClass	Func<TItem, string>	null	LgNotificationMenuItem<TItem>	Function that returns the CSS class for each notification.

Events

Name	Type	Description
OnNotificationClick	EventCallback<NotificationEventArgs<TItem>>	Triggered when the user clicks on a notification rendered by the menu.

NotificationEventArgs<TItem> exposes the Item property, which contains the clicked notification.

Endpoint contract

Uri does not call the notifications API: it is a navigation route passed to LgMenuItem only when ShowMenuDetail is false. The page or endpoint corresponding to this URI must therefore exist in the application. Synchronization exchanges are still managed by INotificationService<TItem> via the internal api/-/notification controller and hubs/notification hub.

Accessibility

Provide Text with a translated key to give an explicit label to the menu entry. The numeric tag is calculated from unread notifications; it complements the information but should not replace the label. In a NotificationTemplate, keep a text title and keyboard-accessible actions.

Related components

• LgNotificationCounter
• LgNotificationItem