# Quick Start - Testing Sidebar Locally

## 🚀 Fastest Way to Test

**Use the local test file:**

```bash
# Navigate to the sidebar directory
cd shared/sidebar

# Open the local test file
open test-sidebar-local.html
```

Or use a simple HTTP server:

```bash
# From project root
python -m http.server 8000
# Then visit: http://localhost:8000/shared/sidebar/test-sidebar-local.html
```

## 📁 File Structure

The local test file (`test-sidebar-local.html`) uses **relative paths**:
- `../auth-utils.js` - Goes up one level to `shared/`
- `../config.js` - Goes up one level to `shared/`
- `sidebar-component.js` - Same directory
- `sidebar.css` - Same directory

## ✅ What's Fixed

1. **Path Detection:** Component automatically detects local vs WordPress environment
2. **Global Functions:** Set up immediately (no waiting for async loading)
3. **Error Handling:** Functions retry if components aren't loaded yet
4. **Component Status:** Test page shows which components are loaded

## 🧪 Testing Checklist

- [ ] Open `test-sidebar-local.html` in browser
- [ ] Check console for any errors
- [ ] Click "Toggle Sidebar" button
- [ ] Resize browser to test responsive behavior
- [ ] Test logged in state (uncomment mock data)
- [ ] Test login form
- [ ] Test forgot password (if logged out)

## 🔧 Troubleshooting

**If you see 404 errors:**
- Make sure you're opening from `shared/sidebar/` directory
- Or use a local server from project root
- Check that all files exist in `shared/sidebar/`

**If functions don't work:**
- Wait a moment for components to load
- Check console for initialization logs
- Functions will retry automatically

**If sidebar doesn't appear:**
- Check browser console for errors
- Verify all component files exist
- Check network tab for failed imports

## 📝 Notes

- The **original** `test-sidebar.html` uses WordPress paths (for production testing)
- The **local** `test-sidebar-local.html` uses relative paths (for local testing)
- Both files work, but use the appropriate one for your environment