Fix alignment of brand component icon in sidebar

[ShaungBhone]

This pull request makes a minor update to the sidebar brand component's layout by adding center alignment to its contents. This ensures that the items within the sidebar brand are properly centered.

• Added the justify-center class to the sidebar brand container in brand.blade.php to center its contents horizontally.

When I use the collapsible sidebar icon is misaligned! b/c that component doesn't have 'justify-center'

[ganyicz]

Hi @ShaungBhone

thanks for the PR!

I can confirm this happens when using the Livewire starter kit and changing the sidebar to be collapsible on desktop. This happens because the size of the logo in the starter kit is size-8 instead of size-6 which is the default in Flux.

I will convert the PR to a draft and likely resubmit it myself later so that the description follows our conventions.

[ShaungBhone]

Thanks for looking into this!

Just to clarify, the issue isn't specific to the logo size. The problem occurs regardless of whether it's size-8 or size-6. The core issue is that the logo needs justify-center (or similar centering) to be properly aligned when the sidebar is collapsed, independent of the actual size of the logo itself.

[ganyicz]

Try changing the size in resources/views/components/app-logo.blade.php from size-8 to size-6 and the logo will become perfectly centered:

Which now aligns with the sidebar example in Flux:

So the core issue is that the logo isn't properly aligned with sizes under/beyond size-6.

Even with justify-center, we will probably need to adjust the padding there as the logo now overflows its container horizontally and make sure this won't break anything else.

I'll address all these points in a separate PR.

But thanks for pointing at this!

[ganyicz]

@ShaungBhone

I'm sorry if my response came across as dismissive.

The PR requires additional work and it will be easier to investigate this myself, hope you understand that. Additionally the description doesn't follow the standard template.

In the future consider creating an issue instead.

Either way I appreciate you bringing this up.

[ShaungBhone]

@ganyicz

No worries at all, I completely understand!
Actually it's not make sense reduce the size is align in the middle b/c my client needs bigger their logo. Flux default size is okay with only 1440p. Bigger screen size is not okay.

Currently, I will publish by myself.

Thanks for taking the time to look into it and for the feedback.

Appreciate you taking this forward!