app bar

BlazorFluentUI/Components/Layout/MainLayout.razor

@@ -14,7 +14,6 @@
                 @Body
             </div>
         </FluentBodyContent>
-        <FluentDialogProvider />
         <FluentToastProvider MaxToastCount="10" />
     </FluentStack>
     <FluentFooter>

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -45,6 +45,7 @@
                 <FluentNavLink Href="compooverview" Icon="@(new Icons.Regular.Size20.Eye())" IconColor="Color.Accent">Overview</FluentNavLink>
                 <FluentNavLink Href="compoaccordion" Icon="@(new Icons.Regular.Size20.ListBar())" IconColor="Color.Accent">Accordion</FluentNavLink>
                 <FluentNavLink Href="compoanchor" Icon="@(new Icons.Regular.Size20.LinkMultiple())" IconColor="Color.Accent">Anchor</FluentNavLink>
+                <FluentNavLink Href="compoappbar" Icon="@(new Icons.Regular.Size20.AppsList())" IconColor="Color.Accent">AppBar</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoAppBar.razor

@@ -0,0 +1,85 @@
+@page "/compoappbar"
+
+@inject IDialogService DialogService;
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">AppBar</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+The <code>FluentAppBar</code> component is an implementation of the AppBar as you know from the Teams application.
+
+<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical" Style="height: 330px;">
+        <FluentAppBar Style="height: 100%;">
+            <FluentAppBarItem Href="/"
+                              Match="NavLinkMatch.All"
+                              IconRest="HomeIcon()"
+                              IconActive="HomeIcon(active: true)"
+                              Text="Home"
+                              OnClick="@OnClick" />
+            <FluentAppBarItem Href="/AppBar"
+                              IconRest="AppBarIcon()"
+                              IconActive="AppBarIcon(active: true)"
+                              Text="AppBar"
+                              OnClick="@OnClick" />
+            <FluentAppBarItem IconRest="WhatsNewIcon()"
+                              IconActive="WhatsNewIcon(active: true)"
+                              Text="What's New'"
+                              Count="5"
+                              OnClick="@ShowSuccessAsync" />
+            <FluentAppBarItem Href="@(null)"
+                              IconRest="IconsIcon()"
+                              IconActive="IconsIcon(active: true)"
+                              Text="Icons"
+                              OnClick="ShowWarningAsync" />
+            <FluentAppBarItem Href="/Dialog"
+                              IconRest="DialogIcon()"
+                              IconActive="DialogIcon(active: true)"
+                              Text="Dialog"
+                              OnClick="@OnClick" />
+        </FluentAppBar>
+    </FluentStack>
+    <p><b>Message</b>: @message?.ToString()</p>
+
+</FluentCard>
+
+@code {
+    private static Icon HomeIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.Home()
+               : new Icons.Regular.Size24.Home();
+
+    private static Icon AppBarIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.AppsList()
+               : new Icons.Regular.Size24.AppsList();
+
+    private static Icon WhatsNewIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.Info()
+               : new Icons.Regular.Size24.Info();
+
+    private static Icon IconsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.Symbols()
+               : new Icons.Regular.Size24.Symbols();
+
+    private static Icon DialogIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.AppGeneric()
+               : new Icons.Regular.Size24.AppGeneric();
+
+    string message = string.Empty;
+    void OnClick(IAppBarItem item)
+    {
+        message = $"{item.Text} clicked.";
+    }
+
+    async Task ShowSuccessAsync(IAppBarItem item)
+    {
+        var dialog = await DialogService.ShowSuccessAsync($"You clicked {item.Text}.");
+        var result = await dialog.Result;
+    }
+
+    async Task ShowWarningAsync(IAppBarItem item)
+    {
+        var dialog = await DialogService.ShowWarningAsync($"You clicked {item.Text}. Are you sure?");
+        var result = await dialog.Result;
+    }
+}