# Testing the Sidebar Locally

## Quick Start

1. **Open the test file:**
   ```bash
   # Serve locally (or open directly in browser)
   open shared/sidebar/test-sidebar.html
   ```

2. **Or use a local server:**
   ```bash
   # Python
   python -m http.server 8000
   # Then visit: http://localhost:8000/shared/sidebar/test-sidebar.html
   
   # Node.js (http-server)
   npx http-server -p 8000
   ```

## Test Scenarios

### 1. Responsive Behavior
- **Mobile (≤768px):** Resize browser or use dev tools
  - Sidebar should be hidden by default
  - Click hamburger → sidebar slides in as overlay
  - Click backdrop → sidebar closes
  
- **Regular (769px-1599px):** 
  - Sidebar starts collapsed (60px wide)
  - Click sidebar body → expands to full width
  - Click outside → collapses
  
- **Wide (≥1600px):**
  - Sidebar always unfolded (280px wide)
  - Toggle button hidden
  - No collapsing

### 2. Auth States

**Logged Out:**
- Login form visible in sidebar
- Profile section hidden
- "Log In" button in menu

**Logged In:**
- Login form hidden
- Profile section visible (with avatar)
- "Profile" button in menu
- Logout link at bottom

**To toggle:** Edit the mock data in `test-sidebar.html`:
```javascript
// Logged out (default)
window.COACHBACH.member = {
  mmId: null,
  isLoggedIn: false
};

// Logged in (uncomment)
window.COACHBACH.member = {
  mmId: 'test-123',
  isLoggedIn: true,
  firstName: 'John',
  first_name: 'John'
};
```

### 3. Menu Items
- Click menu items → should navigate (or show login if logged out)
- Active link highlighted
- 1on1 Coaching link hidden unless `coaching_slug` exists

### 4. Login Flow
- Click "Log In" or use `triggerSidebarLogin()`
- Login form appears
- Enter credentials → submits to `/wp-login.php`
- On success → page reloads with auth state

### 5. Forgot Password
- Click "Forgot?" pill in login form
- Modal opens with MemberMouse iframe
- Enter email → submits via iframe
- Success/error toast appears

### 6. Profile Upload (Logged In Only)
- Click avatar → file picker opens
- Select image → Cropper.js modal opens
- Crop image → uploads to Edge Function
- Avatar updates on success

## Debugging

### Check Console
- All components log initialization
- Auth state changes logged
- Errors logged with context

### Check Network Tab
- Sub-components load dynamically
- Edge Function calls for avatar upload
- Login form submissions

### Common Issues

**Sidebar not appearing:**
- Check console for import errors
- Verify paths are correct
- Check AuthUtils is loaded

**Menu items not working:**
- Check if SidebarMenu initialized
- Verify menu items rendered
- Check for JavaScript errors

**Profile upload fails:**
- Check Edge Function is deployed
- Verify environment variables set
- Check browser console for errors
- Verify user is authenticated

## Integration Testing

After local testing, test on actual pages:

1. **Index page:** Sidebar should load automatically
2. **Training plans page:** Bottom menu should appear
3. **Articles page:** Bottom menu should appear
4. **Other pages:** Sidebar available via hamburger