feat(dees-appui-appbar): implement dynamic menu system with support for submenus, shortcuts, and user account features

feat(dees-contextmenu): adjust menu item positioning for improved alignment
fix(dees-appui-appbar.demo): add demo functionality for app bar with dynamic menu items and user interactions
feat(interfaces): create IAppBarMenuItem interface for enhanced menu item configurations
docs: add comprehensive improvement plan for dees-appui-appbar component

readme.plan.md

@@ -0,0 +1,202 @@
+# dees-appui-appbar Improvement Plan
+
+## Phase 1: Core Menu System
+
+### Menu Data Structure
+- [x] Extend existing `plugins.tsclass.website.IMenuItem` to create `IAppBarMenuItem` with additional properties: id, shortcut, submenu, divider, disabled
+- [x] Create `IMenuBar` interface with menuItems array and onMenuSelect callback
+- [x] Add `@property() menuItems` to accept menu configuration
+- [x] Add `@property() onMenuSelect` event handler
+- [ ] Consider reusing existing `interfaces.ITab` for simpler menu scenarios
+
+### Basic Menu Rendering
+- [x] Replace hardcoded menu items with dynamic rendering from menuItems property
+- [x] Add support for menu item icons
+- [x] Implement menu item disabled state styling
+- [x] Add menu separator/divider support
+
+### Dropdown Implementation
+- [x] Create dropdown container component (consider reusing logic from dees-contextmenu)
+- [x] Implement click to open/close dropdown
+- [x] Add dropdown positioning logic (below menu item)
+- [x] Implement click outside to close
+- [x] Add dropdown arrow/caret indicator
+- [x] Style dropdown with shadows and borders
+- [ ] Ensure visual consistency with existing dees-contextmenu component
+
+### Keyboard Navigation
+- [x] Add tabindex to menu items
+- [x] Implement Tab navigation between top-level items
+- [x] Add Enter key to open dropdown
+- [x] Implement arrow keys for dropdown navigation
+- [x] Add Escape key to close dropdown
+- [x] Implement Home/End keys for first/last item
+
+### Submenu Support
+- [ ] Detect submenu items and add arrow indicator
+- [ ] Implement submenu positioning (to the right)
+- [ ] Add hover delay before opening submenu
+- [ ] Handle nested keyboard navigation
+- [ ] Prevent submenus from going off-screen
+
+## Phase 2: Breadcrumb Navigation & Theming
+
+### Breadcrumb System
+- [ ] Define `IBreadcrumb` interface with label, path, icon
+- [x] Add `@property() breadcrumbs` array
+- [x] Add `@property() breadcrumbSeparator` (default '>')
+- [x] Implement breadcrumb rendering with separators
+- [x] Add click handlers for navigation
+- [x] Emit 'breadcrumb-navigate' custom event
+- [ ] Add breadcrumb truncation for long paths
+- [ ] Implement breadcrumb overflow with horizontal scroll
+
+### Theme Support
+- [x] Add CSS variables for all colors and sizes
+- [x] Create `--appbar-height` variable (default 40px)
+- [x] Add `--appbar-bg`, `--appbar-text`, `--appbar-border` variables
+- [x] Implement `--appbar-hover` and `--appbar-active` states
+- [x] Add `@property() theme` with 'light' | 'dark' options
+- [x] Create light theme CSS variables
+- [x] Add theme toggle to demo
+
+### Visual Improvements
+- [x] Add smooth transitions for hover states
+- [ ] Implement ripple effect on click
+- [x] Add focus ring styles for accessibility
+- [x] Improve menu item padding and spacing
+- [ ] Add subtle gradient or texture to appbar
+
+## Phase 3: Search & User Account
+
+### Search Integration
+- [x] Add search icon in center section
+- [ ] Create expandable search input
+- [x] Add `@property() showSearch` boolean
+- [ ] Implement Cmd/Ctrl+K keyboard shortcut
+- [ ] Add search input with placeholder
+- [x] Emit 'search-submit' event
+- [ ] Add search suggestions dropdown
+- [ ] Implement recent searches storage
+
+### User Account Section
+- [ ] Define `IUserAccount` interface
+- [x] Add `@property() user` for user data
+- [x] Render user avatar (with fallback to initials)
+- [x] Display user name
+- [x] Add status indicator (online/offline/busy/away)
+- [ ] Create user dropdown menu
+- [ ] Add logout/settings options
+- [x] Emit 'user-menu-open' event
+
+## Phase 4: Platform & Accessibility
+
+### Platform-Specific Features
+- [ ] Add `@property() platform` detection
+- [x] Conditionally show window controls
+- [ ] Implement platform-specific styling (macOS/Windows/Linux)
+- [ ] Add platform-specific keyboard shortcuts
+- [ ] Handle window dragging per platform
+- [ ] Add fullscreen toggle button
+
+### Window Controls Integration
+- [ ] Make window controls position configurable
+- [x] Add `@property() showWindowControls`
+- [ ] Handle window controls on different platforms
+- [ ] Add minimize/maximize/close functionality
+- [ ] Style window controls to match theme
+
+### Accessibility (A11Y)
+- [x] Add proper ARIA roles (menubar, menuitem)
+- [x] Implement aria-haspopup for dropdowns
+- [x] Add aria-expanded state
+- [ ] Include aria-label for navigation
+- [ ] Support screen reader announcements
+- [ ] Add high contrast mode support
+- [ ] Implement focus trap in dropdowns
+- [ ] Add skip navigation link
+
+### Responsive Design
+- [ ] Add breakpoint detection
+- [ ] Implement hamburger menu for mobile
+- [ ] Create slide-out menu drawer
+- [ ] Make breadcrumbs responsive
+- [ ] Hide non-essential items on small screens
+- [ ] Add touch gesture support
+
+## Phase 5: Advanced Features
+
+### Notification System
+- [ ] Add notification icon with badge
+- [ ] Create `@property() notifications` array
+- [ ] Implement notification dropdown
+- [ ] Add notification actions (mark read, dismiss)
+- [ ] Emit notification events
+- [ ] Add notification sound option
+- [ ] Implement notification grouping
+
+### Plugin System
+- [ ] Define `IAppBarPlugin` interface
+- [ ] Add plugin registration method
+- [ ] Implement plugin rendering slots
+- [ ] Add plugin positioning (left/center/right)
+- [ ] Support plugin weight for ordering
+- [ ] Create plugin lifecycle hooks
+
+### Custom Slots
+- [ ] Add named slots for sections
+- [ ] Implement slot change detection
+- [ ] Style slotted content appropriately
+- [ ] Document slot usage
+
+### Context Menus
+- [ ] Add right-click context menu support
+- [ ] Implement context menu positioning
+- [ ] Add context-specific menu items
+- [ ] Support custom context menus
+
+## Phase 6: Performance & Polish
+
+### Performance Optimizations
+- [ ] Implement virtual scrolling for long menus
+- [ ] Add lazy loading for submenu content
+- [ ] Debounce search input
+- [ ] Memoize menu rendering
+- [ ] Optimize re-renders with lit's `guard` directive
+- [ ] Add loading states for async operations
+
+### Testing
+- [x] Create comprehensive demo page
+- [ ] Add unit tests for menu logic
+- [ ] Test keyboard navigation
+- [ ] Test platform-specific behavior
+- [ ] Add visual regression tests
+- [ ] Test accessibility with screen readers
+- [ ] Performance benchmark tests
+
+### Documentation
+- [ ] Document all properties and methods
+- [x] Create usage examples
+- [ ] Add migration guide from current version
+- [ ] Document keyboard shortcuts
+- [ ] Create accessibility guide
+- [ ] Add troubleshooting section
+
+### Polish
+- [ ] Add loading skeletons
+- [ ] Implement error states
+- [ ] Add empty states
+- [ ] Create onboarding tooltips
+- [ ] Add animation preferences (reduced motion)
+- [ ] Implement print styles
+
+## Completion Tracking
+
+- Phase 1: 20/22 tasks
+- Phase 2: 10/15 tasks
+- Phase 3: 6/16 tasks
+- Phase 4: 6/24 tasks
+- Phase 5: 0/18 tasks
+- Phase 6: 2/20 tasks
+
+**Total: 44/115 tasks completed**