@inherits LayoutComponentBase

@* Layout chrome ported from ScadaLink CentralUI: no separate top bar — brand sits
   at the top of the side rail. The sidebar itself is the interactive island
   (<NavSidebar/>); MainLayout stays statically rendered so the Body RenderFragment
   doesn't have to cross an interactive boundary. *@

<div class="app-shell d-flex flex-column flex-lg-row">
    @* Hamburger toggle: visible only on viewports <lg.
       Bootstrap collapse JS lives in bootstrap.bundle.min.js (loaded in App.razor). *@
    <button class="btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#sidebar-collapse"
            aria-controls="sidebar-collapse"
            aria-expanded="false"
            aria-label="Toggle navigation">
        &#9776;
    </button>

    <div class="collapse d-lg-block" id="sidebar-collapse">
        <NavSidebar />
    </div>

    <main class="page">
        @Body
    </main>
</div>