# Mobile Menu Band Context Fix - Test Plan

## Overview
This test plan verifies that the mobile menu band context issue has been resolved. The fix implements:
1. TopBar component with band switcher (mobile only)
2. Band-context-aware navigation in BottomNavBar
3. Proper responsive layout switching

## Test Environment
- Browser: Chrome/Firefox/Safari
- Screen sizes: Mobile (<768px), Desktop (≥768px)
- Test data: Multiple bands created in the system

## Test Cases

### Test 1: Band Context Preservation in Mobile View
**Precondition**: User is logged in with at least 2 bands created

**Steps**:
1. Resize browser to mobile size (<768px width)
2. Navigate to Band A's library (`/bands/band-a-id`)
3. Click "Settings" in bottom navigation
4. Click "Library" in bottom navigation

**Expected Result**:
- Should return to Band A's library (`/bands/band-a-id`)
- Should NOT redirect to first band or lose context

**Actual Result**: ⬜ Pass / ⬜ Fail

### Test 2: TopBar Band Switching
**Precondition**: User is logged in with multiple bands

**Steps**:
1. Resize browser to mobile size (<768px width)
2. Click the band switcher in TopBar (top right)
3. Select a different band from dropdown
4. Observe navigation

**Expected Result**:
- Should navigate to selected band's library
- TopBar should show selected band name and initials
- URL should be `/bands/selected-band-id`

**Actual Result**: ⬜ Pass / ⬜ Fail

### Test 3: Player Navigation with Band Context
**Precondition**: User is in a band with songs

**Steps**:
1. Resize browser to mobile size (<768px width)
2. Navigate to a band's library
3. Click "Player" in bottom navigation

**Expected Result**:
- If band has songs: Should navigate to band's songs list
- If no songs: Button should be disabled
- Navigation should preserve band context

**Actual Result**: ⬜ Pass / ⬜ Fail

### Test 4: Members Navigation to Band Settings
**Precondition**: User is in a band

**Steps**:
1. Resize browser to mobile size (<768px width)
2. Navigate to a band's library
3. Click "Members" in bottom navigation

**Expected Result**:
- Should navigate to band's members settings (`/bands/current-band-id/settings/members`)
- Should preserve band context

**Actual Result**: ⬜ Pass / ⬜ Fail

### Test 5: Responsive Layout Switching
**Precondition**: User is logged in

**Steps**:
1. Start with desktop size (≥768px width)
2. Verify Sidebar is visible, TopBar and BottomNavBar are hidden
3. Resize to mobile size (<768px width)
4. Verify TopBar and BottomNavBar are visible, Sidebar is hidden
5. Resize back to desktop size
6. Verify original desktop layout returns

**Expected Result**:
- Layout should switch smoothly between mobile/desktop
- No layout glitches or overlapping elements
- Content should remain accessible in both modes

**Actual Result**: ⬜ Pass / ⬜ Fail

### Test 6: Desktop Regression Test
**Precondition**: User is logged in

**Steps**:
1. Use desktop size (≥768px width)
2. Test all Sidebar functionality:
   - Band switching dropdown
   - Navigation to Library, Player, Settings
   - User dropdown
3. Verify no changes to desktop behavior

**Expected Result**:
- All existing Sidebar functionality should work exactly as before
- No regressions in desktop experience

**Actual Result**: ⬜ Pass / ⬜ Fail

### Test 7: URL-Based Band Context
**Precondition**: User is logged in with multiple bands

**Steps**:
1. Manually navigate to `/bands/band-b-id` in mobile view
2. Click "Library" in bottom navigation
3. Click "Settings" then back to "Library"

**Expected Result**:
- Should always return to band-b-id, not default to first band
- URL should consistently show correct band ID

**Actual Result**: ⬜ Pass / ⬜ Fail

## Manual Testing Instructions

### Setup
1. Start development server: `npm run dev`
2. Open browser to `http://localhost:5173`
3. Log in and create at least 2 test bands

### Execution
1. Follow each test case step-by-step
2. Mark Pass/Fail for each test
3. Note any unexpected behavior or errors

### Verification
- All test cases should pass
- No console errors should appear
- No visual glitches or layout issues
- Navigation should be smooth and context-preserving

## Success Criteria
✅ All 7 test cases pass
✅ No console errors in browser developer tools
✅ No TypeScript or ESLint errors (`npm run check`)
✅ Mobile and desktop layouts work correctly
✅ Band context preserved across all mobile navigation