@inherits LayoutComponentBase
@using Blazored.Toast

<header class="top-bar">
    <a href="/" class="brand">
        <svg class="brand-mark" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
            <path d="M70,25 C65,18 58,15 50,15 C30,15 15,30 15,50 C15,70 30,85 50,85 C58,85 65,82 70,75 L62,68 C58,72 54,74 50,74 C37,74 27,63 27,50 C27,37 37,26 50,26 C54,26 58,28 62,32 L70,25 Z" fill="#0096c7" />
            <circle cx="85" cy="50" r="8" fill="#4dabff" opacity="0.9" />
            <circle cx="75" cy="80" r="5" fill="#4dabff" opacity="0.6" />
            <circle cx="75" cy="20" r="5" fill="#4dabff" opacity="0.6" />
        </svg>
            
        <div class="text-column">
            <span class="brand-main">Lite<span class="brand-accent">Charms</span></span>
            <span class="payoff-line">Shop Admin Console</span>
        </div>
    </a>
</header>

<NavShelf IsOpen="isShelfExpanded" IsOpenChanged="OnShelfStateChanged" @rendermode="InteractiveServer" />

<div class="page-wrapper @(isShelfExpanded ? "shifted-canvas" : "")">
    <main>
        @Body
    </main>
</div>

<BlazoredToasts />

@code {
    private bool isShelfExpanded { get; set; } = false;

    private void OnShelfStateChanged(bool newState)
    {
        isShelfExpanded = newState;

        // This forces Blazor to re-evaluate the DOM, instantly applying
        // the "shelf-open" and "shifted-canvas" CSS utility classes.
        StateHasChanged();
    }
}