Overview

Migrate MUI navigation and overlay components to shadcn/ui equivalents.

Parent Issue: #18993
Estimated Duration: 2-3 days
Priority: Medium
Depends on: #18995 (Core Components)

Component Usage Analysis

• Menu: 7 usages
• MenuItem: 21 usages
• MenuList: 1 usage
• Dialog: 3 usages
• DialogTitle: 2 usages
• DialogContent: 2 usages
• DialogContentText: 2 usages
• DialogActions: 5 usages
• Popover: 1 usage
• Drawer: 1 usage
• Collapse: 5 usages
• Total: 40 navigation component instances

Tasks

Menu Components

• Generate DropdownMenu component suite
• Create DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem
• Set up menu positioning and keyboard navigation
• Migrate Menu components (7 instances)
• Replace MenuItem components (21 instances)

Dialog Components

• Generate Dialog component suite
• Create DialogTrigger, DialogContent, DialogHeader, DialogFooter
• Set up modal behavior and focus management
• Migrate Dialog components (3 instances)
• Replace DialogTitle, DialogContent, DialogActions (9 instances)

Other Navigation

• Generate Popover component
• Create Sheet component for Drawer replacement
• Generate Collapsible component
• Set up proper animations and transitions

Files to Update

Menu Usage

• User profile menus
• Context menus
• Action menus in tables
• Navigation dropdowns
• Settings menus

Dialog Usage

• Confirmation dialogs
• Form modals
• Information dialogs
• Delete confirmations
• Settings modals

Other Components

• Sidebar navigation (Drawer)
• Expandable sections (Collapse)
• Tooltip-like overlays (Popover)

Implementation Strategy

1. Generate Components: Create all navigation shadcn components
2. Menu Migration: Start with simple dropdown menus
3. Dialog Migration: Convert modal dialogs
4. Complex Navigation: Handle advanced navigation patterns
5. Animations: Ensure smooth transitions

Acceptance Criteria

• All Menu components use DropdownMenu
• All Dialog components use shadcn Dialog
• Keyboard navigation works correctly
• Focus management is proper
• Animations are smooth
• Accessibility features maintained
• All navigation tests pass

Component API Compatibility

Menu Component Mapping

// MUI -> shadcn
Menu -> DropdownMenu with DropdownMenuContent
MenuItem -> DropdownMenuItem
MenuList -> DropdownMenuContent

Dialog Component Mapping

// MUI -> shadcn
Dialog -> Dialog with DialogContent
DialogTitle -> DialogHeader with DialogTitle
DialogContent -> DialogContent body
DialogActions -> DialogFooter

Testing Requirements

• Keyboard navigation testing
• Focus management testing
• Accessibility testing
• Animation testing
• Mobile interaction testing

Documentation

• Navigation component patterns
• Accessibility guidelines
• Animation configuration