Tom/Elternbeirat
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

Add a mobile nav and pin the header while scrolling

Browse Source
This commit is contained in:
tleininger committed 2026-09-23 19:26:35 +02:00
1 parent 7337a1cbc0
commit 02654c20d3
6 files changed
+132 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Elternbeirat.Web/Components/Layout/MainLayout.razor
+21 -3
View File
@@ -1,10 +1,29 @@
@inherits LayoutComponentBase
<div class="page">
<header class="site-header">
@* 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">
@* A home link that only shows in the collapsed mobile menu. On wide
screens the brand is the home link, so this would be a redundant
entry -- CSS hides it there (see .nav-home-mobile). *@
<NavLink class="nav-home-mobile" href="/" Match="NavLinkMatch.All">Start</NavLink>
@foreach (var link in _header)
{
<NavLink href="@link.Href" Match="@(link.Href == "/" ? NavLinkMatch.All : NavLinkMatch.Prefix)">@link.Title</NavLink>
@@ -28,4 +47,3 @@
</nav>
</div>
</footer>
</div>
Elternbeirat.Web/Components/Layout/MainLayout.razor.css
+98 -11
View File
@@ -19,18 +19,17 @@
top: 0.5rem;
}
/* Page frame: header and footer stay put, the content grows and pushes the
footer to the bottom even on short pages. */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Header */
/* Header: pinned to the top while the page scrolls, so the brand and (on mobile)
the hamburger button are always reachable. It is a plain block child of <body>
(NOT a flex item) -- a stretched flex child fills its cell and never sticks.
z-index keeps it above the content; the opaque background stops content showing
through as it scrolls underneath. */
.site-header {
border-bottom: 1px solid #e0e0e0;
background: #fff;
position: sticky;
top: 0;
z-index: 20;
}
.header-inner {
@@ -57,6 +56,15 @@
gap: 0.25rem 1.25rem;
}
/* The hamburger button, its state checkbox, and the mobile-only home link are
hidden on wide screens; the media query below turns them on for narrow ones.
(On wide screens the brand is the home link, so a "Start" entry is redundant.) */
.nav-toggle,
.nav-toggle-label,
.nav-home-mobile {
display: none;
}
.main-nav a {
color: #333;
text-decoration: none;
@@ -74,9 +82,13 @@
border-bottom-color: #1f3a5f;
}
/* Content */
/* Content: at least tall enough that the footer sits at the bottom of the viewport
on short pages. 100dvh - 4rem leaves room for the header (which sits above in
normal flow); dvh follows the mobile browser's shrinking toolbar. On long pages
the content simply grows past this and pushes the footer down naturally. */
.content {
flex: 1;
min-height: calc(100dvh - 4rem);
box-sizing: border-box;
width: 100%;
max-width: 60rem;
margin: 0 auto;
@@ -115,3 +127,78 @@
color: #1f3a5f;
text-decoration: underline;
}
/* Mobile: on narrow screens the nav collapses behind a hamburger button. This is
pure CSS -- the #nav-toggle checkbox holds the open/closed state and its
:checked state reveals the nav. No JavaScript, so it works under static SSR. */
@media (max-width: 40rem) {
/* The brand stays on the left, the hamburger goes to the right, and the nav
occupies its own full-width row below both. */
.header-inner {
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
/* Show the hamburger button. */
.nav-toggle-label {
display: block;
cursor: pointer;
padding: 0.5rem;
margin: -0.5rem; /* keep the tap target large without shifting layout */
}
/* The three-bar icon, drawn with one element plus its ::before/::after. */
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
display: block;
width: 1.5rem;
height: 2px;
background: #1f3a5f;
content: "";
}
.nav-toggle-bar::before {
transform: translateY(-6px);
}
.nav-toggle-bar::after {
transform: translateY(4px); /* 6px minus the bar's own 2px height */
}
/* The nav takes its own row and is hidden until the checkbox is checked. */
.main-nav {
flex-basis: 100%;
flex-direction: column;
gap: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease;
}
/* Checked state: reveal the stacked links. The max-height caps the open menu
to the space below the sticky header; a longer list scrolls inside it
instead of running off the screen. */
.nav-toggle:checked ~ .main-nav {
max-height: 70vh;
overflow-y: auto;
margin-top: 0.5rem;
}
/* The mobile-only home link reappears as the first entry in the menu. */
.nav-home-mobile {
display: block;
}
.main-nav a {
padding: 0.6rem 0;
border-bottom: 1px solid #eee;
}
/* The active link keeps its colour but not the desktop underline, which would
clash with the row separators. */
.main-nav a.active {
border-bottom-color: #eee;
}
}