{{-- 1) Define the slide-over modal --}}
<x-filament::modal
    id="news-modal"
    slide-over            {{-- ← makes it slide in from the right --}}
    width="xl"
    :sticky-header="true"
>
    <x-slot name="heading">
        Today’s News
    </x-slot>

    <div>
        @livewire(\App\Filament\Widgets\LatestNewsWidget::class)  
    </div>
</x-filament::modal>

{{-- 2) Render a sidebar-style link that dispatches the open-modal event --}}
<ul class="fi-sidebar-group">
    <li class="fi-sidebar-item-wrapper">
        <a
            href="#"
            class="fi-sidebar-item flex items-center space-x-2"
            @click.prevent="$dispatch('open-modal', { id: 'news-modal' })"
        >
            <x-heroicon-o-newspaper class="w-5 h-5" />
            <span class="hover:underline cursor-pointer">Read Latest News</span>
        </a>
    </li>
</ul>