fix: No items displayed in FluentAppBar after upgrade to 4.10.3

[JamesNK]

🐛 Bug Report

💻 Repro or Code Sample

I updated from 4.10.1 to 4.10.3 and the items in FluentAppBar are no longer visible. I just see ... menu option:

🤔 Expected Behavior

Should work like it did in 4.10.3.

😯 Current Behavior

Just ... menu option visible.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

[JamesNK]

PR: dotnet/aspire#6228

[vnbaaij]

Are you sure it is not a stale script being cached. Have you tried a hard refresh?

Any errors in Dev Tools?

[JamesNK]

I retried with an empty cache + hard refresh. No difference.

Dev tools console is clean:

[dvoituron]

This problem is due to a change in the name of the class we use in this component. @vnbaaij it would be better to document that this is a Breaking change in our documentation.

So, you need to adapt your MainLayout.razor.css replacing nav-menu-container with fluent-appbar (lines 56 and 168)

Before:

After

[vnbaaij]

Sorry 🙈! My bad...