badge on the hamburger menu ?
Anyone point me to a solution for putting a badge on the hamburger menu button that appears for the smaller viewports ?
5 Replies
Maybe you can use the RenderHook to add the badge to the PanelsRenderHook::TOPBAR_START
https://filamentphp.com/docs/3.x/support/render-hooks
That is one option I was looking into. Could you make any badge or icon placed via that route expand the sidebar, and could you hide it easily enough when it is expanded?
you can check out the icon button in the source to see where it is used vendor/filament/filament/resources/views/components/topbar/index.blade.php
the renderhook is right before the button
but you can use the x-on:click="$store.sidebar.open()" on your code 🙂
Thanks shall look into that.
Solution
Solution I went with:
In the panel:
->renderHook(
PanelsRenderHook::TOPBAR_START,
function () : string {
if (Filament::getTenant()->hasAlerts()) {
return Blade::render('@livewire(\'area.persona.livewire.sidebar-alert\')');
}
return '';
}
)
LW Component:
use Livewire\Component;
class SidebarAlert extends Component
{
public function render()
{
return view('web.components.panel.persona.sidebar.alert');
}
}
Blade:
<div class="lg:hidden">
<x-filament::icon-button
type="button"
wire:loading.attr="disabled"
x-on:click="$store.sidebar.open()"
x-show="! $store.sidebar.isOpen"
icon="phosphor-caret-circle-double-right-duotone"
size="lg"
class="animate-pulse text-red-500"
tooltip="You have alerts, expand the sidebar to see them"
/>
</div>