[v1.0.16] Header demo works perfectly but copied code does not.

RyanPaiva56 commented 3 weeks ago

I'm on Chrome. When I go to this page: https://fluxui.dev/layouts/header, the demo in full screen works perfectly:

https://github.com/user-attachments/assets/1d9ea3af-c220-466f-a5b9-44ce0b66c73d

And then if I copy and paste the code into a fresh copy of Laravel Breeze (Livewire), it does this:

https://github.com/user-attachments/assets/570aa36f-156f-40c2-95e4-279a1a5a0002

I followed all of the install steps. Here's my head code:

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

And at the bottom:

        @fluxScripts
    </body>

Tailwind config:

content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        "./vendor/livewire/flux-pro/stubs/**/*.blade.php",
        "./vendor/livewire/flux/stubs/**/*.blade.php",
    ],

Here's the whole page of code:

<!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', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net" />
        <link
            href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap"
            rel="stylesheet"
        />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js']) @fluxStyles
    </head>
    <body class="min-h-screen">
        <flux:header
            container
            class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700"
        >
            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

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

            <flux:navbar class="-mb-px max-lg:hidden">
                <flux:navbar.item icon="home" href="#" current
                    >Home</flux:navbar.item
                >
                <flux:navbar.item icon="inbox" badge="12" href="#"
                    >Inbox</flux:navbar.item
                >
                <flux:navbar.item icon="document-text" href="#"
                    >Documents</flux:navbar.item
                >
                <flux:navbar.item icon="calendar" href="#"
                    >Calendar</flux:navbar.item
                >

                <flux:separator vertical variant="subtle" class="my-2" />

                <flux:dropdown class="max-lg:hidden">
                    <flux:navbar.item icon-trailing="chevron-down"
                        >Favorites</flux:navbar.item
                    >

                    <flux:navmenu>
                        <flux:navmenu.item href="#"
                            >Marketing site</flux:navmenu.item
                        >
                        <flux:navmenu.item href="#"
                            >Android app</flux:navmenu.item
                        >
                        <flux:navmenu.item href="#"
                            >Brand guidelines</flux:navmenu.item
                        >
                    </flux:navmenu>
                </flux:dropdown>
            </flux:navbar>

            <flux:spacer />

            <flux:navbar class="mr-4">
                <flux:navbar.item
                    icon="magnifying-glass"
                    href="#"
                    label="Search"
                />
                <flux:navbar.item
                    class="max-lg:hidden"
                    icon="cog-6-tooth"
                    href="#"
                    label="Settings"
                />
                <flux:navbar.item
                    class="max-lg:hidden"
                    icon="information-circle"
                    href="#"
                    label="Help"
                />
            </flux:navbar>

            <flux:dropdown position="top" align="start">
                <flux:profile avatar="https://fluxui.dev/img/demo/user.png" />

                <flux:menu>
                    <flux:menu.radio.group>
                        <flux:menu.radio checked>Olivia Martin</flux:menu.radio>
                        <flux:menu.radio>Truly Delta</flux:menu.radio>
                    </flux:menu.radio.group>

                    <flux:menu.separator />

                    <flux:menu.item icon="arrow-right-start-on-rectangle"
                        >Logout</flux:menu.item
                    >
                </flux:menu>
            </flux:dropdown>
        </flux:header>

        <flux:sidebar
            stashable
            sticky
            class="lg:hidden bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700"
        >
            <flux:sidebar.toggle class="lg:hidden" 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="px-2 hidden dark:flex"
            />

            <flux:navlist variant="outline">
                <flux:navlist.item icon="home" href="#" current
                    >Home</flux:navlist.item
                >
                <flux:navlist.item icon="inbox" badge="12" href="#"
                    >Inbox</flux:navlist.item
                >
                <flux:navlist.item icon="document-text" href="#"
                    >Documents</flux:navlist.item
                >
                <flux:navlist.item icon="calendar" href="#"
                    >Calendar</flux:navlist.item
                >

                <flux:navlist.group
                    expandable
                    heading="Favorites"
                    class="max-lg:hidden"
                >
                    <flux:navlist.item href="#"
                        >Marketing site</flux:navlist.item
                    >
                    <flux:navlist.item href="#">Android app</flux:navlist.item>
                    <flux:navlist.item href="#"
                        >Brand guidelines</flux:navlist.item
                    >
                </flux:navlist.group>
            </flux:navlist>

            <flux:spacer />

            <flux:navlist variant="outline">
                <flux:navlist.item icon="cog-6-tooth" href="#"
                    >Settings</flux:navlist.item
                >
                <flux:navlist.item icon="information-circle" href="#"
                    >Help</flux:navlist.item
                >
            </flux:navlist>
        </flux:sidebar>

        <flux:main container>
            <flux:heading size="xl" level="1"
                >Good afternoon, Olivia</flux:heading
            >

            <flux:subheading size="lg" class="mb-6"
                >Here's what's new today</flux:subheading
            >

            <flux:separator variant="subtle" />
            {{ $slot }}
        </flux:main>
        @fluxScripts
    </body>
</html>

pirlo17 commented 3 weeks ago

Check this issue already posted something related #489

RyanPaiva56 commented 3 weeks ago

@pirlo17 It wasn't that, but I did need to run npm run build and then it ran perfectly, so the issue isn't any of the Flux code, but I'll leave this here in case Caleb wants to add something to the install steps. Is this something folks know by convention? I'm switching to Laravel TALL monolith from Laravel/NextJS and I didn't think I would need to be running a watch/build command. Maybe tailwind is only building the used css/js and that's why it didn't load until I rebuilt.

I'm going to go read some docs and see if I'm missing a chunk of how this dev flow is supposed to go. Caleb, does it make sense to add a "workflow" guide or a quick paragraph to the install guide?

livewire / flux

[v1.0.16] Header demo works perfectly but copied code does not. #496