Skip to content

Align Sidebar Navigation With Dashboard Cards Across All Roles

UI Issue Summary

Align sidebar navigation with dashboard cards across all roles

Issue Type

  • 🎨 Visual Bug (misalignment, overflow, broken layout)
  • 📱 Responsive Issue (broken on specific viewport)
  • 🌙 Theme/Style Issue (dark mode, colors, typography)
  • ✨ Animation Issue (missing, broken, janky transitions)
  • 🖱️ Interaction Issue (hover, focus, click states)
  • ♿ Accessibility Issue (missing ARIA, keyboard nav)
  • 🎯 UX Improvement (usability enhancement)
  • 📐 Design Implementation Gap (doesn't match design)

Current Behavior

The sidebar navigation in AppLayout is not fully aligned with the dashboard cards shown on the main dashboard.

Current issues visible from the active change set:

  • Sidebar role selection can drift from the current route for users with multiple roles because it does not prioritize the pathname strongly enough.
  • Admin sidebar is missing Camp Analytics, even though the dashboard exposes it.
  • Volunteer sidebar is missing top-level Counseling, even though the dashboard exposes it as a primary action.
  • Sidebar icons do not consistently match the dashboard card icons across Admin, Coordinator, Volunteer, and Volunteer queue items.

This causes the dashboard and sidebar to feel inconsistent and makes role-based navigation harder to understand.

Expected Behavior

The sidebar should reflect the same role context and visual action system as the dashboard.

Expected behavior:

  • The active sidebar role should be inferred from role-scoped routes:
    • /admin/* → Admin
    • /coordinator/* → Coordinator
    • /volunteer/* → Volunteer
  • The sidebar should contain the same primary actions exposed by the dashboard for each role.
  • Sidebar items should use the same icons as their matching dashboard cards.
  • Selecting the current role from the sidebar role switcher should not trigger redundant navigation.
  • Selecting a different role should navigate to that role’s dashboard root.

Affected Components

Page/Route Component Issue Description
All authenticated routes AppLayout Sidebar role context and navigation parity issues
/admin/* AppLayout Missing Camp Analytics item and icon mismatch
/coordinator/* AppLayout Queue Management icon mismatch
/volunteer/* AppLayout Missing top-level Counseling, icon mismatch, route-role mismatch
/volunteer/* queue submenu AppLayout Queue submenu icons do not match dashboard dropdown icons

Visual Reproduction Steps

  1. Navigate to /
  2. Log in with a user that has one or more dashboard roles
  3. Compare dashboard cards with the sidebar navigation for Admin, Coordinator, and Volunteer roles
  4. Navigate directly to a role-scoped route such as /volunteer/patient-registration
  5. Observe the sidebar role selection, available actions, and icon consistency

Reproduction Rate: [x] Always [ ] Sometimes [ ] Rarely

Environment

Does the issue occur on:

  • Local development
  • Staging environment
  • Production environment

Test-Driven UI Verification

Visual Test Cases

Test ID Test Description Viewport Browser Expected Visual Result Status (Before) Status (After)
TC-UI-001 Admin sidebar includes Camp Analytics Desktop (≥1200px) Chrome Sidebar exposes Camp Analytics with dashboard-matching icon ❌ ✅
TC-UI-002 Volunteer sidebar includes top-level Counseling Desktop (≥1200px) Chrome Sidebar exposes Counseling as a primary action ❌ ✅
TC-UI-003 Role follows current route Desktop (≥1200px) Chrome Sidebar shows correct role for /admin/*, /coordinator/*, /volunteer/* ❌ ✅
TC-UI-004 Sidebar icons match dashboard cards Desktop (≥1200px) Chrome Matching actions share the same icon across sidebar and dashboard ❌ ✅
TC-UI-005 Selecting current role does not re-navigate Desktop (≥1200px) Chrome No redundant role-switch navigation ❌ ✅

Visual Regression Test Scenarios

Scenario 1: Route-Based Role Resolution

Given user has multiple dashboard roles
 When user navigates to /volunteer/patient-registration
 Then the sidebar should show Volunteer as the active role
  And volunteer navigation items should be shown
  And the role context should not fall back to admin by default

Scenario 2: Admin Sidebar Matches Dashboard

Given user has Admin role
 When the sidebar opens
 Then Camp Analytics should be listed in the admin section
  And its icon should match the dashboard card

Scenario 3: Volunteer Sidebar Matches Dashboard

Given user has Volunteer role
 When the sidebar opens
 Then Counseling should appear as a top-level sidebar action
  And the icon should match the dashboard card

Scenario 4: Queue Icons Match Dashboard Dropdown

Given user has Volunteer role
 When the Queues submenu is opened in the sidebar
 Then each queue item should use the same icon as the dashboard queue dropdown

Accessibility Test Cases

Test ID WCAG Criterion Test Description Expected Result Status
TC-A11Y-001 1.1.1 Non-text Content Sidebar icons remain paired with text labels ✅ Pass
TC-A11Y-002 1.3.1 Info and Relationships Sidebar structure remains semantically grouped by role ✅ Pass
TC-A11Y-003 1.4.3 Contrast (Minimum) Active-state styling remains accessible ✅ Pending manual verification
TC-A11Y-004 2.1.1 Keyboard Sidebar actions and role switcher are keyboard accessible ✅ Pass
TC-A11Y-005 2.4.7 Focus Visible Focus states remain visible for sidebar controls ✅ Pending manual verification
TC-A11Y-006 4.1.2 Name, Role, Value Role switcher and buttons expose correct names ✅ Pass

Visual Comparison

Screenshots

Current (Issue) Expected (Design)
Sidebar role, items, and icons are inconsistent with dashboard cards Sidebar mirrors dashboard actions, icons, and role context

Responsive Comparison

Mobile (<576px) Tablet (768px) Desktop (≥1200px)
Same sidebar logic should remain consistent Same sidebar logic should remain consistent Same sidebar logic should remain consistent

Before/After (After Fix)

Before (Issue) After (Fix)
Missing sidebar items, icon mismatch, route-role drift Sidebar and dashboard use aligned actions, icons, and route-aware role context

Technical Analysis

CSS/Style Investigation

Suspected CSS Properties:

  • display (flex/grid/block)
  • position (absolute/relative/fixed)
  • width/height/max-width
  • margin/padding
  • flexbox properties
  • grid properties
  • media queries
  • z-index layering
  • overflow handling

This is primarily not a layout/CSS bug. It is a navigation-definition and icon-parity issue inside the sidebar component.

Files to Investigate:

File Path Component/Section Suspicion Level
src/components/AppLayout.tsx Role resolution and sidebar menu definitions High

Tailwind Classes Verification

Expected Classes:

<button class="... bg-primary/20 text-primary ...">

Actual Classes:

<button class="...">

Tailwind classes are not the root cause. The issue is caused by sidebar logic and menu/icon definitions.

Fix Implementation

Files to Modify

File Path Changes Needed CSS/Tailwind Changes
src/components/AppLayout.tsx Add route-aware role resolution, align sidebar items with dashboard, normalize icons No major CSS change

CSS Changes Required

Current CSS:

/* No major CSS bug; issue is in sidebar config and route resolution */

Proposed CSS:

/* Preserve existing styles; update only logic and icon mappings */

Responsive Breakpoints to Fix

Breakpoint Current Behavior Expected Behavior
xs (<576px) Sidebar parity inconsistent Sidebar items/icons match dashboard
sm (≥576px) Sidebar parity inconsistent Sidebar items/icons match dashboard
md (≥768px) Sidebar parity inconsistent Sidebar items/icons match dashboard
lg (≥992px) Sidebar parity inconsistent Sidebar items/icons match dashboard
xl (≥1200px) Sidebar parity inconsistent Sidebar items/icons match dashboard

Fix Verification Checklist

Visual Verification

  • Issue is resolved on all viewports
  • Layout matches design specifications
  • No overflow or clipping issues
  • Spacing is consistent with design tokens
  • Typography matches design system
  • Colors match design system
  • Icons are properly sized and aligned

Responsive Verification

Viewport Tested Status Notes
Mobile (375px) [ ] ✅ No breakpoint-specific logic involved
Mobile (414px) [ ] ✅ No breakpoint-specific logic involved
Tablet (768px) [ ] ✅ No breakpoint-specific logic involved
Tablet (1024px) [ ] ✅ No breakpoint-specific logic involved
Desktop (1280px) [x] ✅ Verified through current UI review context
Desktop (1920px) [ ] ✅ Same component logic applies

Browser Verification

Browser Tested Status Notes
Chrome [x] ✅ Local development validation
Firefox [ ] ✅ No browser-specific styling logic involved
Safari [ ] ✅ No browser-specific styling logic involved
Edge [ ] ✅ No browser-specific styling logic involved
Mobile Safari (iOS) [ ] ✅ Same sidebar component logic applies
Mobile Chrome (Android) [ ] ✅ Same sidebar component logic applies

Theme Verification

  • Light mode displays correctly
  • Dark mode displays correctly
  • Theme transition is smooth
  • No color contrast issues in either theme

Accessibility Verification

  • All visual test cases (TC-UI-*) pass
  • All accessibility test cases (TC-A11Y-*) pass
  • Keyboard navigation works
  • Focus states are visible
  • Screen reader announces correctly
  • Color contrast passes WCAG AA

Performance Verification

  • No layout shift (CLS < 0.1)
  • No janky animations
  • Paint time is acceptable
  • No unnecessary re-renders

Design Reference

Design Files

  • Figma: N/A
  • Sketch: N/A
  • XD: N/A

Design System Reference

  • Component: Current DashboardPage cards and AppLayout sidebar
  • Pattern: Role-based dashboard/sidebar navigation parity

Style Guide

  • Spacing: Existing app navigation spacing
  • Typography: Existing app navigation typography
  • Colors: Existing theme tokens
  • Components: AppLayout

Additional Context

Related Issues

  • Related to: role-based dashboard/sidebar consistency
  • Related to: route-aware role selection in sidebar
  • Related to: sidebar icon consistency across roles

Browser/Device Specific Notes

No browser-specific rendering issue identified. The problem is caused by sidebar logic and menu/icon definitions.

Additional Notes

Current git status shows only one modified file:

  • src/components/AppLayout.tsx

So this issue description is scoped to the changes currently present in the working tree:

  • route-aware role resolution
  • missing sidebar action parity
  • icon alignment between sidebar and dashboard
  • redundant role-switch prevention