AppShell

@inject NavigationManager Navigation

@* The five parts in their places: the header across the top, the sidebar beside the main area,
   the aside on the other side and the footer at the bottom. Below 768px the sidebar becomes a
   drawer behind the menu button, and the aside hides (its Breakpoint, Md here; Lg by default). *@
<AppShell>
    <AppHeader>
        <SidebarToggle />
        <AppBrand Href="@To(null)" Icon="Lucide.Zap" Label="Acme" />
        <Box Grow />
        <IconButton Icon="Lucide.Bell" Label="Notifications" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    </AppHeader>

    <AppSidebar>
        <NavMenu>
            <NavItem Href="@To(null)" Icon="Lucide.Folder">Projects</NavItem>
            <NavItem Href='@To("team")' Icon="Lucide.Users">Team</NavItem>
            <NavItem Href='@To("settings")' Icon="Lucide.Settings">Settings</NavItem>
        </NavMenu>
    </AppSidebar>

    <AppMain>
        <Stack Gap="4" Padding="new() { Base = 4, Md = 8 }">
            <Heading Level="1" Size="TextSize.Xl2">Projects</Heading>
            <TextBlock Color="Color.Muted">The main area holds the page. It scrolls with the window, while the header stays at the top and the sidebar's links stay in view.</TextBlock>
            <Card Title="Website" Description="Deployed 12 minutes ago from main." />
            <Card Title="Course app" Description="Build failed on feature/quizzes." />
        </Stack>
    </AppMain>

    <AppAside Breakpoint="Breakpoint.Md" aria-label="Details">
        <Stack Gap="2">
            <TextBlock Size="TextSize.Sm" Weight="FontWeight.Semibold">Details</TextBlock>
            <TextBlock Size="TextSize.Sm" Color="Color.Muted">The aside sits on the side opposite the sidebar, and stays in view while the page scrolls.</TextBlock>
        </Stack>
    </AppAside>

    <AppFooter>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">© 2026 Acme</TextBlock>
    </AppFooter>
</AppShell>

@code {
    // Links within this example: ?view= in its own address, so they stay here.
    private string To(string? page) => Navigation.GetUriWithQueryParameter("view", page);
}

@inject NavigationManager Navigation

@* Variant layers the parts: Tinted tints the sidebar, Inset raises the main area as a panel in a
   tinted frame, Flat is one surface with lines between the parts, and Canvas tints the main area
   so cards stand out. The links above the cards set ?variant= in this example's address. *@
<AppShell Variant="Variant">
    <AppHeader>
        <SidebarToggle />
        <AppBrand Href="@View(null)" Icon="Lucide.Zap" Label="Acme" />
    </AppHeader>

    <AppSidebar>
        <NavMenu>
            <NavItem Href="@View(null)" Icon="Lucide.LayoutDashboard">Overview</NavItem>
            <NavItem Href='@View("reports")' Icon="Lucide.ChartColumn">Reports</NavItem>
            <NavItem Href='@View("settings")' Icon="Lucide.Settings">Settings</NavItem>
        </NavMenu>
    </AppSidebar>

    <AppMain>
        <Stack Gap="5" Padding="new() { Base = 4, Md = 8 }">
            <Heading Level="1" Size="TextSize.Xl2">@Variant</Heading>
            <nav aria-label="Variant">
                <NavMenu Orientation="Orientation.Horizontal">
                    <NavItem Href="@To(null)">Tinted</NavItem>
                    <NavItem Href='@To("inset")'>Inset</NavItem>
                    <NavItem Href='@To("flat")'>Flat</NavItem>
                    <NavItem Href='@To("canvas")'>Canvas</NavItem>
                </NavMenu>
            </nav>
            <Grid MinChildWidth="Length.Rem(12)" Gap="4">
                <Card Title="Visitors" Description="12,480 this week" />
                <Card Title="Sign-ups" Description="342 this week" />
            </Grid>
        </Stack>
    </AppMain>
</AppShell>

@code {
    [SupplyParameterFromQuery(Name = "variant")]
    private string? Picked { get; set; }

    private ShellVariant Variant =>
        Enum.TryParse<ShellVariant>(Picked, ignoreCase: true, out var variant) && Enum.IsDefined(variant) ? variant : ShellVariant.Tinted;

    // Links within this example, in its own address so they stay here: ?variant= for the look,
    // ?view= for the sidebar's pages.
    private string To(string? variant) => Navigation.GetUriWithQueryParameter("variant", variant);

    private string View(string? page) => Navigation.GetUriWithQueryParameter("view", page);
}

@using System.ComponentModel.DataAnnotations
@inject NavigationManager Navigation

@* A reading site with no sidebar. ContentWidth puts the header, the article and the footer on one
   centered column, so their edges line up, while the bars and their lines stay full width. *@
