@using MudBlazor
@inherits LayoutComponentBase

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    <MudBreakpointProvider OnBreakpointChanged="OnBreakpointChanged"></MudBreakpointProvider>
    <MudAppBar Elevation="0">
        <MudIconButton 
            Icon="@Icons.Material.Filled.Menu" 
            Color="Color.Inherit" 
            Edge="Edge.Start" 
            OnClick="ToggleDrawer"
            Class="mud-hidden-md-up"/>
        <MudSpacer/>
        <MudText Typo="Typo.h6">Bimix</MudText>
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen"
               Anchor="Anchor.Start"
               Variant="@_drawerVariant"
               Elevation="1"
               ClipMode="DrawerClipMode.Always"
               Class="mud-width-250">
        <MudNavMenu>
            <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>
            <MudNavLink Href="/products" Icon="@Icons.Material.Filled.Inventory">Products</MudNavLink>
        </MudNavMenu>
    </MudDrawer>

    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-4">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code {

    private bool _drawerOpen = true;
    private DrawerVariant _drawerVariant = DrawerVariant.Persistent;

    void ToggleDrawer()
    {
        Console.WriteLine($"ToogleDrawer clickkk {DateTime.Now}");
        _drawerOpen = !_drawerOpen;
    }

    private void OnBreakpointChanged(Breakpoint breakpoint)
    {
        if (breakpoint < Breakpoint.Md)
        {
            _drawerVariant = DrawerVariant.Temporary;
            _drawerOpen = false;
        }
        else
        {
            _drawerVariant = DrawerVariant.Persistent;
            _drawerOpen = true;
        }
        
        StateHasChanged();
    }
}