Add a mobile nav and pin the header while scrolling

Elternbeirat.Web/Components/Layout/MainLayout.razor.css

@@ -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;
+    }
+}