Portal UI

Sheet

Displays a callout for user attention.
Quick note on browser compatibility.

Unfortunately both are not (yet) supported in Firefox. The component will still work as expected but it will be missing the enter & exit animations.

Edit profile
Make changes to your profile here. Click save when you're done. 
<div x-data="{openSheet : ''}">
    <x-portal::button variant="outline" x-on:click="openSheet='default'">Open Sheet</x-portal::button>
    <x-portal::sheet id="default" class="w-[500px] sm:!max-w-[540px]">
        <x-portal::sheet.header>
            <x-portal::sheet.title>Edit profile</x-portal::sheet.title>
            <x-portal::sheet.description>
                Make changes to your profile here. Click save when you're done.
            </x-portal::sheet.description>
        </x-portal::sheet.header>
        <x-portal::sheet.main>
            <div class="grid gap-4 py-4">
                <div class="flex items-center gap-4">
                    <x-portal::label htmlFor="name" class="text-right w-[100px]">
                        Name
                    </x-portal::label>
                    <x-portal::input id="name" value="pedro duarte" class="col-span-3" />
                </div>
                <div class="flex items-center gap-4">
                    <x-portal::label htmlFor="username" class="text-right w-[100px]">
                        Username
                    </x-portal::label>
                    <x-portal::input id="username" value="@peduarte" class="col-span-3" />
                </div>
            </div>
        </x-portal::sheet.main>
        <x-portal::sheet.footer>
            <x-portal::sheet.close type="submit">
                Save changes
            </x-portal::sheet.close>
        </x-portal::sheet.footer>
    </x-portal::sheet>
</div>

Publishing Component

If you want to customize the components, you can publish them by running the following command : 

php artisan vendor:publish --tag=portal-ui:sheet --force


Side

top sheet
right sheet
bottom sheet
left sheet 
<div x-data="{openSheet : ''}">
    @php
        $sides = ['top', 'right', 'bottom', 'left'];
    @endphp
    @foreach($sides as $side)
        <x-portal::button variant="outline" x-on:click="openSheet='sheet_{{$side}}'">{{$side}}</x-portal::button>
        <x-portal::sheet id="sheet_{{$side}}" side="{{$side}}">
            <x-portal::sheet.header>
                <x-portal::sheet.title>{{$side}} sheet</x-portal::sheet.title>
            </x-portal::sheet.header>
        </x-portal::sheet>
    @endforeach
</div>