Since lesson 2.5.1, the Kladde has had one layout: MainLayout with header, navigation and footer. It applies to every page, the contact
list included. That won’t fit for long. The contacts are the office’s data, not public pages; from module 2.6 on, only people who are signed
in will see them. Visitors, on the other hand, should find the home page and the appointment booking without being distracted by internal
links.
So in this lesson the Kladde gets two layouts: a public one and one for the internal area. Both have a navigation that shows where you are,
and a skip link that keyboard and screen reader users use to skip the navigation. Along the way you meet NavigationManager, the service
that knows at which address a page is currently running.
A layout is a component with @Body
A layout is an ordinary component with two special features. It inherits from LayoutComponentBase, and it outputs @Body at one place.
LayoutComponentBase brings along the parameter Body of type RenderFragment, so the same thing as ChildContent from lesson 2.5.2,
just under a different name. The page appears at the place of @Body.
This is what the Kladde’s layout looks like after lesson 2.5.1, shortened:
@inherits LayoutComponentBase
<header>
<nav aria-label="Main navigation">…</nav>
</header>
<main>
@Body
</main>
<footer>…</footer>
What wraps the layout around the page is in Routes.razor:
<RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
RouteView renders the page that the router found and wraps a layout around it. DefaultLayout is the layout for every page that doesn’t
name one itself. So a layout isn’t a frame that every page has to include, but one that it gets as long as it doesn’t say otherwise.
Layouts apply only to pages, that is, components with @page. A building block like ContactCard has no layout; it sits in a page, and
the page sits in the layout.