# Vision Sidebar Component
Rebuilt sidebar component for the SPA with modular architecture and improved UX.
## 📁 Component Structure
```
shared/sidebar/
├── sidebar-component.js # Main component (orchestrator)
├── sidebar.css # All styles
├── sidebar-responsive.js # Toggle logic (wide/regular/mobile)
├── sidebar-auth.js # Auth integration (login/logout/signup)
├── sidebar-forgot-password.js # Forgot password iframe wrapper
├── sidebar-menu.js # Menu items & navigation
├── sidebar-profile.js # Profile picture upload (NEW)
├── sidebar-bottom-menu.js # Bottom menu (mobile navigation)
└── sidebar-bottom-menu.css # Bottom menu styles
```
## ✨ Features
### Responsive Behavior
- **Wide screens (≥1600px)**: Always unfolded
- **Regular screens (769px-1599px)**: Collapsible sidebar
- **Mobile (≤768px)**: Overlay sidebar (opens via hamburger)
### Authentication
- Login form integrated into sidebar
- Sign-up via auth-modal component
- Logout functionality
- Forgot password (MemberMouse iframe wrapper)
### Menu Items
- Home
- Profile (shows "Log In" when logged out)
- 1on1 Coaching (conditional, based on member data)
- Workout Library
- Programs
- Knowledge Base
- **Removed**: Live Events, Kreuz Santa Monica
### Profile Management
- Profile picture display with fallback initial
- Avatar upload with Cropper.js (circular crop)
- Upload to Supabase Edge Function → S3
- Updates `members.avatar_url` in database
### Bottom Menu
- Mobile navigation menu
- Only shown on: training-plans, articles pages
- NOT shown on: index page
## 🚀 Setup
### 1. Database Migration
Run the migration to add `avatar_url` field:
```sql
-- File: supabase/migrations/add_avatar_url_to_members.sql
ALTER TABLE members ADD COLUMN IF NOT EXISTS avatar_url TEXT;
CREATE INDEX IF NOT EXISTS idx_members_avatar_url ON members(avatar_url) WHERE avatar_url IS NOT NULL;
```
### 2. Supabase Edge Function Setup
The `upload-avatar` Edge Function requires these environment variables (matching other functions):
```bash
SUPABASE_URL=your_supabase_url
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
S3_BUCKET=your_bucket_name
AWS_REGION=us-east-1
AWS_ACCESS_KEY_ID=your_access_key
AWS_SECRET_ACCESS_KEY=your_secret_key
CDN_BASE_URL=https://d2e4s9uqom2sw.cloudfront.net # Optional, defaults to CloudFront URL
AWS_SESSION_TOKEN=your_session_token # Optional, for temporary credentials
```
**Note:** These environment variables should already be set up for other Edge Functions. The `upload-avatar` function uses the same variable names.
### 3. Integration
The sidebar is already integrated into `index.html`:
```html
```
### 4. Bottom Menu Integration
Add to training-plans and articles pages:
```html
```
## 🔧 Usage
### Global Functions
The sidebar exposes these global functions for integration:
```javascript
// Toggle sidebar (used by hamburger buttons)
window.toggleVisionSidebar()
// Open sidebar
window.openVisionSidebar()
// Close sidebar
window.closeVisionSidebar()
// Show login form
window.triggerSidebarLogin()
```
### Component API
```javascript
const sidebar = document.querySelector('vision-sidebar');
// Open sidebar
sidebar.open()
// Close sidebar
sidebar.close()
// Toggle sidebar
sidebar.toggle()
// Show login form
sidebar.showLogin()
```
## 📝 Notes
### Auth Integration
- Uses `AuthUtils` for authentication state
- Integrates with `auth-modal` component for sign-up
- MemberMouse login/logout flows maintained
### Avatar Upload Flow
1. User clicks avatar → file picker opens
2. Image selected → Cropper.js modal opens
3. User crops image → circular crop applied
4. Upload to Supabase Edge Function
5. Edge Function uploads to S3 (`avatars/{user_id}/avatar.webp`)
6. Database updated (`members.avatar_url`)
7. Avatar display updated
### Performance
- Sidebar loads deferred (doesn't block page load)
- Sub-components loaded dynamically
- Profile component only loads if user is logged in
- Cropper.js loaded only when needed
## 🐛 Known Issues / TODOs
1. **Database Migration**: Run `add_avatar_url_to_members.sql` migration
2. **Edge Function Env Vars**: Set up environment variables for `upload-avatar` function
3. **Avatar URL Fetch**: Currently relies on `window.COACHBACH.member.avatar_url` - may need to fetch from Supabase if not available
4. **Toast System**: Uses `window.showBottomMenuToast()` - ensure this function exists or implement fallback
## 🔄 Migration from Old Sidebar
The old sidebar (`shared/vision_side_bar/side_bar.html`) can be removed after:
1. Testing new sidebar functionality
2. Verifying all features work
3. Confirming no breaking changes
## 📱 Mobile Considerations
- Sidebar uses overlay on mobile (≤768px)
- Bottom menu provides quick navigation
- Scroll lock when sidebar is open
- Touch-friendly interactions