93 lines
4.0 KiB
Plaintext
93 lines
4.0 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">
|
|
@* Two-line lettering next to the signet: the body's name large, the
|
|
school small below it. One link, so the whole mark leads home. *@
|
|
<a class="brand" href="/">
|
|
<Signet />
|
|
<span class="brand-text">
|
|
<span class="brand-name">Elternbeirat</span>
|
|
<span class="brand-school">IGMH Mannheim</span>
|
|
</span>
|
|
</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" aria-label="Hauptmenü">
|
|
@* 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">
|
|
@* A soft wave as the transition from the page into the dark footer. Pure
|
|
decoration, so hidden from screen readers; it is filled with the footer
|
|
colour and stretched to the full width (preserveAspectRatio="none"). *@
|
|
<svg class="footer-wave" viewBox="0 0 1440 48" preserveAspectRatio="none" aria-hidden="true" focusable="false">
|
|
<path d="M0 24C240 48 480 48 720 28S1200 0 1440 20V48H0z" />
|
|
</svg>
|
|
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<Signet />
|
|
<span>Elternbeirat der IGMH</span>
|
|
</div>
|
|
|
|
@* Both link columns come from PocketBase like the header. An empty list
|
|
(no such pages, or PocketBase down) renders nothing -- no lone
|
|
heading above an empty column. *@
|
|
@if (_header.Count > 0)
|
|
{
|
|
<nav class="footer-nav" aria-label="Schnellzugriff">
|
|
<h2 class="footer-heading">Schnellzugriff</h2>
|
|
<ul>
|
|
@foreach (var link in _header)
|
|
{
|
|
<li><a href="@link.Href">@link.Title</a></li>
|
|
}
|
|
</ul>
|
|
</nav>
|
|
}
|
|
|
|
@if (_footer.Count > 0)
|
|
{
|
|
<nav class="footer-nav" aria-label="Weiteres">
|
|
<h2 class="footer-heading">Weiteres</h2>
|
|
<ul>
|
|
@foreach (var link in _footer)
|
|
{
|
|
<li><a href="@link.Href">@link.Title</a></li>
|
|
}
|
|
</ul>
|
|
</nav>
|
|
}
|
|
</div>
|
|
|
|
<p class="footer-copyright">© @_year Elternbeirat der IGMH</p>
|
|
</footer>
|