Implement HomeController, update home route, and enhance menu components with close functionality

2025-12-20 09:11:10 -05:00 · 2025-02-25 16:49:45 -05:00
parent b4462ba89e
commit 8951e59f49
14 changed files with 511 additions and 233 deletions
--- a/memory-bank/design/MenuComponents.md
+++ b/memory-bank/design/MenuComponents.md
@@ -0,0 +1,125 @@
+# Menu Components
+
+## Menu Behavior (Auth, User, and Mobile)
+
+All menu components implement consistent behavior for opening and closing using pure Livewire functionality:
+
+1. **Click Outside to Close**
+   - Uses `wire:click.away="close"` to close menu when clicking outside
+   - Calls the Livewire `close()` method directly
+
+2. **Toggle on Button Click**
+   - Uses `wire:click.stop="toggle"` on the trigger button/image
+   - Prevents event bubbling with wire:click.stop
+   - Toggle method directly flips the boolean state
+   - Simple and efficient state management
+
+3. **Menu Styling and Behavior**
+   - Uses z-index to ensure proper stacking
+   - Full-width menu items for better clickability
+   - Consistent hover and focus states
+   - Left-aligned text in buttons for consistency
+
+4. **Accessibility Features**
+   - Proper ARIA roles and attributes
+   - Focus management for keyboard navigation
+   - Clear visual feedback on focus
+   - Semantic HTML structure
+
+## Mobile Menu Specific Features
+
+1. **Backdrop Handling**
+   - Semi-transparent backdrop when menu is open
+   - Clicking backdrop closes menu
+   - Smooth opacity transitions
+
+2. **Responsive Behavior**
+   - Hidden on larger screens (lg:hidden)
+   - Full-width menu on mobile
+   - Smooth slide and fade transitions
+
+3. **Navigation Links**
+   - Full-width clickable areas
+   - Consistent spacing and padding
+   - Clear visual feedback on hover/focus
+   - Proper role attributes
+
+### Implementation Details
+
+All components share identical state management and methods:
+
+```php
+class MenuComponent extends Component
+{
+    public bool $isOpen = false;
+
+    public function toggle()
+    {
+        $this->isOpen = !$this->isOpen;
+    }
+
+    public function close()
+    {
+        $this->isOpen = false;
+    }
+}
+```
+
+Menu buttons include proper accessibility attributes:
+```blade
+<button
+    wire:click.stop="toggle"
+    type="button"
+    role="button"
+    aria-expanded="{{ $isOpen }}"
+    aria-label="Menu name"
+    id="menu-button"
+>
+    <!-- Button content -->
+</button>
+```
+
+Menu containers have proper ARIA roles:
+```blade
+<div
+    wire:key="menu-name"
+    wire:click.away="close"
+    role="menu"
+    aria-orientation="vertical"
+    aria-labelledby="menu-button"
+    class="... {{ $isOpen ? 'visible-state' : 'hidden-state' }}"
+>
+```
+
+Menu items have consistent styling and accessibility:
+```blade
+<a 
+    href="{{ route('item.route') }}" 
+    role="menuitem"
+    class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
+>
+    <i class="w-5 fas fa-icon"></i>
+    <span>Menu Item</span>
+</a>
+```
+
+Mobile menu backdrop:
+```blade
+<div
+    class="fixed inset-0 bg-black/50 transition-opacity duration-300 lg:hidden {{ $isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none' }}"
+    wire:click="close"
+></div>
+```
+
+This implementation:
+- Uses pure Livewire without Alpine.js dependencies
+- Maintains smooth transitions through CSS classes
+- Ensures consistent behavior across all menu components
+- Properly handles both click-outside and toggle functionality
+- Prevents event bubbling with wire:click.stop
+- Ensures proper re-rendering with wire:key
+- Uses simplified toggle logic for better reliability
+- Provides consistent styling and behavior for all menu items
+- Implements proper accessibility features throughout
+- Supports both mouse and keyboard interactions
+- Handles mobile-specific requirements elegantly