@inject NotificationService NotificationService

<RadzenLayout style="position: relative; grid-template-areas: 'rz-header rz-header' 'rz-sidebar rz-body'">
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>

    <!-- Place RadzenFab component first or after the Header in RadzenLayout. -->
    <RadzenFab Icon="directions" ButtonStyle="ButtonStyle.Base" Shade="Shade.Darker" Click=@(args => OnClick("FAB has just been clicked.")) />
    <RadzenFab Style="--rz-fab-inset-block-end: 6rem;" Icon="my_location" ButtonStyle="ButtonStyle.Base" Shade="Shade.Lighter" Click=@(args => OnClick("FAB has just been clicked.")) />

    <RadzenSidebar Responsive="false" @bind-Expanded="@sidebarExpanded" style="position: absolute; z-index: 3">
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Icon="home" />
            <RadzenPanelMenuItem Text="Users" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            Body
        </div>
    </RadzenBody>
    @if (sidebarExpanded)
    {
    <div @onclick="@(() => sidebarExpanded = false)" class="rz-dialog-mask" style="position: absolute; z-index: 2"></div>
    }
</RadzenLayout>

@code {
    bool sidebarExpanded = false;

    private void OnClick(string text)
    {
        NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Info, Summary = "RadzenFAB Clicked", Detail = text });
    }
}