Truncate sidebar item text

[ganyicz]

The scenario

A sidebar item with long text will overflow

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

The problem

The user can't just apply truncate to the sidebar item because the class will be applied to a parent div:

<flux:sidebar.item class="truncate">

<div class="truncate">
    <div data-content class="whitespace-nowrap">...</div>
</div>

This would require a tailwind selector that targets the child element:

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

The solution

I think it's reasonable to truncate by default, which is what this PR does.

An alternative could be a prop enabling this behavior: <flux:sidebar.item truncate>

Fixes #2336