Please allow profile component without an avatar

[ryanmortier]

If I'm using the <flux:profile> component in a header/navbar/sidebar, I'd like the ability to use it without an avatar image and instead only using the user's name. Example:

Right now I'm simply overriding the component by adding a conditional if statement:

+    <?php if ($avatar): ?>
        <div class="size-8 bg-zinc-400 rounded overflow-hidden">
            <?php if (is_string($avatar)): ?>
                <img src="{{ $avatar }}" />
            <?php else: ?>
                {{ $avatar }}
            <?php endif; ?>
        </div>
+    <?php endif; ?>

Can this be added to core?

edit: I understand that I could likely achieve this using a dropdown component or something but then I need to figure out which styles to use and keep these styles updated with Flux updates. It sort of goes against the reasoning for using a project like Flux imo.

[ju5t]

edit: I understand that I could likely achieve this using a dropdown component or something but then I need to figure out which styles to use and keep these styles updated with Flux updates. It sort of goes against the reasoning for using a project like Flux imo.

I don't understand. flux:profile is just a button. You don't have to use it. You can use any Flux-button for it.

[ryanmortier]

Tried that, it doesn't look the same.

[ju5t]

What do you expect it to look like? Because the image you posted can be replicated with a button.

<flux:dropdown>
    <flux:button icon-trailing="chevron-down" variant="subtle">Your Name</flux:button>

    <flux:menu>
        <flux:menu.item icon="plus">New post</flux:menu.item>
    </flux:menu>
</flux:dropdown>

You can of course us a different variant like primary for the button if that's closes to the style you're looking for.

[ryanmortier]

They're just off slightly.

For example here is the <flux:profile>

Here is a <flux:button variant="subtle">

Here is a <flux:button variant="ghost">

Here is a <flux:button variant="primary">

The only one that uses the same color as the navbar links is the <flux:profile>.

[ju5t]

Although not the cleanest, a workaround would be to add !text-zinc-500 to the class of the subtle or ghost variant. Another workaround would be to use the flux:navbar.item as a button in the dropdown, as it uses text-zinc-500 already.

I think this needs to be looked at, but I don't think it should be changed in the flux:profile component. Because when you remove the avatar it's just a button. Curious what the Flux-team thinks of this.