@using Syncfusion.Blazor

<SfMediaQuery @bind-ActiveBreakPoint="currentBreakpoint"></SfMediaQuery>

<h3>Current Breakpoint: @currentBreakpoint</h3>

@if (currentBreakpoint == "Small")
{
    <p>You are viewing on a mobile device</p>
}
else if (currentBreakpoint == "Medium")
{
    <p>You are viewing on a tablet</p>
}
else
{
    <p>You are viewing on a desktop</p>
}

@code {
    private string currentBreakpoint { get; set; }
}

Small → Vertical row layout, hide non-essential columns
Medium → Adaptive mode enabled
Large → Horizontal layout, all columns visible

Small → Collapse navigation to hamburger menu
Large → Show full navigation bar

Small → 1-column layout
Medium → 2-column layout
Large → 3-column layout

MainLayout → Provides activeBreakpoint to all pages
Child Pages → Use CascadingParameter to access breakpoint
Result → Entire app responds to screen size changes

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <MobileLayout />
}
else if (bp == "Medium")
{
    <TabletLayout />
}
else
{
    <DesktopLayout />
}

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@{
    var pageSize = bp == "Small" ? 10 : 25;
    var allowPaging = bp != "Small";
}

<SfGrid PageSettings="@new GridPageSettings { PageSize = pageSize }">
    ...
</SfGrid>

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <button @onclick="ToggleMenu">☰ Menu</button>
}
else
{
    <nav>Full Navigation Bar</nav>
}