Animate quantity steppers and make the nav bar sticky

- Add an AnimatedNumber component that slides a quantity stepper's
  count horizontally — left on increment, right on decrement — and
  wire it into both the menu and basket steppers.
- Make the top nav bar position: sticky, with an explicit background
  so scrolled content doesn't show through it.
- Reserve the scrollbar's gutter on every page (scrollable or not) so
  the sticky header doesn't shift width when navigating between short
  and tall pages.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-10 12:30:56 +02:00
co-authored by Claude Sonnet 5
parent 79bd64ce8c
commit e98b0d86d2
6 changed files with 86 additions and 3 deletions
+10
View File
@@ -6,6 +6,16 @@
box-sizing: border-box;
}
// Reserve the scrollbar's width on every page, scrollable or not — without
// this, the sticky nav bar (and page content) shifts a few pixels wider
// when navigating from a short page (no scrollbar) to a tall one (has one).
// `scrollbar-gutter` only takes effect on an actual scroll container, so
// `html` needs an explicit non-visible overflow for it to apply at all.
html {
overflow-y: scroll;
scrollbar-gutter: stable;
}
body {
margin: 0;
font-family: