CODEWITHSUNDEEP
htmluser-interfaceblazormudblazor
sampa
sampa

Reputation: 639

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?

Upvotes: 0

Views: 740

Answers (1)

RBee
RBee

Reputation: 4902

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
        }
    }
}

Upvotes: 1

Related Questions