Init Repo
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
# User Menu Component
|
||||
|
||||
The UserMenu component provides a comprehensive user account interface in the sidebar footer, based on the NavUser pattern from shadcn-vue. It offers role-based features, account management, and quick access to user-specific functionality.
|
||||
|
||||
## Features
|
||||
|
||||
### 1. User Profile Display
|
||||
- **Avatar**: Shows user avatar with fallback to generated initials
|
||||
- **Name & Role**: Displays full name and user role
|
||||
- **Email**: Shows user email in dropdown header
|
||||
- **Consistent Branding**: Generated avatars with consistent colors
|
||||
|
||||
### 2. Role-Based Menu Items
|
||||
- **Developer**: API Keys management
|
||||
- **Admin/Coordinator**: Team Management, System Settings
|
||||
- **All Users**: Profile, Preferences, Notifications
|
||||
|
||||
### 3. Account Management
|
||||
- **Profile Settings**: Navigate to user profile page
|
||||
- **Preferences**: Access user preferences and settings
|
||||
- **Notifications**: Toggle notification settings
|
||||
- **Logout**: Secure logout with redirect to login page
|
||||
|
||||
### 4. Help & Support
|
||||
- **Help Documentation**: Access to help and support resources
|
||||
- **Keyboard Shortcuts**: Quick reference for keyboard shortcuts
|
||||
- **Interactive Shortcuts**: Shows common shortcuts in alert dialog
|
||||
|
||||
## Implementation
|
||||
|
||||
### Component Structure
|
||||
```
|
||||
UserMenu.vue
|
||||
├── DropdownMenu (shadcn-vue)
|
||||
├── Avatar (with fallback)
|
||||
├── Role-based menu items
|
||||
└── Account actions
|
||||
```
|
||||
|
||||
### User Data Integration
|
||||
- Uses `useAuthStore()` for user information
|
||||
- Reactive user display name and initials
|
||||
- Dynamic avatar generation with fallbacks
|
||||
|
||||
### Navigation Integration
|
||||
- Uses Vue Router for seamless navigation
|
||||
- Handles logout flow with proper cleanup
|
||||
- Maintains user context across routes
|
||||
|
||||
## Menu Structure
|
||||
|
||||
### Header Section
|
||||
- User avatar (generated or uploaded)
|
||||
- Full name and email
|
||||
- Role badge (capitalized)
|
||||
|
||||
### Role-Specific Features
|
||||
```typescript
|
||||
// Developer
|
||||
- API Keys management
|
||||
|
||||
// Admin/Coordinator
|
||||
- Team Management
|
||||
- System Settings (Admin only)
|
||||
```
|
||||
|
||||
### Standard User Options
|
||||
- Profile management
|
||||
- User preferences
|
||||
- Notification settings
|
||||
|
||||
### Help & Support
|
||||
- Help documentation
|
||||
- Keyboard shortcuts reference
|
||||
- Support resources
|
||||
|
||||
### Account Actions
|
||||
- Secure logout with confirmation
|
||||
|
||||
## Avatar System
|
||||
|
||||
### Avatar Sources (Priority Order)
|
||||
1. **User Upload**: `user.avatar_url` if available
|
||||
2. **Generated Avatar**: Dicebear API with initials
|
||||
3. **Fallback**: Initials in colored circle
|
||||
|
||||
### Avatar Generation
|
||||
```typescript
|
||||
// Consistent avatar based on user email
|
||||
const seed = user.value?.email || userDisplayName.value
|
||||
const avatarUrl = `https://api.dicebear.com/7.x/initials/svg?seed=${seed}&backgroundColor=3b82f6&textColor=ffffff`
|
||||
```
|
||||
|
||||
### Fallback Initials
|
||||
- First letter of first name + first letter of last name
|
||||
- Uppercase formatting
|
||||
- Consistent color scheme
|
||||
|
||||
## Responsive Behavior
|
||||
|
||||
### Desktop
|
||||
- Dropdown opens to the right of trigger
|
||||
- Full menu with all options
|
||||
- Hover states and smooth transitions
|
||||
|
||||
### Mobile
|
||||
- Dropdown opens below trigger
|
||||
- Touch-optimized spacing
|
||||
- Simplified layout for smaller screens
|
||||
|
||||
## Role-Based Access Control
|
||||
|
||||
### Permission Levels
|
||||
```typescript
|
||||
// Admin: Full access
|
||||
- Team Management
|
||||
- System Settings
|
||||
- All user features
|
||||
|
||||
// Coordinator: Management access
|
||||
- Team Management
|
||||
- Standard user features
|
||||
|
||||
// Developer: API access
|
||||
- API Keys management
|
||||
- Standard user features
|
||||
|
||||
// Artist/Director: Standard access
|
||||
- Profile and preferences only
|
||||
```
|
||||
|
||||
### Dynamic Menu Items
|
||||
Menu items are conditionally rendered based on user role:
|
||||
```vue
|
||||
<DropdownMenuItem v-if="user?.role === 'developer'">
|
||||
API Keys
|
||||
</DropdownMenuItem>
|
||||
```
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
### Supported Shortcuts
|
||||
- `⌘/Ctrl + B` - Toggle sidebar
|
||||
- `⌘/Ctrl + K` - Quick search
|
||||
- `⌘/Ctrl + ,` - Open preferences
|
||||
- `⌘/Ctrl + /` - Show help
|
||||
|
||||
### Shortcuts Display
|
||||
- Interactive dialog showing available shortcuts
|
||||
- Platform-specific key combinations
|
||||
- Context-sensitive shortcuts
|
||||
|
||||
## Integration Points
|
||||
|
||||
### Authentication Store
|
||||
- Reactive user data from `useAuthStore()`
|
||||
- Logout functionality with proper cleanup
|
||||
- Role-based permission checking
|
||||
|
||||
### Router Integration
|
||||
- Seamless navigation to user pages
|
||||
- Proper route handling for different user types
|
||||
- Logout redirect to login page
|
||||
|
||||
### Sidebar Integration
|
||||
- Consistent with sidebar collapse behavior
|
||||
- Proper positioning and spacing
|
||||
- Mobile-responsive dropdown positioning
|
||||
|
||||
## Customization
|
||||
|
||||
### Adding Menu Items
|
||||
```vue
|
||||
<DropdownMenuItem @click="customAction">
|
||||
<CustomIcon class="size-4" />
|
||||
Custom Action
|
||||
</DropdownMenuItem>
|
||||
```
|
||||
|
||||
### Role-Based Features
|
||||
```typescript
|
||||
const showCustomFeature = computed(() => {
|
||||
return user.value?.role === 'custom_role'
|
||||
})
|
||||
```
|
||||
|
||||
### Avatar Customization
|
||||
```typescript
|
||||
// Custom avatar service
|
||||
const userAvatar = computed(() => {
|
||||
return user.value?.avatar_url || generateCustomAvatar(user.value)
|
||||
})
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
### Features
|
||||
- **Keyboard Navigation**: Full keyboard support
|
||||
- **Screen Readers**: Proper ARIA labels
|
||||
- **Focus Management**: Logical tab order
|
||||
- **High Contrast**: Theme-aware colors
|
||||
|
||||
### ARIA Labels
|
||||
- Avatar has descriptive alt text
|
||||
- Menu items have proper roles
|
||||
- Dropdown has correct accessibility attributes
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Logout Process
|
||||
- Clears authentication tokens
|
||||
- Redirects to login page
|
||||
- Handles logout errors gracefully
|
||||
|
||||
### Role Verification
|
||||
- Server-side role validation
|
||||
- Client-side UI adaptation
|
||||
- Secure route protection
|
||||
|
||||
The UserMenu component provides a professional, role-aware user interface that adapts to different user types while maintaining consistency with the overall application design.
|
||||
Reference in New Issue
Block a user