Sidebar: Long items don't truncate

[mdavis1982]

Flux version

v2.10.2

Livewire version

v4.0.1

Tailwind version

v4.1.18

Browser and Operating System

Chrome on macOS

What is the problem?

When a sidebar item has a long piece of text, the text is not truncated:

<flux:sidebar.item href="#" wire:navigate>This is some really long text that will not fit in the sidebar.</flux:sidebar.item>

Adding truncate to the item does nothing, and wrapping the text in an element and adding truncate there also doesn't do anything.

In sidebar/item.blade.php on line 72, adding truncate makes this look much nicer:

<?php if ($slot->isNotEmpty()): ?>
    <div class="truncate
        in-data-flux-sidebar-collapsed-desktop:not-in-data-flux-sidebar-group-dropdown:hidden
        flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&]:hidden [[data-nav-sidebar]_[data-nav-footer]_&]:block" data-content>{{ $slot }}</div>
<?php endif; ?>

This could be controlled with an option on the component.

Code snippets to replicate the problem

<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 name="Test">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
                <path
                    fill="currentColor"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
                />
            </svg>
        </flux:sidebar.brand>

        <flux:sidebar.collapse class="in-data-flux-sidebar-on-desktop:not-in-data-flux-sidebar-collapsed-desktop:-mr-2"/>
    </flux:sidebar.header>

    <flux:sidebar.nav>
        <flux:sidebar.group heading="Test">
            <flux:sidebar.item href="#" wire:navigate>This is some really long text that will not fit in the sidebar</flux:sidebar.item>
        </flux:sidebar.group>
    </flux:sidebar.nav>
</flux:sidebar>

Screenshots/ screen recordings of the problem

How do you expect it to work?

I would expect to be able to truncate the text in the sidebar if it's too long. Either automatically, or through an attribute.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ganyicz]

Hi @mdavis1982,

thanks for reporting!

I've submitted a PR.

As a temporary solution (or if the PR ends up not being accepted) you can apply truncate using a tailwind class that targets the element with text content:

<flux:sidebar.item class="*:data-content:truncate">

[mdavis1982]

@ganyicz Thank you for the workaround 😄