indigo
/
LinkDesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
LinkDesk/frontend/docs/user-menu.md

5.5 KiB
Raw Blame History

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

// 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

// 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

// 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:

<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

<DropdownMenuItem @click="customAction">
  <CustomIcon class="size-4" />
  Custom Action
</DropdownMenuItem>

Role-Based Features

const showCustomFeature = computed(() => {
  return user.value?.role === 'custom_role'
})

Avatar Customization

// 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.