<AppShell Variant="ShellVariant.Flat" ContentWidth="Length.Rem(42)">
    <AppHeader>
        <AppBrand Href="@To(null)" Icon="Lucide.Zap" Label="Acme Journal" />
        <Box Grow />
        <SiteNav Label="Sections" Breakpoint="Breakpoint.Sm">
            <NavItem Href='@To("articles")'>Articles</NavItem>
            <NavItem Href='@To("guides")'>Guides</NavItem>
        </SiteNav>
        <IconButton Icon="Lucide.Search" Label="Search" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
    </AppHeader>

    <AppMain>
        <Stack Gap="5" PaddingY="new() { Base = 8, Md = 12 }">
            <TextBlock Size="TextSize.Xs" Weight="FontWeight.Semibold" Color="Color.Muted">ENGINEERING</TextBlock>
            <Heading Level="1" Size="TextSize.Xl3">How we review a rule before it goes live</Heading>
            <Row Gap="3" Align="Align.Center">
                <Avatar Name="Grace Hopper" Size="AvatarSize.Sm" />
                <TextBlock Size="TextSize.Sm" Color="Color.Muted">Grace Hopper · Oct 9, 2026 · 6 min read</TextBlock>
            </Row>
            <TextBlock>Every rule we ship decides real money. A wrong condition can hold a thousand honest refunds before anyone notices, so no rule goes live on one person's say-so.</TextBlock>
            <Heading Level="2" Size="TextSize.Xl">Start with a dry run</Heading>
            <TextBlock>A dry run replays last week's decisions through the new rule and lists what would have changed. Reviewers read that list before they read the rule: outcomes are what customers feel.</TextBlock>
            <Alert Title="One reviewer is not enough">Rules that change more than 1% of last week's outcomes need two approvals.</Alert>
        </Stack>
        @* A full-bleed band: the color spans the main area, the content stays on the column. *@
        <Section Bg="Color.FillSubtle">
            <Stack Gap="3">
                <Heading Level="2" Size="TextSize.Xl">Get the next article by email</Heading>
                <Form Model="Model" FormName="reading-newsletter" OnValidSubmit="() => _subscribed = true">
                    <TextField @bind-Value="Model!.Email" Type="TextFieldType.Email" Placeholder="you@example.com" HideLabel>
                        <EndAddon><Button Submit>Subscribe</Button></EndAddon>
                    </TextField>
                </Form>
                @if (_subscribed)
                {
                    <TextBlock Size="TextSize.Sm" Color="Color.Muted">Thanks, @Model!.Email is on the list.</TextBlock>
                }
            </Stack>
        </Section>
    </AppMain>

    <AppFooter>
        <Row Gap="4" Align="Align.Center" Wrap>
            <TextBlock Size="TextSize.Sm" Color="Color.Muted" Grow>© 2026 Acme</TextBlock>
            <TextBlock As="span" Size="TextSize.Sm"><Anchor Href='@To("rss")'>RSS</Anchor></TextBlock>
            <TextBlock As="span" Size="TextSize.Sm"><Anchor Href='@To("privacy")'>Privacy</Anchor></TextBlock>
        </Row>
    </AppFooter>
</AppShell>

@code {
    // Links within this example: ?view= in its own address, so they stay here.
    private string To(string? page) => Navigation.GetUriWithQueryParameter("view", page);

    [SupplyParameterFromForm(FormName = "reading-newsletter")]
    private Newsletter? Model { get; set; }

    private bool _subscribed;

    protected override void OnInitialized() => Model ??= new();

    public sealed class Newsletter
    {
        [Required(ErrorMessage = "Enter your email"), EmailAddress(ErrorMessage = "Enter an email like name@example.com"), Display(Name = "Email")]
        public string? Email { get; set; }
    }
}

@inject NavigationManager Navigation

@* A mail client that behaves like a desktop app: ScrollMode.Main fills the window and scrolls only
   the message list, so the header, the folders and the footer never move. *@
<AppShell ScrollMode="ShellScroll.Main">
    <AppHeader>
        <SidebarToggle />
        <AppBrand Href="@To(null)" Icon="Lucide.Mail" Label="Acme Mail" />
        <Box Grow />
        <Button StartIcon="Lucide.Send" Size="ControlSize.Sm">Compose</Button>
        <Avatar Name="Ada Lovelace" />
    </AppHeader>

    <AppSidebar Width="Length.Rem(14)">
        <NavMenu>
            <NavItem Href="@To(null)" Icon="Lucide.Inbox" Badge="4" BadgeAccent="Accent.Primary">Inbox</NavItem>
            <NavItem Href='@To("starred")' Icon="Lucide.Star">Starred</NavItem>
            <NavItem Href='@To("sent")' Icon="Lucide.Send">Sent</NavItem>
            <NavItem Href='@To("archive")' Icon="Lucide.Archive">Archive</NavItem>
            <NavItem Href='@To("trash")' Icon="Lucide.Trash">Trash</NavItem>
        </NavMenu>
    </AppSidebar>

    <AppMain>
        <Stack Gap="0">
            @foreach (var (sender, subject, time, unread) in Messages)
            {
                <Row Gap="3" Align="Align.Center" PaddingX="5" PaddingY="3" BorderBottom="1">
                    <Avatar Name="@sender" Size="AvatarSize.Sm" />
                    <Stack Gap="0" Grow MinWidth="Length.Px(0)">
                        <TextBlock Size="TextSize.Sm" Weight="@(unread ? FontWeight.Semibold : FontWeight.Normal)">@sender</TextBlock>
                        <TextBlock Size="TextSize.Sm" Color="Color.Muted" Truncate>@subject</TextBlock>
                    </Stack>
                    <TextBlock Size="TextSize.Xs" Color="Color.Muted">@time</TextBlock>
                </Row>
            }
        </Stack>
    </AppMain>

    <AppFooter>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">3.2 GB of 15 GB used · Synced 2 minutes ago</TextBlock>
    </AppFooter>
</AppShell>

@code {
    // Links within this example: ?view= in its own address, so they stay here.
    private string To(string? page) => Navigation.GetUriWithQueryParameter("view", page);
}