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 ?

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 '';
                }

            )

            ->renderHook(
                PanelsRenderHook::TOPBAR_START,
                function () : string {

                    if (Filament::getTenant()->hasAlerts()) {
                        return Blade::render('@livewire(\'area.persona.livewire.sidebar-alert\')');
                    }

                    return '';
                }

            )

            ->renderHook(
                PanelsRenderHook::TOPBAR_START,
                function () : string {

                    if (Filament::getTenant()->hasAlerts()) {
                        return Blade::render('@livewire(\'area.persona.livewire.sidebar-alert\')');
                    }

                    return '';
                }

            )

            ->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');
    }
}

use Livewire\Component;

class SidebarAlert extends Component
{
    public function render()
    {
        return view('web.components.panel.persona.sidebar.alert');
    }
}

use Livewire\Component;

class SidebarAlert extends Component
{
    public function render()
    {
        return view('web.components.panel.persona.sidebar.alert');
    }
}

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>

<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>

<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>

<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>

Jump to solution

Tally•5/13/25, 9:38 AM

Maybe you can use the RenderHook to add the badge to the PanelsRenderHook::TOPBAR_START
https://filamentphp.com/docs/3.x/support/render-hooks

Render hooks - Core Concepts - Filament

TTally Maybe you can use the RenderHook to add the badge to the PanelsRenderHook::TOPBA...

MatthewOP•5/13/25, 10:20 AM

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?

Tally•5/13/25, 10:22 AM

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

Tally•5/13/25, 10:23 AM

the renderhook is right before the button

Tally•5/13/25, 10:23 AM

but you can use the x-on:click="$store.sidebar.open()" on your code

MatthewOP•5/13/25, 10:26 AM

Thanks shall look into that.

Solution

Matthew•5/15/25, 11:24 AM

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 '';
                }

            )

            ->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');
    }
}

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>

<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>

badge on the hamburger menu ?

Similar Threads

Similar Threads

Similar Threads