Sidebar disappeared after Flux UI update

Hello I recently updated fluxui and tailwindcss in my laravel project. All of a sudden the sidebar in the dashboard does not show anymore (only after refresh you see it poping in for less than 1sec). Here is my main layout file:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Personal Energy Growth</title>

    @livewireStyles
    @filamentStyles
    @vite('resources/css/app.css')
</head>

<body class="min-h-screen bg-zinc-100">
    @include('components.layouts.admin-header')

    <flux:main class="p-3">
        {{ $slot }}
    </flux:main>

    <flux:toast />

    @livewireScripts
    @filamentScripts
    @fluxScripts
    @vite('resources/js/app.js')
</body>

</html>

and the inlcuded admin-header

<flux:sidebar sticky stashable class="bg-linear-to-r from-primary-300 to-primary-800 shadow-md z-50">
    <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />

    <flux:brand href="#" logo="{{ asset('images/LogoPEG.png') }}" name="Personal Energy Growth"
        class="max-lg:hidden dark:hidden" />

    <flux:navlist variant="outline">
        <flux:navlist.item icon="home" href="{{ route('admin_dashboard') }}" class="text-zinc-700">Dashboard
        </flux:navlist.item>
        <flux:navlist.item icon="inbox" badge="12" href="{{ route('admin_user') }}" class="text-zinc-700">Benutzer
        </flux:navlist.item>
        <flux:navlist.item icon="document-text" href="{{ route('admin_post_index') }}" class="text-zinc-700">Blogposts
        </flux:navlist.item>
        <flux:navlist.item icon="calendar" href="{{ route('admin_course') }}" class="text-zinc-700">Kurse
        </flux:navlist.item>
        <flux:navlist.item icon="envelope-open" href="{{ route('admin.newsletters') }}" class="text-zinc-700">Newsletter
        </flux:navlist.item>
    </flux:navlist>

    <flux:spacer />

</flux:sidebar>

<flux:header
    class="flex justify-end bg-white lg:bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">

    <flux:navbar class="lg:hidden w-full">
        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

        <flux:spacer />

    </flux:navbar>



    <flux:dropdown position="top" align="start">
        <flux:profile avatar="{{ Auth::user()->profile_photo_url }}" />

        <flux:navmenu>
            <flux:navmenu.item href="{{ route('profile.show') }}">Profile</flux:navmenu.item>

            <form method="POST" action="{{ route('logout') }}" x-data>
                @csrf
                <flux:navmenu.item href="{{ route('logout') }}" @click.prevent="$root.submit();">
                    {{ __('Log Out') }}
                </flux:navmenu.item>
        </flux:navmenu>
    </flux:dropdown>
</flux:header>

What is wrong on my code?

Thanks for any help

LaryAI

1 year ago

Level 58

It sounds like your sidebar is briefly appearing and then disappearing after your Flux UI and TailwindCSS update. This is a common issue when there are breaking changes in component libraries, especially around how sidebars and overlays are managed.

Here are some steps and checks to help you resolve the issue:

1. Check for Breaking Changes in Flux UI

After an update, always check the Flux UI changelog or documentation for any breaking changes, especially regarding sidebar or layout components. There may be changes in required props, structure, or initialization.

2. Ensure Sidebar Placement

Make sure your <flux:sidebar> is placed outside of your main content container and as a direct child of <body> or at the root of your layout. Some UI libraries require the sidebar to be at the root for overlays and toggling to work properly.

Example:

<body>
    @include('components.layouts.admin-header') <!-- Contains sidebar and header -->

    <flux:main class="p-3">
        {{ $slot }}
    </flux:main>

    <flux:toast />

    <!-- Scripts -->
</body>

If your sidebar is inside another container that gets re-rendered, it may be unmounted and remounted, causing the flicker.

3. Check for JavaScript Errors

Open your browser's developer console and look for any JavaScript errors. If Flux UI's scripts fail to initialize, the sidebar may not work as expected.

4. Ensure Scripts Are Loaded Once

Make sure you are not loading Flux UI scripts multiple times or in the wrong order. In your layout, you have:

@livewireScripts
@filamentScripts
@fluxScripts
@vite('resources/js/app.js')

This is generally correct, but ensure that @fluxScripts is included after the sidebar markup and only once per page.

5. TailwindCSS JIT/Content Issues

If you updated TailwindCSS, ensure your tailwind.config.js includes all relevant paths, especially if Flux UI uses custom classes or dynamic class names.

Example:

content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './vendor/flux-ui/**/*.blade.php', // If Flux UI provides blade components
],

6. Sidebar Toggle Logic

With the new version, the toggle logic or required attributes might have changed. Double-check the documentation for <flux:sidebar> and <flux:sidebar.toggle>. Sometimes, the attribute names or expected structure change between versions.

7. Z-Index and Visibility Issues

Your sidebar has z-50 and a custom background. Ensure there are no new global styles or Tailwind config changes that could be hiding it.

8. Minimal Working Example

Try isolating the sidebar in a minimal Blade file to see if it works outside your current layout. This can help you determine if the issue is with the sidebar itself or with the surrounding layout.

Summary Checklist

Check Flux UI changelog for breaking changes.
Place <flux:sidebar> at the root of your layout.
Ensure @fluxScripts is loaded once and after the sidebar markup.
Update tailwind.config.js content paths.
Check for JavaScript errors in the browser console.
Review new Flux UI docs for sidebar/toggle usage.

Example Updated Layout

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Personal Energy Growth</title>

    @livewireStyles
    @filamentStyles
    @vite('resources/css/app.css')
</head>
<body class="min-h-screen bg-zinc-100">
    @include('components.layouts.admin-header') <!-- Sidebar and header here -->

    <flux:main class="p-3">
        {{ $slot }}
    </flux:main>

    <flux:toast />

    @livewireScripts
    @filamentScripts
    @fluxScripts
    @vite('resources/js/app.js')
</body>
</html>

If after these steps the sidebar is still not working, please provide:

The exact versions of Flux UI and TailwindCSS you are using.
Any console errors you see.
The relevant part of your tailwind.config.js.

This will help further diagnose the issue!