Add collapsible category submenus to navigation sidebar#13
Open
Add collapsible category submenus to navigation sidebar#13
Conversation
Group the flat 52-item nav list into 7 collapsible categories (Maps & Scenes, Layers, Visualization, Widgets, Queries, Interaction, Location) with expand/collapse chevrons. Active page's group auto-expands on load, search auto-expands all matching groups. Gradient left border on active item, pinned Home link at top. Pro NavMenu inherits grouping with Pro pages slotted into the same categories. Also fixes UniqueValueRenderers build error (missing ToUpperFirstChar extension). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add Category field to PageLink record so category assignment
lives with the page definition, not in a separate dictionary
- Replace string literals with Categories constants class
- Use `p with { Href = href }` in Pro to preserve Category from
base pages, removing the per-access dictionary allocation
- Extract duplicated NavLink markup into RenderFragment helper
in both Core and Pro razor templates
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR refactors the sample navigation sidebar from a long flat list into collapsible category submenus (shared between Core and Pro samples), adds pinned top-level links, updates active-item styling, and includes a small build fix in a sample page.
Changes:
- Add
CategorytoPageLink+ grouping/expand-collapse state management inNavMenu. - Update Core/Pro nav menu Razor templates to render grouped, collapsible sections with shared link rendering.
- Update sidebar CSS for group headers, nested lists, pinned items, and the new active indicator style.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| samples/pro/dymaptic.GeoBlazor.Pro.Sample.Shared/Shared/ProNavMenu.razor.cs | Assign categories to Pro pages and reuse base PageLink via with when rewriting Href. |
| samples/pro/dymaptic.GeoBlazor.Pro.Sample.Shared/Shared/ProNavMenu.razor | Render pinned items + grouped collapsible sections for Pro menu. |
| samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/css/site.css | Add styles for group headers/submenus/pinned item and update active item indicator styling. |
| samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor.cs | Introduce category constants, grouping order, expanded-group state, and auto-expand active group on load/search. |
| samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor | Render pinned items + grouped collapsible sections for Core menu. |
| samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Pages/UniqueValueRenderers.razor.cs | Replace missing ToUpperFirstChar usage with an inline capitalization expression. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Replace :first-of-type with .nav-pinned + .nav-group sibling selector (the old selector never matched because Home's <li> was the first of its type) - Change group expander from <div> to <button> with aria-expanded for keyboard nav and screen reader support - Add aria-hidden to decorative chevron SVG - Reset default button styles on .nav-list-expander Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Queries, Interaction, Location) with animated expand/collapse chevrons
Code quality
PageLinkrecord itself (not a separate dictionary), so new pages can't be added without acategory assignment
Categories.Layers, etc.) to prevent typosp with { Href = href }to preserve base page data, avoiding per-access dictionary allocationRenderNavLinkRenderFragment eliminates duplicated NavLink markup across templatesFiles Changed
NavMenu.razor.cs—PageLinkrecord withCategoryfield,Categoriesconstants, expand/collapse state, groupinglogic
NavMenu.razor— Grouped rendering with collapsible headers, pinned items, shared RenderFragmentsite.css— Group header, sublist, pinned item, and active item stylesProNavMenu.razor.cs— Pro pages with category assignments,withexpression for base page remappingProNavMenu.razor— Matching grouped template with shared RenderFragmentUniqueValueRenderers.razor.cs— Build fix