This component only works with the main layout component.

Attributes

<x-slot:sidebar
drawer="main-drawer" {{-- Drawer ID trigger for mobile --}}
collapsible {{-- Make it collapsible --}}
collapse-text="Hide it" {{-- Custom collapsible text --}}
class="bg-base-100" {{-- Any Tailwind class--}}
right {{-- Move it to the right side --}}
right-mobile {{-- Move the drawer to the right side only for mobile devices --}}
>
...
</x-slot:sidebar>

Right side

By default, the sidebar is on the left side. But you can easily move it to the right side by adding the right attribute.

<x-main>
<x-slot:sidebar ... right>
...
</x-slot:sidebar>
</x-main>

The following example shows how to move the sidebar (the drawer) to the right side only for mobile devices.

<x-main>
<x-slot:sidebar ... right-mobile>
...
</x-slot:sidebar>
</x-main>

maryUI
Sponsor