Sidebar Hierarchy + Info Popovers
What & Why
The side navigation is currently a flat list of ~70 items grouped only by section header (Admin & Operations, Coaching, Active Event, Athletes & Parents, Volleyball Community, Governance, League). Many items are really sub-pages of another (the seven links, print versions of Schedule/Leaderboard, Mentee Reports nested under Coach Reports, etc.) but they all sit at the same depth, which makes the sidebar long and hard to scan. The user wants a clean two-level structure (top-level heading → sub-level item) and a small info icon on each entry that opens a popover with a two-sentence description of what the item is and what lives under it.
Done looks like
- Every sidebar entry is classified as either a top-level parent or a sub-level child.
- Top-level parents are collapsible. Clicking the parent label navigates to its primary page; clicking the chevron expands/collapses the children.
- Sub-level items are visually indented under their parent and only render when the parent is expanded (with the active child auto-expanding its parent on page load).
- Each entry (parent and child) shows a small info icon next to its label. Clicking the icon opens a popover with a 2-sentence description: sentence 1 = what the page is for, sentence 2 = what the user will find inside it (or, for parents, a one-line summary of the children).
- The new structure respects the existing persona / coach-level / domain filtering — no item becomes visible to a role that couldn't see it before.
- The active route is highlighted on both the child and (in a muted state) its parent so the user always knows where they are in the tree.
- Mobile / collapsed-sidebar behavior still works (popovers and chevrons are reachable, parents become tooltips when the rail is collapsed).
Out of scope
- Redesigning the sidebar's visual style, colors, or icon set.
- Renaming items or changing routes.
- Adding new pages or moving existing pages between domains (academy vs league).
- Building a separate "Help Center" article system; descriptions live inline in the nav config.
Steps
1.
Audit & classify — Walk every entry in the registry and decide for each one: top-level parent, child of which parent, or stay as a single standalone top-level item. Record the proposed parent/child mapping in the registry as a new field, and write the two-sentence description for every entry into a new field. Initial proposal (the user can adjust before build): -
Control Panel (parent) → Events, Registrations, Staffing, Payroll & Hours, Pricing Chart, Tools, Audit Trail -
Events Management (parent) → Season Calendar, Training Teams -
Communication Hub (parent) → Spam Complaints, Suggestions Inbox, Bulletin Board -
People (parent) → Alumni -
Coach Portal (parent) → My Teams, Coach Levels, Development Profile, Coach Evaluation, Coach Comms -
Evaluate Athletes (parent) → Skill Evaluations, Tryout Evaluation, Tryout Dashboard -
Coach Reports (parent) → Mentee Reports -
Event Day (parent, Active Event) → Athlete Check-in, Athlete Ratings, SOF Session, Session Summary, Parent Feedback, Homework, Penny In-Event, Coach Session -
My Dashboard (parent, Athletes & Parents) → Athlete Summary, Family, Lesson Invite, Account Balance -
Community (parent) → Community Directory, My Connections, Coach Directory, Alumni Wall, Newsroom, Bulletin Board (community) -
Programs (parent) → Academy Store, Marketplace -
Schedule (parent, League) → Schedule (Print) -
Leaderboard (parent, League) → Leaderboard (Print) -
League Admin (parent) → Coordinator, Welcome Invites, Reactions, League Hub -
Standalone top-level (no children): AI Assistant, Analytics, Launch Readiness, Messages, Media Gallery, Payment Portal, My Profile, Help Center, Parents Guide, Penny Coach, Public Events, Board Dashboard, Bookkeeper Portal, Referee Console, Referee Courts, League Dashboard, Live View. 2.
Schema + registry update — Extend with and , and add the values to every entry in . Keep the existing field as the top-of-tree section header so we don't churn the rest of the renderer. 3.
Renderer update — Rewrite the section renderer in to build a parent → children tree from the filtered registry, render parents as collapsible rows (chevron + label + info icon), render children indented under their parent with the same info icon, and auto-expand the parent of the currently-active route. Use the existing from shadcn/ui. 4.
Info popover — Add a small button next to every label that opens a shadcn (or on desktop / on touch) showing the entry's title and 2-sentence description. Stop click propagation so opening the popover does not navigate. Include a per entry so the popover content is testable. 5.
Collapsed-rail + mobile — When the sidebar is in icon-only mode, parents show as a single icon with a hover/click flyout listing children; the info popover is still reachable from each child in the flyout. Verify the mobile sheet variant still scrolls and that popovers don't get clipped. 6.
Smoke test — Log in as each major persona (SuperAdmin, Coach at INTERN_L1 and HEAD_COACH_L2, Parent, Athlete, Referee, Coordinator, Board Member, Bookkeeper) and confirm: (a) every previously-visible item is still visible, (b) parents collapse/expand, (c) the info icon on every entry opens a popover with the right description, (d) the active route auto-expands its parent.
Relevant files
- - - - - -
No comments:
Post a Comment