Add optional page navigation to top toc dropdown (for FWE)

site/lib/_sass/base/_base.scss

@@ -8,8 +8,10 @@ body {
   color: var(--site-base-fgColor);
 
   // The top TOC is not shown on narrow screens.
-  @media (min-width: 1200px) {
-    --site-subheader-height: 0rem;
+  &:not(:has(#site-subheader.show-always)) {
+    @media (min-width: 1200px) {
+      --site-subheader-height: 0rem;
+    }
   }
 
   // If the TOC is disabled, reduce the subheader height to

site/lib/_sass/components/_header.scss

@@ -7,8 +7,10 @@
   border-bottom: 0.1rem solid var(--site-outline-variant);
 
   @media (min-width: 1200px) {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
-    border-bottom: none;
+    &:not(:has(~* #site-subheader.show-always)) {
+      box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
+      border-bottom: none;
+    }
   }
 
   .navbar {
@@ -186,7 +188,9 @@ body.open_menu #menu-toggle span.material-symbols {
   border-bottom: 0.1rem solid var(--site-outline-variant);
   box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
 
-  @media (width < 240px), (width >= 1200px) {
-    display: none;
+  &:not(.show-always) {
+    @media (width < 240px), (width >= 1200px) {
+      display: none;
+    }
   }
 }

site/lib/_sass/components/_pagenav.scss

@@ -1,6 +1,7 @@
 #pagenav {
   flex-grow: 1;
   min-width: 0;
+  max-width: 100%;
 
   >button.dropdown-button {
     display: flex;
@@ -25,27 +26,36 @@
     }
   }
 
-  .toc-intro {
+  .toc-breadcrumb {
+    flex-shrink: 2;
     white-space: nowrap;
+    overflow: hidden;
 
-    .material-symbols {
+    &:first-child .material-symbols {
       margin-right: 0.25rem;
     }
-  }
 
-  .toc-current {
-    display: none;
-
-    @media (min-width: 320px) {
-      display: flex;
+    span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
+  }
 
-    flex-wrap: nowrap;
+  .toc-current {
+    flex-shrink: 1;
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
 
     color: var(--site-base-fgColor-alt);
+
+    @media (max-width: 320px) {
+      display: none !important;
+    }
+
+    span:last-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   #pagenav-content {
@@ -85,6 +95,7 @@
       text-decoration: none;
       display: flex;
       align-items: center;
+      gap: 4px;
       color: var(--site-base-fgColor-alt);
       font-weight: 500;
 
@@ -93,10 +104,6 @@
         user-select: none;
       }
 
-      span:last-child {
-        margin-left: 3px;
-      }
-
       &:hover {
         color: var(--site-link-fgColor);
       }
@@ -109,5 +116,51 @@
     nav {
       padding: 0.6rem 0 0.8rem;
     }
+
+    .page-link {
+      padding: 0;
+      font-weight: 400;
+      color: var(--site-base-fgColor);
+      margin-top: 0.6rem;
+
+      .page-number {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: var(--site-raised-bgColor);
+        color: var(--site-base-fgColor);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 500;
+
+        transition: background-color 300ms ease, color 300ms ease;
+      }
+
+      &.active .page-number {
+        background-color: var(--site-primary-color);
+        color: var(--site-onPrimary-color-lightest);
+      }
+
+      &:not(.active):has(~.page-link.active) .page-number {
+        background-color: var(--site-onPrimary-color-light);
+        color: var(--site-primary-color);
+      }
+
+      ~nav {
+        padding: 0;
+      }
+    }
+
+    .page-divider {
+      padding-left: 0.25rem;
+      padding-top: 0.25rem;
+      font-weight: 600;
+      color: var(--site-base-fgColor-alt);
+    }
+
+    .dropdown-divider:has(~.page-link) {
+      margin-top: 0.6rem;
+    }
   }
 }

site/lib/_sass/components/_tooltip.scss

@@ -60,4 +60,4 @@
       visibility: visible;
     }
   }
-}
+}

site/lib/jaspr_options.dart

@@ -170,7 +170,8 @@ Map<String, dynamic> _prefix8DartPadInjector(prefix8.DartPadInjector c) => {
   'runAutomatically': c.runAutomatically,
 };
 Map<String, dynamic> _prefix9PageNav(prefix9.PageNav c) => {
-  'title': c.title,
+  'breadcrumbs': c.breadcrumbs,
+  'initialHeading': c.initialHeading,
   'content': c.content.toId(),
 };
 Map<String, dynamic> _prefix13ArchiveTable(prefix13.ArchiveTable c) => {

site/lib/main.dart

@@ -26,6 +26,7 @@ import 'src/extensions/registry.dart';
 import 'src/layouts/catalog_page_layout.dart';
 import 'src/layouts/doc_layout.dart';
 import 'src/layouts/toc_layout.dart';
+import 'src/layouts/tutorial_layout.dart';
 import 'src/loaders/data_processor.dart';
 import 'src/markdown/markdown_parser.dart';
 import 'src/pages/custom_pages.dart';
@@ -66,7 +67,12 @@ Component get _docsFlutterDevSite => ContentApp.custom(
     rawOutputPattern: _passThroughPattern,
     extensions: allNodeProcessingExtensions,
     components: _embeddableComponents,
-    layouts: const [DocLayout(), TocLayout(), CatalogPageLayout()],
+    layouts: const [
+      DocLayout(),
+      TocLayout(),
+      CatalogPageLayout(),
+      TutorialLayout(),
+    ],
     theme: const ContentTheme.none(),
     secondaryOutputs: [
       const RobotsTxtOutput(),

site/lib/src/components/common/prev_next.dart

@@ -4,15 +4,16 @@
 
 import 'package:jaspr/jaspr.dart';
 
+import '../../models/page_navigation_model.dart';
 import 'material_icon.dart';
 
 /// Previous and next page buttons to display at the end of a page
 /// in a connected series of pages, such as the language docs.
 class PrevNext extends StatelessComponent {
   const PrevNext({super.key, this.previousPage, this.nextPage});
 
-  final ({String url, String title})? previousPage;
-  final ({String url, String title})? nextPage;
+  final PageNavigationEntry? previousPage;
+  final PageNavigationEntry? nextPage;
 
   @override
   Component build(BuildContext context) {
@@ -32,7 +33,7 @@ class PrevNext extends StatelessComponent {
 class _PrevNextCard extends StatelessComponent {
   const _PrevNextCard({required this.page, required this.isPrevious});
 
-  final ({String url, String title}) page;
+  final PageNavigationEntry page;
   final bool isPrevious;
 
   @override

site/lib/src/components/layout/client/pagenav.dart

@@ -14,12 +14,14 @@ import '../../util/component_ref.dart';
 @client
 class PageNav extends StatefulComponent {
   const PageNav({
-    required this.title,
+    this.breadcrumbs = const [],
+    required this.initialHeading,
     required this.content,
     super.key,
   });
 
-  final String title;
+  final List<String> breadcrumbs;
+  final String initialHeading;
   final ComponentRef content;
 
   @override
@@ -63,21 +65,34 @@ class _PageNavState extends State<PageNav> {
           'aria-label': 'Toggle the table of contents dropdown',
         },
         [
-          span(classes: 'toc-intro', [
-            const MaterialIcon('list'),
-            span(
-              attributes: {'aria-label': 'On this page'},
-              [
-                text('On this page'),
-              ],
-            ),
-          ]),
+          if (component.breadcrumbs.isEmpty)
+            span(classes: 'toc-intro', [
+              const MaterialIcon('list'),
+              span(
+                attributes: {'aria-label': 'On this page'},
+                [text('On this page')],
+              ),
+            ])
+          else ...[
+            for (final (index, crumb) in component.breadcrumbs.indexed) ...[
+              span(classes: 'toc-breadcrumb', [
+                if (index == 0)
+                  const MaterialIcon('list')
+                else
+                  const MaterialIcon('chevron_right'),
+                span([
+                  text(crumb),
+                ]),
+              ]),
+            ],
+          ],
+
           span(classes: 'toc-current', [
             const MaterialIcon('chevron_right'),
             ValueListenableBuilder(
               listenable: currentPageHeading,
               builder: (context, value) {
-                return span([text(value ?? component.title)]);
+                return span([text(value ?? component.initialHeading)]);
               },
             ),
           ]),

site/lib/src/components/layout/header.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/jaspr_content.dart';
 
 import '../common/button.dart';
 import '../common/material_icon.dart';
@@ -84,7 +85,7 @@ class DashHeader extends StatelessComponent {
                 content: 'Get started',
                 href: '/get-started/quick',
               ),
-              const MenuToggle(),
+              if (context.page.data['sidenav'] != null) const MenuToggle(),
             ],
           ),
         ]),