Repository navigation
docs(nav): document modal navigation rail and app bar menu button usage - #142
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
📋 Review Summary
This pull request significantly expands and improves the documentation for Material 3 navigation components in nav/README.md. It provides comprehensive usage guides for md-nav-rail, md-nav-item, and md-nav-bar, including standard/expanded rail setups, complete responsive modal drawer integration with top app bars, and detailed API tables.
🔍 General Feedback
- The added documentation is thorough, well-structured, and includes practical code snippets for responsive layouts and modal drawers.
- The documentation aligns well with the existing implementations across
nav/rail.js,nav/item.js, andnav/bar.js.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 14,600 |
| Input Tokens (cached) | 417,264 (⚡ 96.6% cached) |
| Thinking / Reasoning Tokens | 4,068 |
| Output Tokens | 773 |
| Total Session Tokens | 436,705 |
| Cost (uncached input) | $0.0109 |
| Cost (cached input) | $0.0313 |
| Cost (thinking / reasoning) | $0.0153 |
| Cost (response output) | $0.0029 |
| Estimated Total Cost | $0.0604 |
Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
material | 7d3a11c | Commit Preview URL Branch Preview URL |
Oct 07 2026, 05:03 PM |
There was a problem hiding this comment.
📋 Review Summary
This update cleans up redundant nested <md-badge> elements from <md-nav-item> instances in demo/index.html, bringing the demo directly in line with the component's internal badge rendering behavior. Combined with the comprehensive documentation in nav/README.md, the navigation rail, modal drawer pattern, and navigation item APIs are now accurately documented and implemented across the project.
✅ Resolved Items from Prior Reviews
- Removed redundant nested
<md-badge>element from the standard rail example innav/README.md. (nav/README.md:69) - Removed redundant nested
<md-badge>element from the modal rail example innav/README.md. (nav/README.md:140) - Removed the non-existent default slot entry from the
<md-nav-item>slots table innav/README.md. (nav/README.md:419) - Removed redundant nested
<md-badge>elements from<md-nav-item>indemo/index.htmlfor both rail and bottom navigation bar instances. (demo/index.html:95)
🔍 General Feedback
- The removal of the nested
<md-badge>tags indemo/index.htmlensures clean HTML that relies onmd-nav-item's built-inshow-badgeandbadge-valueproperties. - The documentation in
nav/README.mdaccurately documents the modal drawer pattern (HTML, CSS, and JS) alongside complete API tables formd-nav-rail,md-nav-bar, andmd-nav-item. - The code and documentation are consistent with Material Design 3 guidelines and the codebase conventions.
📊 Token Usage & Cost Efficiency
| Metric | Value |
|---|---|
| Input Tokens (uncached) | 19,441 |
| Input Tokens (cached) | 417,264 (⚡ 95.3% cached) |
| PR Comments History Tokens | 983 |
| Thinking / Reasoning Tokens | 3,055 |
| Output Tokens | 483 |
| Total Session Tokens | 441,226 |
| Cost (uncached input) | $0.0153 |
| Cost (cached input) | $0.0313 |
| Cost (thinking / reasoning) | $0.0115 |
| Cost (response output) | $0.0018 |
| Estimated Total Cost | $0.0599 |
Gemini 3.8 Flash: introductory rate $0.75/$3.75 per 1M applied; reverts to $1.5/$7.5 after 2026-12-31.
Gemini 3.8 Flash: standard tier; batch and flex are half again, priority is higher.
Cache reads are priced here, but context-cache STORAGE, where the model charges for it separately per token-hour, is not included, so the figure can run slightly low.
1 participant
Summary
Updates the navigation rail documentation in
nav/README.mdto explain how to implement and use the modal navigation rail / modal drawer variant, including an end-to-end example of triggering it via a menu button in a top app bar (md-app-bar).Key Changes
< 600px) and on-demand drawers.<md-icon-button slot="navigation-icon">in<md-app-bar>.expandedproperty/attribute, programmatic toggling (toggleExpanded()), and theexpanded-changeevent.md-nav-rail,md-nav-item, andmd-nav-bar.Verification
npx prettier --check nav/README.md.demo/index.html,demo/css/styles.css, andnav/rail.js.