MainLayout.razor

@namespace MudExtensions.Docs.Shared
@inject NavigationManager NavigationManager
@inject MudExtensionsDocsService DocsService
@inherits LayoutComponentBase

<style>
    @(_fontPicker?.ImportFontStyleText(font))
</style>
<MudScrollbar Width="8" Color="primary" HoverColor="secondary" />

<CascadingValue Value="this" IsFixed="true">
    <MudLayout>
    <MudAppBar Class="background-gradient-animation mud-width-full" Style="background: var(--mud-palette-background) !important;" Dense="true" Elevation="0">
            <MudIconButton Class="ms-n2" Icon="@Icons.Material.Filled.Menu" OnClick="@(() => _drawerOpen = !_drawerOpen)"></MudIconButton>
            <MudText Style="color: var(--mud-palette-text-primary); cursor: pointer" @onclick="@(() => NavigationManager.NavigateTo("/"))"><b>MudExtensions</b></MudText>
            <MudSpacer />
            <div class="d-flex">
                <MudToggleIconButton @bind-Toggled="IsDarkMode" Style="color: var(--mud-palette-text-primary) !important" Icon="@Icons.Material.Filled.DarkMode" ToggledIcon="@Icons.Material.Filled.LightMode"/>
                <MudIconButton Style="color: var(--mud-palette-text-primary) !important" Icon="@Icons.Material.Filled.Settings" OnClick="@ToggleOpen"/>
                @if (_open == true)
                {
                    <MudPopover Class="pa-4" Open="_open" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight" Style="width: 320px; height: 400px">
                        <MudStack Justify="Justify.SpaceBetween">
                            <MudSwitchM3 @bind-Value="_showFontPicker" Color="Color.Secondary" Label="Font Picker"/>
                            <MudSlider T="int" Value="_borderRadius" ValueChanged="BorderRadiusChanged" Min="0" Max="50" Color="Color.Secondary" ValueLabel="true" />
                            <MudText Class="mt-n2" Typo="Typo.subtitle2">Border Radius</MudText>
                            <MudButton Class="mud-width-full" OnClick="@ToggleOpen">Close</MudButton>
                        </MudStack>
                    </MudPopover>
                }
            </div>
    </MudAppBar>
    <MudDrawer @bind-Open="@_drawerOpen" Elevation="1" Variant="@DrawerVariant.Responsive" ClipMode="DrawerClipMode.Docked">
    <MudNavMenu Color="Color.Secondary" Bordered="true">
        <MudNavLink Href="/api">Api</MudNavLink>
        <MudNavGroup Title="Components">
            @foreach (var comp in DocsService.GetAllComponentInfo())
            {
                <MudNavLink Href="@($"/{comp.Title?.ToLowerInvariant()}")">@comp.Title?.Replace("Mud", "")</MudNavLink>
            }
        </MudNavGroup>
        <MudNavGroup Title="Not Documented">
            <MudNavLink>FontPicker</MudNavLink>
            <MudNavLink>Toggle</MudNavLink>
        </MudNavGroup>
    </MudNavMenu>
</MudDrawer>
    <MudMainContent Class="pt-13">
        @if (_showFontPicker)
        {
            <div class="pa-4">
                <MudFontPicker @ref="@_fontPicker" Label="Font Picker" StaticInputText="true" FontChanged="FontChanged" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" Clearable="true" MaxItems="null"/>
            </div>
        }
        @Body
    </MudMainContent>
</MudLayout>
</CascadingValue>

<style>
    .appbar-style {
        background: var(--mud-palette-secondary) !important;
        transition: background-color .6s;
    }
    
    .appbar-style:hover {
        background: linear-gradient(to right, var(--mud-palette-primary) , var(--mud-palette-secondary)) !important;
    }

    .appbar-style .reverse-color {
        color: var(--mud-palette-primary) !important;
        transition: background-color .6s;
    }

        .appbar-style:hover .reverse-color {
            color: var(--mud-palette-secondary) !important;
        }
</style>

<MudThemeProvider Theme="_theme" @bind-IsDarkMode="IsDarkMode" DefaultScrollbar="true" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

@code {
    MudFontPicker _fontPicker = new();
    string font = "Roboto";
    internal bool IsDarkMode = false;
    bool _open = false;
    bool _drawerOpen = false;
    bool _showFontPicker = false;
    int _borderRadius = 12;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            if (_fontPicker != null)
            {
                _fontPicker.Font = "Roboto";
                FontChanged();
            }
        }
    }

    MudTheme _theme = new MudTheme()
        {
            LayoutProperties = new LayoutProperties()
            {
                DefaultBorderRadius = $"12px"
            },
        };

    private void FontChanged()
    {
        font = _fontPicker?.Font ?? "Roboto";


        _theme = new MudTheme()
        {
            LayoutProperties = new LayoutProperties()
            {
                DefaultBorderRadius = $"{_borderRadius}px"
            },

            Typography = new Typography()
            {
                Default = new DefaultTypography()
                {
                    FontFamily = new[] { font, "Roboto", "Poppins", "Helvetica", "sans-serif" }
                },
            }
        };
        StateHasChanged();
    }

    private void ToggleOpen()
    {
        _open = !_open;
    }

    private void BorderRadiusChanged(int val)
    {
        _borderRadius = val;
        FontChanged();
    }

    private string Version
        {
            get
            {
                var v = typeof(MudAnimate).Assembly.GetName().Version;
                return $"v {v?.Major}.{v?.Minor}.{v?.Build}";
            }
        }
}