Livewire Slide Over Laravel Package

Getting Started

Minimal Steps

1. Installation:

   composer require wika-group/livewire-slide-over
   

   Add the Livewire directive to your master layout (e.g., resources/views/layouts/app.blade.php):

   @livewire('slide-over-panel')
   

2. Create a Slide Over Component:

   php artisan make:livewire ShoppingCart
   

   Update the generated component (app/Http/Livewire/ShoppingCart.php) to extend SlideOverComponent:

   use WikaGroup\LivewireSlideOver\SlideOverComponent;
   
   class ShoppingCart extends SlideOverComponent
   {
       public $title = "My Cart";
       public $width = "400px"; // Default width
   }
   

3. Trigger the Slide Over: Use the @slideOver directive in your Blade view:

   <button wire:click="$emit('openSlideOver', 'ShoppingCart')">Open Cart</button>
   

4. Render the Slide Over: Define a slot in your component’s Blade template (resources/views/livewire/shopping-cart.blade.php):

   <x-slide-over :title="$title" :width="$width">
       <div class="p-4">
           <!-- Your slide over content -->
           <p>Cart items go here.</p>
       </div>
   </x-slide-over>
   

Implementation Patterns

Core Workflows

1. State Management:

   • Leverage the component’s built-in state (e.g., $isOpen, $width, $position) to control visibility and dimensions dynamically.
   • Example: Toggle visibility via a button click:

     public function toggle()
     {
         $this->isOpen = !$this->isOpen;
     }
     

     <button wire:click="toggle">Toggle Slide Over</button>
     

2. Nested Slide Overs:

   • Support hierarchical slide overs by nesting components. Use unique IDs for each:

     public $slideOverId = 'nested-cart'; // Unique identifier
     

     Trigger from a child component:

     @slideOver('nested-cart')
     

3. Dynamic Content:

   • Pass data to slide overs via properties or slots. Example with slots:

     <x-slide-over :title="$title">
         @slot('content')
             <livewire:child-component :data="$data" />
         @endslot
     </x-slide-over>
     

4. Integration with Livewire Actions:

   • Use Livewire’s $emit and $listen to sync slide over state with other components:

     public function mount()
     {
         $this->listenFor('openSlideOver');
     }
     
     public function openSlideOver()
     {
         $this->isOpen = true;
     }
     

Integration Tips

• Styling: Customize the slide over’s appearance by overriding the default Blade template (resources/views/vendor/wika-group/livewire-slide-over/slide-over.blade.php).
• Animations: Extend the component’s JavaScript to add custom animations (e.g., fade-in/out) by modifying the slide-over.js file in the package’s resources directory.
• Accessibility: Ensure compliance by adding ARIA attributes (e.g., aria-modal, aria-hidden) to the slide over’s root element.

Gotchas and Tips

Pitfalls

1. Namespace Conflicts:

   • After upgrading from batnieluyo/livewire-slide-over, ensure all usages of WireComponents\LivewireSlideOvers\SlideOverComponent are replaced with WikaGroup\LivewireSlideOver\SlideOverComponent. Run the upgrade script if needed:

     php ./vendor/bin/slideover-upgrade
     

2. Z-Index Management:

   • Slide overs may overlap other elements if not properly layered. Use CSS to adjust the z-index of the slide over container (default: 1050 in the package’s styles).

3. State Persistence:

   • Slide over state ($isOpen) is tied to the component’s lifecycle. Avoid relying on it across page reloads unless persisted (e.g., via session or database).

4. Multiple Instances:

   • Each slide over component must have a unique ID ($slideOverId). Duplicate IDs will cause rendering issues.

Debugging

• Console Errors: Check for JavaScript errors in the browser console when triggering slide overs. Common issues include:
  • Missing @livewire('slide-over-panel') directive in the layout.
  • Incorrect component registration (e.g., typo in ShoppingCart class name).
• Livewire Logs: Enable Livewire’s debug mode to trace state updates:

  Livewire::configureDebugMode(); // In a service provider or config file
  

Tips

1. Reusable Slide Over Templates:

   • Create a base slide over component (e.g., BaseSlideOver) that extends SlideOverComponent and includes common UI elements (e.g., headers, footers). Extend this for specific use cases.

2. Conditional Rendering:

   • Use Livewire’s if directive to conditionally render slide overs based on logic:

     @if($showSlideOver)
         @slideOver('unique-id')
     @endif
     

3. Performance:

   • For complex slide overs, lazy-load content using Livewire’s defer or dynamic components to reduce initial load time.

4. Testing:

   • Test slide over interactions with Livewire’s testing utilities. Example:

     $this->livewire(ShoppingCart::class)
         ->call('toggle')
         ->assertSet('isOpen', true);
     

5. Custom Events:

   • Extend the component’s JavaScript to emit custom events (e.g., slide-over-opened) for analytics or additional logic:

     // In slide-over.js
     document.addEventListener('slide-over-opened', (e) => {
         console.log('Slide over opened:', e.detail.id);
     });