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

[schultek]

This extends the top floating table-of-contents dropdown by an optional page navigation list, for use inside FWE tutorials.

---

Differences to the current toc:

• Instead of "On this page" shows the current page title
• When open, shows a list of pages (including chapters).
  • The current page's toc is nested under the entry of the current page (design & behavior stays the same)

To test this, I also created a new TutorialLayout that hides the sidebar and forces the floating toc bar on all screen sizes. This should be improved in the future.

Presubmit checklist

• If you are unwilling, or unable, to sign the CLA, even for a tiny, one-word PR, please file an issue instead of a PR.
• If this PR is not meant to land until a future stable release, mark it as draft with an explanation.
• This PR follows the Google Developer Documentation Style Guidelines—for example, it doesn't use i.e. or e.g., and it avoids I and we (first-person pronouns).
• This PR uses semantic line breaks
  of 80 characters or fewer.

[gemini-code-assist]

Summary of Changes

Hello @schultek, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the site's navigation capabilities by introducing an optional page navigation feature within the top table-of-contents dropdown. This is specifically tailored for First Week Experience (FWE) tutorials, allowing users to easily navigate between different pages and chapters while still retaining access to the current page's internal table of contents. The changes involve new layout definitions, updated styling, and a refactored data model to support this richer navigation experience.

Highlights

• Enhanced Top TOC Dropdown: The top floating table-of-contents dropdown has been extended to include an optional page navigation list, primarily for use within First Week Experience (FWE) tutorials. This new functionality allows the dropdown to display a sequence of pages and chapters, with the current page's table of contents nested under its respective entry.
• New Tutorial Layout: A new TutorialLayout has been introduced. This layout is designed to hide the sidebar and ensure the floating table-of-contents bar is always visible on all screen sizes for FWE tutorial pages, providing a consistent navigation experience.
• Refactored Navigation Models: The previous on_this_page_model.dart has been removed and its functionality, along with new page navigation capabilities, has been consolidated into a new page_navigation_model.dart. This new model introduces PageNavigationData, TocNavigationData, TocNavigationEntry, and PageNavigationEntry to manage both intra-page TOC and inter-page navigation.
• Styling and Component Updates: CSS files (_base.scss, _toc.scss) have been updated to support the new show-always class for the top TOC and to style the new page navigation elements. Existing components like PrevNext and DashHeader have been modified to integrate with the new navigation models and conditional rendering logic.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new page navigation feature within the top table-of-contents dropdown, which is a great enhancement for tutorial-style content. The implementation is solid, involving a new TutorialLayout, a significant and well-executed refactoring of the table of contents components and data models, and corresponding style updates. The move to a unified PageNavigationData model is a good architectural improvement. I have a couple of minor suggestions to improve performance and code consistency.

[flutter-website-bot]

Visit the preview URL for this PR (updated for commit 21fcef2):

https://flutter-docs-prod--pr12715-feat-page-navigation-dropdo-fzy88dz5.web.app