I'm new to Blazor with Telerik and i'm having trouble creating a "top-level" notification layout.
I'm using a Drawer for a menu and would like a top-level notification component at the same level or above this Drawer component.
I'm using this as an example: https://github.com/telerik/blazor-ui/tree/master/notification/single-instance-per-app
But when I try to implementation something similar I end up with multiple @Body fragments in my MainLayout as seen below and in turn the content is duplicated.
Although the cascading Notification stuff works nice :)
I figure I'm missing something basic perhaps about encapsulating these into Blazor components? or something related to layouts?
Thanks,
Ed
<TelerikRootComponent>
<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@IconName.Menu"></TelerikButton>
<img src="https://www.qat.com/wp-content/uploads/2015/03/qat-global-logo-s.png" align="middle" />
<CultureChooser />
<TelerikNotification @ref="@Notification.Instance"
HorizontalPosition="@NotificationHorizontalPosition.Right"
VerticalPosition="@NotificationVerticalPosition.Top"
Class="big-notification">
</TelerikNotification>
<CascadingValue IsFixed="true" Value="@Notification">
<div class="content px-4">
@Body
</div>
</CascadingValue>
<TelerikDrawer @ref="@DrawerRef" Data="@NavigablePages" Expanded="@Expanded" MiniMode="true" Mode="@DrawerMode.Push"
SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
ExpandedChanged="((bool newValue) => ExpandedChangedHandler(newValue))">
<Content>
@Body
</Content>
</TelerikDrawer>
</TelerikRootComponent>