[Bug]: BarToggler not showing up (present in official Tailwind Demo app)

[kcrandall]

Blazorise Version

1.7.0

What Blazorise provider are you running on?

Tailwind

Link to minimal reproduction or a simple code snippet

@namespace APIApp.Blazor.Shared

<Bar @ref="@bar"
     Breakpoint="Breakpoint.Desktop"
     Background="Background.Dark"
     ThemeContrast="ThemeContrast.Light">
    <BarToggler Border="Border.Is0" />
    <BarBrand>
        Robin
    </BarBrand>
    <BarMenu>
        <BarStart>
            <BarItem>
                <BarLink To="home" Match="Blazorise.Match.All">Home</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="counterauth">CounterAuth</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="support-ticket">OpenSupportTicket</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="logout">Logout</BarLink>
            </BarItem>
            <BarItem>
                <BarLink To="authentication/login">Login</BarLink>
            </BarItem>
        </BarStart>
        <BarEnd>
            <BarItem>
                <Button Color="Color.Primary">Sign up</Button>
                <Button Color="Color.Secondary">Log in</Button>
            </BarItem>
        </BarEnd>
    </BarMenu>
</Bar>

@code {
    private Bar bar;

    private bool _sidebarVisible;

    private void ToggleSidebar()
    {
        Console.WriteLine("Toggle sidebar");
        _sidebarVisible = !_sidebarVisible;
    }
}

using dotnet 9. asp.net 9

MainLayout.razor

@inherits LayoutComponentBase

<div class="page">
    <NavMenu />

    <div class="main">
        <div class="content px-4">
            @Body
        </div>
    </div>
</div>

App.razor

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Authorization

<CascadingAuthenticationState>
    <Blazorise.ThemeProvider Theme="@theme">
        <Router AppAssembly="@typeof(App).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        @{
                            if (!context.User.Identity.IsAuthenticated)
                            {
                                <RedirectToLogin/>
                            }
                            else
                            {
                                <p>You are not authorized to access this resource.</p>
                            }
                        }
                    </NotAuthorized>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
        @* <MessageProvider /> *@
        @* <NotificationProvider /> *@
        @* <PageProgressProvider /> *@
        @* <ModalProvider UseModalStructure Animated Size="ModalSize.ExtraLarge" /> *@
        @* <ApplicationLoadingIndicator /> *@
    </Blazorise.ThemeProvider>
</CascadingAuthenticationState>

@code {
    private Blazorise.Theme theme = new Blazorise.Theme
    {
        // Enable gradients
        IsGradient = true,

        // Enable rounded corners for all elements
        IsRounded = true,

        // Define color options based on Tailwind dark mode colors
        ColorOptions = new ThemeColorOptions
        {
            Primary = "#4B5563",  // Tailwind dark-gray
            Secondary = "#9CA3AF", // Tailwind light-gray
            Success = "#10B981",   // Tailwind green
            Info = "#3B82F6",      // Tailwind blue
            Warning = "#F59E0B",   // Tailwind yellow
            Danger = "#EF4444",    // Tailwind red
            Light = "#F3F4F6",     // Tailwind light background
            Dark = "#1F2937",      // Tailwind dark background
        },

        // Background color for body to fit dark theme
        BackgroundOptions = new ThemeBackgroundOptions
        {
            Primary = "#111827",  // Tailwind dark background
        },
        
        // Text colors to ensure visibility on dark background
        TextColorOptions = new ThemeTextColorOptions()
        {
            Primary = "#F3F4F6",   // Light text on dark background
            Secondary = "#D1D5DB", // Light gray text
        }
    };
}

_Host.cshtml

@page "/"
@namespace APIApp.Blazor.Pages
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment WebHostEnvironment

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Blazor App</title>
    <base href="~/" />
    @* <link href="css/bootstrap.min.css" rel="stylesheet" /> *@
    @*<link href="css/site.css" rel="stylesheet" />*@
    <link href="APIApp.styles.css" rel="stylesheet" />
    @* <link href="css/bundle.css" rel="stylesheet" /> *@
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
    
    @if (WebHostEnvironment.IsDevelopment())
    {
        <!-- Development dependencies -->
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />
        <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
    
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="_content/Blazorise.Tailwind/blazorise.tailwind.config.js?v=1.7.0.0"></script>
    
        <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
        <link href="_content/Blazorise.Tailwind/blazorise.tailwind.css" rel="stylesheet" />
    }
    else
    {
        <!-- Production dependencies -->
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />
        <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
    
        <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
        <link href="_content/Blazorise.Tailwind/blazorise.tailwind.prod.css" rel="stylesheet" />
    }
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    
    @if (WebHostEnvironment.IsDevelopment())
    {
        <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
    }
    <script src="_framework/blazor.server.js"></script>
    @*<script src="js/bundle.js"></script>*@
    <script src="js/infinite-scrolling.js"></script>
    <script src="js/audioPlayer.js"></script>
    <script src="js/audioRecorder.js"></script>
    <script src="js/site.js"></script>
   
    </body>
</html>

Startup.cs has
services.AddBlazorise( options =>
{
} )
.AddTailwindProviders()
.AddFontAwesomeIcons();

Steps to reproduce & bug description

Basically just collapse the page to make it smaller adn the top bar removes all the elements but doesnt show the BarToggler.

What is expected?

the bar toggler will show up

What is actually happening?

it isnt showing up

What browsers do you see the problem on?

Safari, Chrome

Any additional comments?

Everything is working fine in the bar expect for when its collapsed the bartogler doesnt show up.

[kcrandall]

There is another weird behavior. When i dont have the BarToggler the BarBrand is left aligned. When i add the BarToggler before the BarBrand it moves the BarBrand all the way to the right side of the screen. This indicates something is getting added its just not showing the hamburger icon to do anything.

[kcrandall]

[kcrandall]

this is also present on the offical tailwind demo page.
https://tailwinddemo.blazorise.com/tests/forms

it is not present on the boostrap page
https://bootstrapdemo.blazorise.com/tests/skeleton

it seems like this is a tailwind issue

to replicate resize the demo to be less wide and you wont see the hamburger