Slide Over Panel is a Livewire component that provides drawers (slide overs) that support multiple children while maintaining state. This package is inspired by wire-elements/modal, a livewire component that renders modals with state management on livewire. If you've already used it, then the behavior is the same, except that instead of a vil modal, it will open a drawer.
To get started, require the package via Composer
composer require laravelcm/livewire-slide-oversAdd the Livewire directive @livewire('slide-over-panel') directive to your master layout.
<html>
<body>
<!-- content -->
@livewire('slide-over-panel')
</body>
</html>You can run php artisan make:livewire ShoppingCart to make the initial Livewire component. Open your component class and make sure it extends the SlideOverComponent class:
<?php
namespace App\Livewire;
use Laravelcm\LivewireSlideOvers\SlideOverComponent;
class ShoppingCart extends SlideOverComponent
{
public function render()
{
return view('livewire.shopping-cart');
}
}To open a slide over you will need to dispatch an event. To open the ShoppingCart slide over for example:
<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch('openPanel', { component: 'shopper-cart' })">View cart</button>
<!-- Inside existing Livewire component -->
<button wire:click="$dispatch('openPanel', { component: 'shopping-cart' })">View cart</button>
<!-- Taking namespace into account for component Shop/Actions/ShoppingCart -->
<button wire:click="$dispatch('openPanel', { component: 'shop.actions.shopping-cart' })">View cart</button>wip...
wip..
composer testLivewire Slide Over is open-sourced software licensed under the MIT license.