Skip to content

Add collapsible category submenus to navigation sidebar#13

Open
magmoe wants to merge 3 commits intomainfrom
feature/11-flyout-submenus
Open

Add collapsible category submenus to navigation sidebar#13
magmoe wants to merge 3 commits intomainfrom
feature/11-flyout-submenus

Conversation

@magmoe
Copy link
Copy Markdown

@magmoe magmoe commented Apr 14, 2026

Summary

  • Group the flat 52-item Core nav list into 7 collapsible categories (Maps & Scenes, Layers, Visualization, Widgets,
    Queries, Interaction, Location) with animated expand/collapse chevrons
  • Pro NavMenu inherits the same grouping, with all 24 Pro pages slotted into the matching categories alongside Core pages
  • Active page's group auto-expands on load; search auto-expands all groups with matching results
  • Restyle active item indicator: gradient left border + subtle hover-style background instead of solid gray box
  • Pinned Home link at top with divider separator
  • Fix UniqueValueRenderers build error (missing ToUpperFirstChar extension)

Code quality

  • Category lives on the PageLink record itself (not a separate dictionary), so new pages can't be added without a
    category assignment
  • Category names use compile-time constants (Categories.Layers, etc.) to prevent typos
  • Pro uses p with { Href = href } to preserve base page data, avoiding per-access dictionary allocation
  • Shared RenderNavLink RenderFragment eliminates duplicated NavLink markup across templates

Files Changed

  • NavMenu.razor.csPageLink record with Category field, Categories constants, expand/collapse state, grouping
    logic
  • NavMenu.razor — Grouped rendering with collapsible headers, pinned items, shared RenderFragment
  • site.css — Group header, sublist, pinned item, and active item styles
  • ProNavMenu.razor.cs — Pro pages with category assignments, with expression for base page remapping
  • ProNavMenu.razor — Matching grouped template with shared RenderFragment
  • UniqueValueRenderers.razor.cs — Build fix
Screenshot 2026-04-14 110415 Screenshot 2026-04-14 110436

magmoe and others added 2 commits April 14, 2026 11:05
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>
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Category to PageLink + grouping/expand-collapse state management in NavMenu.
  • 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.

Comment thread samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/wwwroot/css/site.css Outdated
Comment thread samples/core/dymaptic.GeoBlazor.Core.Sample.Shared/Shared/NavMenu.razor Outdated
Comment thread samples/pro/dymaptic.GeoBlazor.Pro.Sample.Shared/Shared/ProNavMenu.razor Outdated
- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants