@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<PageTitle>HeartTrack</PageTitle>

<div class="page">
    <div class="sidebar @NavMenuCssClass" @onclick="ToggleNavMenu">
        <NavMenu />
    </div>

    <main>

        <MudAppBar Color="Color.Primary" Fixed="false">
            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" @onclick="ToggleNavMenu">
                <span class="navbat-toggler-icon"></span>
            </MudIconButton>
            <MudSpacer />
            <MudIconButton Icon="@Icons.Material.Filled.ManageAccounts" Color="Color.Inherit" Edge="Edge.End" @onclick="ToggleProfilMenu"/>
        </MudAppBar>
        @* <div class="top-row px-4 auth">
            @* <div class="container-fluid toggler-container">
                <button title="Navigation menu" class="navbar-toggler custom-toggler" @onclick="ToggleNavMenu">
                    <span class="navbat-toggler-icon"></span>
                </button>
            </div> *@
            @* Messages, notifs et pp compte à mettre *@
            @* <div class="top-row px-4">
                <CultureSelector />
                <button type="button" class="btn btn-link ml-md-auto" @onclick="@LogoutClick">Logout</button>
            </div> 
        </div> *@

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
    private void ToggleProfilMenu()
    {
        
    }
}