Skip to content

fix(layout): align sidebar navigation and icons with dashboard across roles

Banuri Koushik Reddy requested to merge fix/sidebar-dashboard-nav-parity into develop

Overview

This MR updates AppLayout to make sidebar navigation consistent with the dashboard cards across Admin, Coordinator, and Volunteer roles. It also fixes sidebar role-context drift on role-scoped routes for multi-role users.

What does this MR do and why?

The sidebar navigation had drifted away from the dashboard in two important ways:

  • some actions visible on the dashboard were missing from the sidebar
  • several sidebar icons did not match the corresponding dashboard card icons

There was also a role-selection issue in the sidebar: on role-scoped routes like /volunteer/*, the sidebar could still derive its selected role from query params or role priority instead of the current route, which made the UI feel inconsistent for users with multiple roles.

This MR keeps the implementation localized to AppLayout and updates:

  • role resolution logic
  • sidebar menu definitions
  • sidebar icon mappings

Trade-offs:

  • Counseling is now available as a top-level Volunteer sidebar item while Counseling Queue remains inside Queues, because both navigation paths are useful and already implied by the dashboard/queue structure.
  • This MR does not centralize dashboard and sidebar config into a shared source of truth; it aligns the sidebar with the existing dashboard behavior.

Changes Made

  • Modified src/components/AppLayout.tsx

Technical Details

Root cause

  • Sidebar role selection was based primarily on ?role= and default role priority.
  • Sidebar action lists had diverged from the dashboard action cards.
  • Sidebar icons were not using the same Lucide icons as the matching dashboard cards.

Fix implemented

  • Added route-first role detection:
    • /admin/* → admin
    • /coordinator/* → coordinator
    • /volunteer/* → volunteer
  • Preserved fallback behavior:
    • use ?role= on shared routes like /
    • otherwise fall back to role priority
  • Prevented redundant navigation when the selected role is clicked again in the role switcher
  • Added missing sidebar action:
    • Admin: Camp Analytics
    • Volunteer: top-level Counseling
  • Aligned sidebar icons with dashboard card icons across all roles

Icon alignment in sidebar

  • Admin

    • Manage Doctors → Stethoscope
    • Medical Camps → Tent
    • Medicines → Pill
    • Assign Roles → Shield
    • Patient Profiles → Search
    • Staff Attendance → UserCheck
    • Camp Analytics → BarChart3

  • Coordinator

    • Queue Management → ListTodo

  • Volunteer top-level

    • Register Patient → UserPlus
    • Assign Doctor → Stethoscope
    • Queues → ClipboardList
    • Record Vitals → Activity
    • Know Your Patient → ClipboardList
    • Prescriptions → FileEdit
    • Verify Medicines → CheckCircle
    • Counseling → MessageSquare
    • Patient Status → Milestone
    • Quick Search → Search
    • Medicines List → Pill
    • Family Grouping → UserCog

  • Volunteer queue submenu

    • Vitals Waiting Queue → Heart
    • Vitals Queue → Heart
    • Queue → ListTodo
    • In Consultation Queue → CheckCircle
    • Prescriptions Queue → FileEdit
    • Medicine Pickup Queue → PackageCheck
    • Verify Medicines Queue → CheckCircle
    • Counseling Queue → MessageSquare

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

  • Closes #

Screenshots or Screen Recordings

Before After
image image
image image

How to Set Up and Validate Locally

  1. Checkout this branch.
  2. Install dependencies if needed: 
    npm install
  3. Start the app: 
    npm run dev
  4. Open:
    • http://localhost:5173/
  5. Validate Admin sidebar:
    • log in as a user with Admin role
    • open the sidebar
    • verify Camp Analytics is present
    • verify Admin icons match the dashboard cards
  6. Validate Volunteer sidebar:
    • switch to Volunteer role
    • verify top-level Counseling is present
    • verify Counseling Queue still exists inside Queues
    • verify Volunteer icons match the dashboard cards
  7. Validate Coordinator sidebar:
    • switch to Coordinator role
    • verify Queue Management uses the same icon as the dashboard
  8. Validate route-based role selection:
    • navigate to /volunteer/patient-registration
    • confirm the sidebar shows Volunteer
    • navigate to /admin/manage-doctors
    • confirm the sidebar shows Administrator
  9. Validate role switch behavior:
    • use the role selector from the sidebar
    • confirm switching roles navigates to the selected role’s dashboard root
    • confirm clicking the already-selected role does not navigate again

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Admin sidebar includes Camp Analytics Item is available under Admin navigation ✅
Volunteer sidebar includes top-level Counseling Item is available as a primary Volunteer action ✅
Sidebar role follows route prefix /volunteer/*, /admin/*, /coordinator/* show the correct active role ✅
Sidebar icons match dashboard cards Matching actions use the same symbol set across all roles ✅
Selecting current role does not re-navigate No redundant navigation occurs ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined (no any unless justified)
  • ESLint and Prettier checks pass 
    bun run lint

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Responsive design considered (mobile-first if applicable)
  • Accessibility attributes included (aria-*, role, etc.)
  • Icons from lucide-react used consistently

API & Data Fetching

  • TanStack Query used for server state (if applicable)
  • Loading and error states handled
  • API types defined in src/types/api.ts
  • Axios interceptors handle auth tokens correctly
  • Use of Zod for data validations

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)
  • CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

  • Dashboard and sidebar definitions are still maintained separately; this MR aligns them manually rather than introducing a shared navigation config.
  • Some labels remain tied to existing translation/hardcoded patterns already present in the app.

Additional Notes

Current git status shows only one modified file:

  • src/components/AppLayout.tsx

So this MR description is scoped only to the changes currently present in the working tree.

MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #301 (closed)

Edited by Banuri Koushik Reddy

Merge request reports