maverick-wave 5.17.0 → 5.20.0

package/src/scss/layout/_header.scss

@@ -201,60 +201,117 @@
     }
   }
 
-  @mixin navbar-off-canvas {
-    position: fixed;
-    top: 0;
-    right: 0;
-    --mw-navbar-drawer-width: 250px;
-    width: var(--mw-navbar-drawer-width);
-    height: 100dvh;
+  // The panel rides under the bar, not beside it. A drawer pinned to the right
+  // edge runs into the logo: 250px of panel against a 180px logo leaves 60px of
+  // overlap on a phone, and .mw-logo sits higher in the header's stacking
+  // context, so the logo prints on top of the menu. Under the bar there is
+  // nothing to collide with, at any logo width.
+  //
+  // position: absolute against the header and not fixed against the viewport:
+  // the header carries a backdrop-filter, which makes it the containing block
+  // for a fixed child anyway - at that point the anchoring is only nominally to
+  // the viewport, and every place the bar moves has to be undone by hand. Bound
+  // to the bar it simply travels with it.
+  @mixin navbar-top-sheet {
+    position: absolute;
+    top: 100%;
+    left: spacing('0');
+    right: spacing('0');
+    width: auto;
+    height: auto;
     background: var(--mw-header-background);
-    border-left: 1px solid var(--mw-header-border);
+    backdrop-filter: blur(7px);
+    // Both edges: the panel covers the bar's own bottom border - top: 100%
+    // lands on the padding box, which is above it - so without one of its own
+    // the bar and the panel read as a single block of colour.
+    border-top: 1px solid var(--mw-header-border);
+    border-bottom: 1px solid var(--mw-header-border);
     box-shadow:
-      -6px 0 12px var(--mw-shadow-near),
-      -18px 0 40px var(--mw-shadow-far);
+      0 6px 12px var(--mw-shadow-near),
+      0 18px 40px var(--mw-shadow-far);
     z-index: z-index('header') + 3;
 
-    transform: translateX(100%);
+    // Rolled out from under the bar rather than slid in. A slide needs a place
+    // to start, and the only direction with room is straight up through the
+    // header - which would take the panel behind its own stacking context root,
+    // where a child cannot go. The clip does the same thing visually and needs
+    // no z-index trick.
+    clip-path: inset(0 0 100% 0);
     visibility: hidden;
     transition:
-      transform var(--mw-duration-base) var(--mw-ease-out),
+      clip-path var(--mw-duration-base) var(--mw-ease-out),
       visibility var(--mw-duration-base);
 
     .mw-navbar-list {
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      gap: spacing('1');
-      height: 100%;
+      gap: spacing('0');
+      // The list is a flex item of the panel, so without this it shrinks to the
+      // width of its longest label and the rows end a third of the way across
+      width: 100%;
+      // Tall menus stay reachable without the panel growing past the screen
+      max-height: calc(100dvh - var(--mw-header-height));
       overflow-y: auto;
       // Keeps a rubber-band scroll inside the panel from moving the page
       overscroll-behavior: contain;
-      padding: calc(
-          var(--mw-header-height) + #{spacing('6')} +
-            env(safe-area-inset-top, 0px)
-        )
-        spacing('4') calc(#{spacing('6')} + env(safe-area-inset-bottom, 0px));
+      // The gutter sits on the link, not here, so a row's hover and its tap
+      // target run the full width of the panel instead of stopping at the text
+      padding-bottom: env(safe-area-inset-bottom, 0px);
+
+      // From here a row fits, and a full-width band with four links stacked in
+      // its left corner is mostly empty band. Wrapping, because the count is
+      // the page's business, not the framework's.
+      @include media-up('sm') {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: spacing('2');
+        padding: spacing('3') var(--mw-container-gutter)
+          calc(#{spacing('3')} + env(safe-area-inset-bottom, 0px));
+      }
     }
 
     .mw-navbar-item {
       width: 100%;
       margin: spacing('0');
       opacity: 0;
-      transform: translateX(12px);
+      transform: translateY(-8px);
+
+      // Rules between the rows, not around the block: a line above the first
+      // one would double the panel's own top border, one below the last would
+      // double its bottom.
+      + .mw-navbar-item .mw-navbar-link {
+        border-top: 1px solid var(--mw-header-border);
+      }
+
+      @include media-up('sm') {
+        width: auto;
+
+        + .mw-navbar-item .mw-navbar-link {
+          border-top: none;
+        }
+      }
     }
 
     .mw-navbar-link {
       display: flex;
       align-items: center;
-      min-height: 48px;
+      min-height: 52px;
       width: 100%;
-      padding: spacing('3') spacing('4');
-      border-radius: radius('md');
-      font-size: font-size('md');
+      padding: spacing('3') var(--mw-container-gutter);
+      border-radius: radius('none');
+      font-size: font-size('lg');
       text-align: left;
       color: var(--mw-header-text-color);
 
+      @include media-up('sm') {
+        min-height: 44px;
+        padding: spacing('3') spacing('4');
+        border-radius: radius('md');
+        font-size: font-size('md');
+      }
+
       // The sliding underline is a hover affordance and has no place on touch
       &::after {
         display: none;
@@ -274,16 +331,22 @@
       @include active() {
         color: var(--mw-header-navbar-list-active-color);
         background: var(--mw-primary-background);
+        // Marks the left edge of a stacked list. In a row the links are pills
+        // and the same rule would draw a stray tick inside each of them.
         box-shadow: inset 3px 0 0 var(--mw-header-navbar-list-active-color);
         font-weight: font-weight('medium');
+
+        @include media-up('sm') {
+          box-shadow: none;
+        }
       }
     }
 
     &.open {
-      transform: translateX(0);
+      clip-path: inset(0 0 0 0);
       visibility: visible;
 
-      // Items follow the panel in, slightly staggered
+      // Items follow the panel out, slightly staggered
       .mw-navbar-item {
         animation: mw-navbar-item-in var(--mw-duration-base) var(--mw-ease-out)
           forwards;
@@ -307,26 +370,29 @@
     }
   }
 
-  @mixin navbar-scrim($navbar-selector) {
-    body:has(#{$navbar-selector}.open) {
-      overflow: hidden;
-
-      &::after {
-        content: '';
-        position: fixed;
-        inset: 0;
-        background: var(--mw-overlay-background);
-        backdrop-filter: blur(2px);
-        z-index: z-index('header') - 1;
-        animation: mw-navbar-scrim-in var(--mw-duration-base) var(--mw-ease-out);
-      }
+  // One block for every navbar size, keyed off the class the script sets rather
+  // than off `:has()` and a breakpoint: the panel can only be open when the
+  // burger is on screen, and the burger is on screen only below its own
+  // breakpoint - so the state already carries what three media queries used to
+  // spell out.
+  body.mw-nav-open {
+    overflow: hidden;
+
+    &::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background: var(--mw-overlay-background);
+      backdrop-filter: blur(2px);
+      z-index: z-index('header') - 1;
+      animation: mw-navbar-scrim-in var(--mw-duration-base) var(--mw-ease-out);
     }
   }
 
   @keyframes mw-navbar-item-in {
     to {
       opacity: 1;
-      transform: translateX(0);
+      transform: translateY(0);
     }
   }
 
@@ -401,37 +467,24 @@
     // Auto-responsive behavior based on nav item count
     // Default behavior (1-3 items): collapse at md
     @include media-down('md') {
-      @include navbar-off-canvas;
+      @include navbar-top-sheet;
     }
 
     // Medium (4-5 items): collapse at lg
     &.mw-navbar-medium {
       @include media-down('lg') {
-        @include navbar-off-canvas;
+        @include navbar-top-sheet;
       }
     }
 
     // Large (6+ items): collapse at xl
     &.mw-navbar-large {
       @include media-down('xl') {
-        @include navbar-off-canvas;
+        @include navbar-top-sheet;
       }
     }
   }
 
-  // Every variant is collapsed at md, so the default selector covers them all
-  @include media-down('md') {
-    @include navbar-scrim('.mw-navbar');
-  }
-
-  @include media-down('lg') {
-    @include navbar-scrim('.mw-navbar-medium');
-  }
-
-  @include media-down('xl') {
-    @include navbar-scrim('.mw-navbar-large');
-  }
-
   .mw-navbar {
     // Default (1-3 items): show burger at md
     @include media-down('md') {