maraphon-app/src/Marathon.UI/MainLayout.razor

@inherits LayoutComponentBase
@implements IDisposable
@inject ThemeState ThemeState
@inject LocaleState LocaleState
@inject IStringLocalizer<SharedResource> L
@inject IOptionsMonitor<WorkerOptions> Workers

<MudThemeProvider IsDarkMode="@ThemeState.IsDark" Theme="@_theme" />
<MudPopoverProvider />
<MudDialogProvider FullWidth="true" MaxWidth="MaxWidth.Small" CloseOnEscapeKey="true" />
<MudSnackbarProvider />

<div class="m-app-frame @(_drawerOpen ? "is-drawer-open" : null)" data-theme="@(ThemeState.IsDark ? "dark" : "light")">

    <header class="m-appbar">
        <MudIconButton
            Icon="@Icons.Material.Outlined.Menu"
            Color="Color.Inherit"
            Edge="Edge.Start"
            OnClick="ToggleDrawer"
            aria-label="@L["Nav.Section.Analysis"]" />

        <AppBrand Class="m-rise m-rise-1" />

        <div class="m-appbar__spacer"></div>

        <div class="m-appbar__tools m-rise m-rise-2">
            <span class="m-capture-pill" data-test="capture-pill"
                  aria-label="@L["Scraping.Aria"]" title="@L["Scraping.Aria"]"
                  style="display:inline-flex; align-items:center; gap:7px; font-family:var(--m-font-mono); font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.12em; color:@(Capturing ? "var(--m-c-positive)" : "var(--m-c-ink-soft)");">
                <span style="width:8px; height:8px; border-radius:50%; background:@(Capturing ? "var(--m-c-positive)" : "var(--m-c-ink-soft)");"></span>
                @(Capturing ? L["Scraping.On"] : L["Scraping.Off"])
            </span>
            <LocaleSwitcher />
            <ThemeToggle />
        </div>
    </header>

    <MudDrawer
        @bind-Open="_drawerOpen"
        Anchor="Anchor.Left"
        Variant="DrawerVariant.Responsive"
        ClipMode="DrawerClipMode.Always"
        Elevation="0"
        Width="248px"
        Color="Color.Dark">
        <NavBody />
    </MudDrawer>

    <main class="m-main">
        <CascadingValue Value="ThemeState">
            <CascadingValue Value="LocaleState">
                @Body
            </CascadingValue>
        </CascadingValue>
    </main>

    <footer class="m-footer">
        <span class="m-kicker">Marathon Odds Lab</span>
        <span style="font-family: var(--m-font-mono); font-size: 0.6875rem; color: var(--m-c-ink-soft); letter-spacing: 0.16em; text-transform: uppercase;">
            Phase 5 · Editorial-Quant · v0.1
        </span>
    </footer>
</div>

<style>
    .m-app-frame {
        display: grid;
        grid-template-rows: 60px 1fr 36px;
        height: 100vh;
        overflow: hidden;
    }

    .m-appbar {
        display: flex;
        align-items: center;
        gap: var(--m-space-3);
        padding: 0 clamp(var(--m-space-3), 2vw, var(--m-space-5));
        border-bottom: 1px solid var(--m-c-rule);
        background: var(--m-c-paper);
        z-index: 10;
    }

    .m-appbar__spacer { flex: 1; }
    .m-appbar__tools { display: inline-flex; gap: var(--m-space-3); align-items: center; }

    .m-main {
        position: relative;
        z-index: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* MudDrawer is positioned fixed/absolute by Mud's CSS — push main content
       right by the drawer's width (248px) so the sidebar doesn't overlap.
       Same shift on the appbar tools row so the brand isn't covered. */
    .m-app-frame.is-drawer-open .m-main,
    .m-app-frame.is-drawer-open .m-footer {
        padding-left: 248px;
        transition: padding-left 200ms ease;
    }
    .m-app-frame.is-drawer-open .m-appbar {
        padding-left: calc(248px + clamp(var(--m-space-3), 2vw, var(--m-space-5)));
        transition: padding-left 200ms ease;
    }
    @@media (max-width: 720px) {
        /* On narrow viewports the drawer becomes a temporary overlay anyway. */
        .m-app-frame.is-drawer-open .m-main,
        .m-app-frame.is-drawer-open .m-footer,
        .m-app-frame.is-drawer-open .m-appbar { padding-left: 0; }
    }

    .m-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 clamp(var(--m-space-3), 2vw, var(--m-space-5));
        border-top: 1px solid var(--m-c-rule);
        background: var(--m-c-paper);
    }

    [data-theme="dark"] .m-appbar,
    [data-theme="dark"] .m-footer {
        background: var(--m-c-paper-2);
        border-color: var(--m-c-rule);
    }
</style>

@code {
    private bool _drawerOpen = true;
    private MudBlazor.MudTheme _theme = Theme.MarathonTheme.Build();
    private IDisposable? _workerOptionsListener;

    // "Capturing" when any of the primary pollers is enabled in config.
    private bool Capturing =>
        Workers.CurrentValue.LivePollerEnabled
        || Workers.CurrentValue.UpcomingPollerEnabled
        || Workers.CurrentValue.AnomalyDetectionEnabled;

    protected override void OnInitialized()
    {
        ThemeState.OnChange += StateHasChanged;
        LocaleState.OnChange += StateHasChanged;
        // Reflect Settings toggles live without requiring a navigation.
        _workerOptionsListener = Workers.OnChange(_ => InvokeAsync(StateHasChanged));
    }

    private void ToggleDrawer() => _drawerOpen = !_drawerOpen;

    public void Dispose()
    {
        ThemeState.OnChange -= StateHasChanged;
        LocaleState.OnChange -= StateHasChanged;
        _workerOptionsListener?.Dispose();
    }
}