htmluser-interfaceblazormudblazor

MudDrawer does not close when bound to state


I got an MudDrawer which looks like this:

<MudDrawer Open="GlobaleState.IsDrawerOpen">
    <MudDrawerHeader>
        <MudText Typo="Typo.h5" Class="mt-1">Title</MudText>
    </MudDrawerHeader>
    <NavMenu />
    <MudSpacer />
    <MudDivider />
    <MudContainer>
        <MudToggleIconButton />
    </MudContainer>
</MudDrawer>

It is Toggled by the AppBar:

<MudAppBar>
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="OnIsDrawerOpenChanged" />
</MudAppBar>

This works fine in normal display size. But on mobile or with strong zoom it is not possible to deactive the MudDrawer Overlay. When I had two-way-binding without the State it worked.

enter image description here

Wheres the problem? Is a Binding missing?


Solution

  • The overlay is part of the MudDrawer component.

    When the overlay is clicked it sends the new value as false

    So in order for the drawer to close when the overlay is clicked you need to handle the OpenChanged EventCallback.

    <MudDrawer Open="GlobaleState.IsDrawerOpen" OpenChanged="HandleOverlayClick">
        ///
    </MudDrawer>
    @code
    {
        void HandleOverlayClick(bool newValue)
        {
            if(!newValue) 
            {
                //handle your GlobaleState.IsDrawerOpen
            }
        }
    }