Collapse non-expandable iconless sidebar.group down to a separator

[dev-idkwhoami]

The scenario

If you add a sidebar.group without setting either an icon nor expandable, its items won’t be visible when the sidebar is collapsed.

Because the in-data-flux-sidebar-collapsed-desktop:hidden is applied to the root div of the sidebar.group component the heading & items vanish when the sidebar is collapsed.

The code I used for this scenario:

<flux:sidebar sticky collapsible class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
    <flux:sidebar.header>
        <flux:sidebar.brand
            href="#"
            logo="https://fluxui.dev/img/demo/logo.png"
            logo:dark="https://fluxui.dev/img/demo/dark-mode-logo.png"
            name="Acme Inc."
        />

        <flux:sidebar.collapse />
    </flux:sidebar.header>

    <flux:sidebar.nav variant="outline">
        <flux:sidebar.group :heading="__('Management')">
            <flux:sidebar.item class="" icon="users" href="#">{{ __('Users') }}</flux:sidebar.item>
            <flux:sidebar.item icon="building-office" href="#">{{ __('Companies') }}</flux:sidebar.item>
            <flux:sidebar.item icon="folder" href="#">{{ __('Projects') }}</flux:sidebar.item>
            <flux:sidebar.item icon="clipboard" href="#">{{ __('Tasks') }}</flux:sidebar.item>
            <flux:sidebar.item icon="chart-bar" href="#">{{ __('Reports') }}</flux:sidebar.item>
        </flux:sidebar.group>

        <flux:sidebar.group :heading="__('Communication')">
            <flux:sidebar.item icon="envelope" href="#">{{ __('Messages') }}</flux:sidebar.item>
            <flux:sidebar.item icon="bell" href="#">{{ __('Notifications') }}</flux:sidebar.item>
            <flux:sidebar.item icon="calendar" href="#">{{ __('Calendar') }}</flux:sidebar.item>
            <flux:sidebar.item icon="chat-bubble-bottom-center-text" href="#">{{ __('Chat') }}</flux:sidebar.item>
            <flux:sidebar.item icon="megaphone" href="#">{{ __('Announcements') }}</flux:sidebar.item>
        </flux:sidebar.group>

        <flux:sidebar.group :heading="__('Settings')">
            <flux:sidebar.item icon="user" href="#">{{ __('Profile') }}</flux:sidebar.item>
            <flux:sidebar.item icon="shield-check" href="#">{{ __('Security') }}</flux:sidebar.item>
            <flux:sidebar.item icon="cog" href="#">{{ __('Preferences') }}</flux:sidebar.item>
            <flux:sidebar.item icon="key" href="#">{{ __('API Keys') }}</flux:sidebar.item>
            <flux:sidebar.item icon="credit-card" href="#">{{ __('Billing') }}</flux:sidebar.item>
        </flux:sidebar.group>
    </flux:sidebar.nav>

    <flux:sidebar.spacer/>

    <flux:sidebar.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
        {{ __('Repository') }}
    </flux:sidebar.item>

    <flux:sidebar.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
        {{ __('Documentation') }}
    </flux:sidebar.item>

    <!-- Desktop User Menu omitted -->
</flux:sidebar>

The problem

This makes the sidebar groups with a simple text heading undesirable and confusing to any users.

The solution

The changes in the PR do the following:

• Moves the in-data-flux-sidebar-collapsed-desktop:hidden a level down onto the sidebar group heading, as it would be to wide to show in collapsed form.
• Adds a flux:separator that will take the place of the heading to keep the items visually separated while the sidebar is collapsed.
• Adds a small pt-2 to the root div of the sidebar group while the sidebar is collapsed to create some space between the groups.

All together this looks like this:

[joshhanley]

@dev-idkwhoami thanks for the PR! Look good to me. In future be sure to match code style by adding empty lines between elements.

Edit: when playing with it, I noticed that it caused a vertical layout shift.

Before

So I have fixed it up so the padding is maintained to stop the layout shift.

After

[dev-idkwhoami]

You're right—totally forgot about code style. The vertical shift tripped me up a bit, but I think I just overthought it. Appreciate the help!

[calebporzio]

@ganyicz and @joshhanley - lets do some more thinking on this.

Why does our demo seem to work fine, but this doesn't?

Also from a ux perspective it concerns me to default to showing ALL the icons in the collapsed mode as it seems like a stressful user experience to go through twenty icon tooltips to find the one you want.

whereas tools like chatgpt and such show a refined list of icons, just the few essentials in the collapsed sidebar and then you have to expand to get the full set.

something I think we need to just put more thought into before hitting the button.

thanks everyone!