Skip to content

Forward icon class to sidebar group icon - #2844

Open
ghabriel25 wants to merge 3 commits into
livewire:mainfrom
ghabriel25:fix/sidebar-group
Open

ghabriel25 wants to merge 3 commits into
livewire:mainfrom
ghabriel25:fix/sidebar-group

Conversation

@ghabriel25

@ghabriel25 ghabriel25 commented Sep 26, 2026 •

Copy link
Copy Markdown
Contributor

The scenario

Currently when using expandable sidebar group with a heading, there is no way to modify icon class (e.g. color using text-orange-500) with icon:class attribute forwarding like flux::button and flux::toggle already has.

The only workaround is to use icon slot but this might cause some issue because whenever sidebar collapsed into icon only, it uses some default class

in-data-flux-menu:text-zinc-400 
in-data-flux-menu:dark:text-white/80 
in-data-flux-menu:[[data-flux-sidebar-group-dropdown]>button:hover_&]:text-current

The problem

Sidebar group icon class was hardcoded in their component and there is no pre-setup to get it from icon:class attribute.

The solution

Defined icon class which can contains icon:class attribute value and use fixed size following flux::sidebar.item:

@php
$iconClasses = Flux::classes('size-4') // following sidebar.item which uses fixed size
    ->add($attributes->pluck('icon:class'));
@endphp

Now user can define icon:class attribute to modify the icon

<flux:sidebar.group expandable 
            heading="{{ __('My Posts') }}"
            icon="square-3-stack-3d"
            icon:class="text-orange-500 dark:text-orange-400">
    ....
</flux:sidebar.group>
Dark mode Light mode
image image image image

Note

We could support sidebar.item as well but for now I'll keep it focus on the current issue

Fixes #2843

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sidebar group menu styling is not possible when sidebar is collapsed

1 participant