Scrolling like a desktop app
A mail client. ScrollMode.Main makes the shell fill the window and scrolls only the message list, so the header, the folders and the footer never move.
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>
{
// Links within this example: ?view= in its own address, so they stay here.
private string To(string? page) => Navigation.GetUriWithQueryParameter("view", page);
}