50 lines
2.1 KiB
Plaintext
50 lines
2.1 KiB
Plaintext
@inherits LayoutComponentBase
|
|
|
|
@* Header, main and footer are plain block children of <body>, which is the page's
|
|
scroll root. The header is position:sticky and, because it is NOT a flex/grid
|
|
child (a stretched flex item never sticks -- it fills its cell and unsticks
|
|
immediately), it pins to the top and stays there while the page scrolls. The
|
|
footer is kept at the bottom on short pages by a min-height on <main>, not by a
|
|
flex wrapper -- see MainLayout.razor.css. *@
|
|
<header class="site-header">
|
|
<div class="header-inner">
|
|
<a class="brand" href="/">Elternbeirat IGMH</a>
|
|
|
|
@* CSS-only mobile menu: the hidden checkbox holds the open/closed
|
|
state, the label is the hamburger button, and :checked reveals the
|
|
nav below (see MainLayout.razor.css). No JavaScript, no @@rendermode
|
|
-- works under static SSR. *@
|
|
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
|
|
<label for="nav-toggle" class="nav-toggle-label" aria-label="Menü öffnen und schließen">
|
|
<span class="nav-toggle-bar"></span>
|
|
</label>
|
|
|
|
<nav class="main-nav">
|
|
@* The home link comes from PocketBase like every other entry (the
|
|
"home" page carries location "header"), so it is rendered by the
|
|
loop below -- no separate hard-coded home link, which would show
|
|
up twice next to the PocketBase one. *@
|
|
@foreach (var link in _header)
|
|
{
|
|
<NavLink href="@link.Href" Match="@(link.Href == "/" ? NavLinkMatch.All : NavLinkMatch.Prefix)">@link.Title</NavLink>
|
|
}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="content">
|
|
@Body
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="footer-inner">
|
|
<span>Elternbeirat der IGMH</span>
|
|
<nav class="footer-nav">
|
|
@foreach (var link in _footer)
|
|
{
|
|
<a href="@link.Href">@link.Title</a>
|
|
}
|
|
</nav>
|
|
</div>
|
|
</footer>
|