Sideover

Side panel (drawer) that opens from the right or left and pushes the main layout. Uses the same surface and separator tokens as the app layout for a consistent look.

Basic Usage

Open a sideover with $this->sideover(Component::class)->open() (Livewire component extending SideoverComponent). The panel uses the same visual tokens as the layout (e.g. bg-surface, border-separator) and can open from the left or right, pushing the main content instead of overlaying it.

<neura::button wire:click="openBasicSideover">
    Open Sideover
</neura::button>

// In the Livewire component (with InteractsWithNeuraKit trait):
$this->sideover(SideoverDemo::class)->open();

With a Livewire SideoverComponent

Create a sideover by extending Neura\Kit\Support\Sideover\SideoverComponent. The panel content is fully controlled by your Livewire component view.

Creating a Sideover Component

Your component must extend SideoverComponent. Open it with $this->sideover(Component::class).

<?php

namespace App\View\Components;

use Illuminate\Contracts\View\View;
use Neura\Kit\Support\Sideover\SideoverComponent;

class FiltersSideover extends SideoverComponent
{
    public function render(): View
    {
        return view('components.filters-sideover');
    }
}

Open from a Livewire component (with the InteractsWithNeuraKit trait):

// Open
$this->sideover(FiltersSideover::class)->open();

// With arguments (component props)
$this->sideover(FiltersSideover::class)->with('categoryId', 1)->open();

// Side and width
$this->sideover(FiltersSideover::class)->side('left')->width('lg')->open();

Panel structure (header, body, footer)

Use neura::sideover.header, neura::sideover.body, and neura::sideover.footer to match the layout header/footer styling (bg-surface backdrop-blur-xl, border-separator). The header includes a close button by default; set closeable="false" to hide it. The footer supports align (left, center, right, between).

<div class="flex flex-col h-full min-h-0">
    <neura::sideover.header>
        <neura::heading level="h2" size="lg">{{ $title }}</neura::heading>
    </neura::sideover.header>

    <neura::sideover.body>
        
    </neura::sideover.body>

    <neura::sideover.footer align="right">
        <neura::button variant="ghost" wire:click="closeSideover">Cancel</neura::button>
        <neura::button variant="primary" wire:click="closeSideover">Confirm</neura::button>
    </neura::sideover.footer>
</div>

Opening Side (Left / Right)

The sideover can open from the right (default) or left. Set side when opening or in the component config.

$this->sideover(MySideover::class)->side('right')->open();
$this->sideover(MySideover::class)->side('left')->open();

Widths

Predefined widths: xs, sm, md, lg, xl, 2xl, full.

$this->sideover(MySideover::class)->width('sm')->open();
$this->sideover(MySideover::class)->width('md')->open();  // default
$this->sideover(MySideover::class)->width('lg')->open();
$this->sideover(MySideover::class)->width('xl')->open();
$this->sideover(MySideover::class)->width('2xl')->open();
$this->sideover(MySideover::class)->width('full')->open();

Closing the Sideover

From inside the Livewire component, call closeSideover(). From outside, use NeuraKitSideover.close(). When closeOnEscape is enabled (default), pressing Escape closes the sideover.

<!-- In the Sideover component Blade view -->
<neura::button wire:click="closeSideover">Close</neura::button>

<!-- From a Livewire component -->
$this->sideover(MySideover::class)->close();

<!-- From JS (global API) -->
NeuraKitSideover.close();
NeuraKitSideover.close(true);  // force close
NeuraKitSideover.goBack();      // return to previous sideover

Nested Sideovers (Stack)

You can open a sideover from another. The active sideover is pushed onto a stack; when you close the latest, the previous one is restored. Use goBack() to return to the previous sideover without closing the current one.

Stack Behavior

Opening a new sideover from an existing one pushes the current onto the stack. When you close the new one, the previous is shown again with its state preserved.

Best Practices

✓ Do

Use sideovers for forms, filters, secondary details, or settings panels
Always provide an explicit close button in the panel
Choose a width that fits the content (avoid full for few fields)
Structure content with header, body, and footer for clarity

✗ Don't

Don't stack too many sideovers (limit to 2–3 levels)
Don't disable Escape close without good reason
Don't use a sideover for primary content that could be a dedicated page

SideoverCall (PHP)

With the InteractsWithNeuraKit trait, use $this->sideover(Component::class) to chain options then open() or close().

Method	Description
with(key, value)	Argument passed to the Livewire component.
withMany(array)	Multiple arguments.
side('left'\|'right')	Which side the panel opens from.
width('xs'\|'sm'\|'md'\|…)	Width: xs, sm, md, lg, xl, 2xl, full.
open()	Opens the sideover (dispatches JS to the manager).
close(force?)	Closes the active sideover.

Global API (JavaScript)

Method	Description
NeuraKitSideover.open(component, args, attrs)	Opens a sideover. component: full Livewire class name, args: props, attrs: { side, width, closeOnClickAway, … }
NeuraKitSideover.close(force?, skip?, destroy?)	Closes the active sideover. force: destroy component, skip/destroy for stack.
NeuraKitSideover.goBack()	Closes the active sideover and shows the previous one in the stack.

SideoverComponent Methods

Method	Description
closeSideover()	Closes the sideover (dispatches to the manager).
goBack()	Closes the active sideover and returns to the previous one.
closeSideoverWithEvents(events)	Dispatches events then closes the sideover.
sideoverSide()	Static: 'left' or 'right'.
sideoverWidth()	Static: xs, sm, md, lg, xl, 2xl, full.
closeSideoverOnClickAway()	Static: whether to close on backdrop click.
closeSideoverOnEscape()	Static: whether to close on Escape key.