User Menu Component

A flexible and modern user avatar component built with Lit that displays user information and provides a dropdown menu for user actions.

Features

• Circle Avatar: Displays user avatar image, initials, or default icon
• Smart Fallbacks: Automatically shows initials if no avatar is provided
• Customizable Text: Configurable logout text for internationalization
• Interactive Menu: Click to open dropdown menu with smooth animations
• Responsive Design: Works seamlessly across different screen sizes
• Accessibility: Proper ARIA attributes and keyboard navigation support

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | username | String | "" | User's display name (used for initials if no avatar) | | avatarUrl | String | "" | URL to user's profile image | | onLogout | Function | () => {} | Callback function called when logout is clicked | | logoutText | String | "Logout" | Customizable text for the logout button |

Usage

Basic Usage

<cdtr-user-menu 
  username="John Doe" 
  on-logout=${() => console.log('User logged out')}
></cdtr-user-menu>

With Avatar Image

<cdtr-user-menu 
  username="Jane Smith" 
  avatar-url="https://example.com/avatar.jpg"
  logout-text="Sign Out"
  on-logout=${() => handleLogout()}
></cdtr-user-menu>

Custom Logout Text

<cdtr-user-menu 
  username="María García" 
  logout-text="Cerrar Sesión"
  on-logout=${() => cerrarSesion()}
></cdtr-user-menu>

Default State (No Username/Avatar)

<cdtr-user-menu 
  logout-text="Logout"
  on-logout=${() => handleLogout()}
></cdtr-user-menu>

Avatar Display Logic

The component automatically determines what to display based on the provided props:

1. Avatar Image: If avatarUrl is provided, displays the image
2. Initials: If no avatarUrl but username is provided, shows first two letters
3. Default Icon: If neither is provided, shows a generic user icon

Styling

The component uses CSS custom properties for theming:

:root {
  --primary: #6366f1;        /* Primary color for avatar background */
  --primary-dark: #4f46e5;   /* Darker shade for gradients */
}

Events

• Click on avatar: Opens/closes the dropdown menu
• Click on logout: Triggers the onLogout callback and closes the menu
• Click outside: Automatically closes the menu

Browser Support

• Modern browsers with ES6+ support
• Requires Shadow DOM support
• Compatible with Lit 3.x

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

License

MIT