Improve Initial Render Behavior for Stashable Sidebar

[mimin100]

Flux version

v1.0.29

Livewire version

v3.5.17

What is the problem?

The current behavior of the stashable sidebar causes an unpleasant visual jump during page load. When the page initially loads, the sidebar is rendered in its fully expanded state before being stashed based on the stored or default state. This results in a brief but noticeable layout shift that can disrupt the user experience.

Code snippets

<flux:sidebar stashable sticky class="border-r bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700">
    <flux:sidebar.toggle icon="x-mark" />
    <flux:brand href="/" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc."
        class="px-2 dark:hidden" />
    <flux:brand href="/" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc."
        class="hidden px-2 dark:flex" />
    <flux:navlist variant="outline">
        <flux:navlist.item icon="home" href="/">Home</flux:navlist.item>
    </flux:navlist>
</flux:sidebar>

How do you expect it to work?

The sidebar should honor its stashed state from the very beginning of the render process, avoiding any noticeable layout shifts.

Proposed Solution:
Instead of applying translateX(-100%) inline via the x-init hook, the stashed state should be handled with a Tailwind CSS class like -translate-x-full from the beginning.

(Excerpt from flux-pro/stubs/resources/views/flux/sidebar/index.blade.php)
So instead of

if ($stashable) {
    $attributes = $attributes->merge([
        'x-bind:data-stashed' => '! screenLg',
        'x-resize.document' => 'screenLg = window.innerWidth >= 1024',
        'x-init' => '$el.style.transform = \'translateX(-100%)\'; $el.removeAttribute(\'data-mobile-cloak\'); $el.classList.add(\'transition-transform\')',
    ])->class([
        'max-lg:[&[data-mobile-cloak]]:hidden',
        '[[data-show-stashed-sidebar]_&]:!translate-x-0 lg:!translate-x-0',
        '!z-20 data-[stashed]:!left-0 data-[stashed]:!fixed data-[stashed]:!top-0 data-[stashed]:!min-h-dvh data-[stashed]:!max-h-dvh'
    ]);
}

A solution could be

if ($stashable) {
    $attributes = $attributes->merge([
        'x-bind:data-stashed' => '! screenLg',
        'x-resize.document' => 'screenLg = window.innerWidth >= 1024',
        'x-init' => '$el.removeAttribute(\'data-mobile-cloak\'); $el.classList.add(\'transition-transform\')',
    ])->class([
        '-translate-x-full',
        'max-lg:[&[data-mobile-cloak]]:hidden',
        '[[data-show-stashed-sidebar]_&]:!translate-x-0',
        '!z-20 data-[stashed]:!left-0 data-[stashed]:!fixed data-[stashed]:!top-0 data-[stashed]:!min-h-dvh data-[stashed]:!max-h-dvh'
    ]);
}

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.

[joshhanley]

@mimin100 thanks for reporting! I'm unable to replicate this issue. When I test it locally, whether I set my browser to be on a slow 3G connection or normal, with javascript disabled and enabled, I'm unable to get the flash of the sidebar that you are describing.

Any chance you could provide some more details on how we can replicate this issue? Can you please provide a layout file and a Volt component that I can use that demonstrates the issue as well as step by step instructions on how to trigger it/ see it? Thanks!

[mimin100]

@joshhanley Thanks for looking into this! I've created a bare minimum layout and a Volt component where the issue persists, regardless of the browser or connection speed. It happens consistently during page load—the sidebar is initially rendered in an expanded state and then gets "stashed" after the fact.

There aren't any specific steps to reproduce the issue other than simply loading the page. Below, I've included the layout file and the Volt component I used for testing. Let me know if you need further clarification or additional details.

Layout File

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name') }}</title>

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @fluxStyles
</head>

<body class="min-h-screen bg-white dark:bg-zinc-800">
    <main>
        @yield('content')
    </main>

    @fluxScripts
</body>

</html>

Volt component:

@extends('components.layouts.simplelayout')

@section('content')
    <?php
    
    use function Livewire\Volt\{state};
    
    ?>
    <div>
        <flux:sidebar.toggle icon="menu-icon" class="mr-3" />
        <flux:sidebar stashable sticky class="border-r bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-700">
            <flux:sidebar.toggle icon="x-mark" />

            <flux:brand href="/" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="px-2 dark:hidden" />
            <flux:brand href="/" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc."
                class="hidden px-2 dark:flex" />

            <flux:navlist variant="outline">
                <flux:navlist.item icon="home" href="/">Home</flux:navlist.item>
            </flux:navlist>
        </flux:sidebar>
    </div>
@endsection

To better illustrate the behavior, I've also attached a GIF showing the issue.

[joshhanley]

@mimin100 thanks! Will have a look after the holidays 🙂