App Sidebar

App Sidebar

Component File: src/components/shared/AppSidebar.tsx Last Updated: March 8, 2026 Status: Current

Overview

The App Sidebar is the live navigation shell for the app. It is sectioned, permission-aware, and tier-aware.

Source of truth for sidebar behavior:

• src/components/shared/AppSidebar.tsx
• src/components/PageRouter.tsx
• src/hooks/useTierAccess.ts

Current Navigation Sections

Standard staff navigation

The sidebar groups pages into four labeled sections:

• Overview - Dashboard, My Workspace, Minty AI
• Manage - Donors, People, Fundraising
• Finance - Fund Accounting, Reports
• Settings - Tools, Administration

Portal-only navigation

Portal accounts do not see the standard staff hub layout.

• donor-only users see a single portal item
• volunteer-only users see a single portal item
• dual-access users see My Portal

Internal navigation

Internal users can also open internal-admin from a separate control near the bottom of the nav.

Current Behavior

• navigation is filtered by role, position, tier, and internal status
• free-tier users still see certain pages, but paywalled pages get a badge indicator
• section accent colors are applied per section
• internal-admin is not part of the standard hub grid
• footer currently ships with Send Feedback
• the old App Support footer link is commented out and not part of the live UI

State And Permissions

The sidebar does not use AppContext.

Current state sources are:

• Zustand app store for navigation
• useAuth() for user role and portal flags
• useTierAccess() for access checks and paywall badges
• useIsInternalUser() for internal-admin visibility

Related Docs

• documentation/pages/README.md
• documentation/pages/administration/00-ADMINISTRATION-HUB.md
• documentation/pages/people/00-PEOPLE-HUB.md
• documentation/pages/reports/00-REPORTS-HUB.md
• documentation/pages/tools/00-TOOLS-HUB.md

Synced from IFMmvp-Frontend documentation: pages/components/02-APP-SIDEBAR.md