[dev-v5] Add FluentAppBar and FluentAppBarItem

examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarClick.razor

@@ -0,0 +1,69 @@
+@inject IDialogService DialogService
+
+<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="HandleOnClick" />
+        <FluentAppBarItem Href="/AppBar"
+                          IconRest="AppBarIcon()"
+                          IconActive="AppBarIcon(active: true)"
+                          Text="AppBar"
+                          OnClick="HandleOnClick" />
+        <FluentAppBarItem IconRest="WhatsNewIcon()"
+                          IconActive="WhatsNewIcon(active: true)"
+                          Text="What's New"
+                          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="HandleOnClick" />
+    </FluentAppBar>
+</FluentStack>
+
+@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();
+
+
+    private void HandleOnClick(IAppBarItem item)
+    {
+        Console.WriteLine($"Clicked {item.Text}!");
+    }
+
+    private async Task ShowSuccessAsync(IAppBarItem item)
+    {
+        var dialog = await DialogService.ShowSuccessAsync($"You clicked {item.Text}");
+    }
+
+    private async Task ShowWarningAsync(IAppBarItem item)
+    {
+        var dialog = await DialogService.ShowWarningAsync($"Are you sure? {item.Text}");
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarDefault.razor

@@ -0,0 +1,110 @@
+@{
+	string stylevalue = $"background-color: var(--colorNeutralBackground5); overflow: hidden; resize: {(_vertical ? "vertical; width: 86px; height: 320px;" : "horizontal;width: 440px; height: 68px;")}  padding: 10px;";
+}
+<FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
+	<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="10">
+		<FluentSwitch @bind-Value="_showSearch" Label="Show search in popover" />
+		<FluentSwitch @bind-Value="_vertical" @bind-Value:after="@HandleOrientationChanged" Label="@($"Show {(_vertical ? "Vertical" : "Horizontal")}")" />
+	</FluentStack>
+	<div style="@stylevalue">
+		<FluentAppBar Orientation="@(_vertical? Orientation.Vertical: Orientation.Horizontal)" PopoverVisibilityChanged="HandlePopover" PopoverShowSearch="@_showSearch">
+
+			<FluentAppBarItem Href="/AppBarDefault"
+							  Match="NavLinkMatch.All"
+							  IconRest="ResourcesIcon()"
+							  IconActive="ResourcesIcon(active: true)"
+							  Text="Resources" />
+			<FluentAppBarItem Href="/AppBar"
+							  IconRest="ConsoleLogsIcon()"
+							  IconActive="ConsoleLogsIcon(active: true)"
+							  Text="Console Logs"
+							  Count="2" />
+			<FluentAppBarItem Href="/StructuredLogs"
+							  IconRest="StructuredLogsIcon()"
+							  IconActive="StructuredLogsIcon(active: true)"
+							  Text="Logs"
+							  Tooltip="Structured Logs"
+							  Count="4" />
+			<FluentAppBarItem Href="/Traces"
+							  IconRest="TracesIcon()"
+							  IconActive="TracesIcon(active: true)"
+							  Text="Traces" />
+			<FluentAppBarItem Href="/Metrics"
+							  IconRest="MetricsIcon()"
+							  IconActive="MetricsIcon(active: true)"
+							  Text="Metrics" />
+			<FluentAppBarItem Href="/AppBarPage"
+							  IconRest="ResourcesIcon()"
+							  IconActive="ResourcesIcon(active: true)"
+							  Text="Resources 2" />
+			<FluentAppBarItem Href="/AppBar"
+							  IconRest="ConsoleLogsIcon()"
+							  IconActive="ConsoleLogsIcon(active: true)"
+							  Text="Console Logs 2" />
+			<FluentAppBarItem Href="/StructuredLogs"
+							  IconRest="StructuredLogsIcon()"
+							  IconActive="StructuredLogsIcon(active: true)"
+							  Text="Structured Logs 2" />
+			<FluentAppBarItem Href="/Traces"
+							  IconRest="TracesIcon()"
+							  IconActive="TracesIcon(active: true)"
+							  Text="Traces 2" />
+			<FluentAppBarItem Href="/Metrics"
+							  IconRest="MetricsIcon()"
+							  IconActive="MetricsIcon(active: true)"
+							  Text="Metrics 2" />
+			<FluentAppBarItem Href="/AppBarPage"
+							  IconRest="ResourcesIcon()"
+							  IconActive="ResourcesIcon(active: true)"
+							  Text="Resources 3" />
+			<FluentAppBarItem Href="/AppBar"
+							  IconRest="ConsoleLogsIcon()"
+							  IconActive="ConsoleLogsIcon(active: true)"
+							  Text="Console Logs 3" />
+			<FluentAppBarItem Href="/StructuredLogs"
+							  IconRest="StructuredLogsIcon()"
+							  IconActive="StructuredLogsIcon(active: true)"
+							  Text="Structured Logs 3" />
+			<FluentAppBarItem Href="/Traces"
+							  IconRest="TracesIcon()"
+							  IconActive="TracesIcon(active: true)"
+							  Text="Traces 3" />
+			<FluentAppBarItem Href="/Metrics"
+							  IconRest="MetricsIcon()"
+							  IconActive="MetricsIcon(active: true)"
+							  Text="Metrics 3" />
+		</FluentAppBar>
+	</div>
+</FluentStack>
+
+@code {
+	private bool _vertical = true;
+	private bool _showSearch = true;
+
+	private static Icon ResourcesIcon(bool active = false) =>
+		active ? new Icons.Filled.Size24.AppFolder()
+			   : new Icons.Regular.Size24.AppFolder();
+
+	private static Icon ConsoleLogsIcon(bool active = false) =>
+		active ? new Icons.Filled.Size24.SlideText()
+			   : new Icons.Regular.Size24.SlideText();
+
+	private static Icon StructuredLogsIcon(bool active = false) =>
+		active ? new Icons.Filled.Size24.SlideTextSparkle()
+			   : new Icons.Regular.Size24.SlideTextSparkle();
+
+	private static Icon TracesIcon(bool active = false) =>
+		active ? new Icons.Filled.Size24.GanttChart()
+			   : new Icons.Regular.Size24.GanttChart();
+
+	private static Icon MetricsIcon(bool active = false) =>
+		active ? new Icons.Filled.Size24.ChartMultiple()
+			   : new Icons.Regular.Size24.ChartMultiple();
+
+	private void HandlePopover(bool visible) => Console.WriteLine($"Popover visibility changed to {visible}");
+
+	private void HandleOrientationChanged()
+	{
+		Console.WriteLine($"Orientation changed to {(_vertical ? "vertical" : "horizontal")}");
+	}
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarFromListOfApps.razor

@@ -0,0 +1,72 @@
+<FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
+    <FluentSwitch @bind-Value="_showSearch" CheckedMessage="Show" UncheckedMessage="Hide" Label="Show search in popover" />
+	<div style="background-color: var(--colorNeutralBackground5); overflow: hidden; resize: vertical; height: 270px; width: 86px; padding: 10px;">
+        <FluentAppBar
+                      Items="@_apps.OrderBy(a => a.Order)"
+                      Style="width: 68px; height: 100%;"
+                      PopoverVisibilityChanged="HandlePopover"
+                      PopoverShowSearch="@_showSearch">
+        </FluentAppBar>
+    </div>
+</FluentStack>
+
+
+@code {
+	private class FluentCustomAppBarItem : IAppBarItem
+	{
+		public int Order { get; set; }
+		public string? Id { get; set; }
+		public string? Href { get; set; }
+		public NavLinkMatch Match { get; set; }
+		public Icon IconRest { get; set; } = new Icons.Regular.Size24.AppFolder();
+		public Icon? IconActive { get; set; }
+        public string Text { get; set; } = string.Empty;
+        public string? Tooltip { get; set; }
+        public ushort? Count { get; set; }
+        public bool? Overflow { get; set; }
+        public EventCallback<IAppBarItem> OnClick { get; set; }
+    }
+
+    private List<FluentCustomAppBarItem> _apps => new List<FluentCustomAppBarItem>
+    {
+        new FluentCustomAppBarItem { Order = 15, IconRest = ResourcesIcon(), IconActive = ResourcesIcon(active: true), Text = "Aaaaa", Href = "/AppBarDefault" },
+        new FluentCustomAppBarItem { Order = 14, IconRest = ResourcesIcon(), IconActive = ResourcesIcon(active: true), Text = "Bbbbb", Href = "/AppBar" },
+        new FluentCustomAppBarItem { Order = 13, IconRest = ResourcesIcon(), IconActive = ResourcesIcon(active: true), Text = "Ccccc" },
+        new FluentCustomAppBarItem { Order = 12, IconRest = ConsoleLogsIcon(), IconActive = ConsoleLogsIcon(active: true), Text = "Ddddd" },
+        new FluentCustomAppBarItem { Order = 11, IconRest = ConsoleLogsIcon(), IconActive = ConsoleLogsIcon(active: true), Text = "Eeeee" },
+        new FluentCustomAppBarItem { Order = 10, IconRest = ConsoleLogsIcon(), IconActive = ConsoleLogsIcon(active: true), Text = "Fffff" },
+        new FluentCustomAppBarItem { Order = 9, IconRest = StructuredLogsIcon(), IconActive = StructuredLogsIcon(active: true), Text = "Ggggg", Count = 4 },
+        new FluentCustomAppBarItem { Order = 8, IconRest = StructuredLogsIcon(), IconActive = StructuredLogsIcon(active: true), Text = "Hhhhh" },
+        new FluentCustomAppBarItem { Order = 7, IconRest = StructuredLogsIcon(), IconActive = StructuredLogsIcon(active: true), Text = "Iiiii" },
+        new FluentCustomAppBarItem { Order = 6, IconRest = TracesIcon(), IconActive = TracesIcon(active: true), Text = "Jjjjj" },
+        new FluentCustomAppBarItem { Order = 5, IconRest = TracesIcon(), IconActive = TracesIcon(active: true), Text = "Kkkkk" },
+        new FluentCustomAppBarItem { Order = 4, IconRest = TracesIcon(), IconActive = TracesIcon(active: true), Text = "Lllll" },
+        new FluentCustomAppBarItem { Order = 3, IconRest = MetricsIcon(), IconActive = MetricsIcon(active: true), Text = "Mmmmm" },
+        new FluentCustomAppBarItem { Order = 2, IconRest = MetricsIcon(), IconActive = MetricsIcon(active: true), Text = "Nnnnn" },
+        new FluentCustomAppBarItem { Order = 1, IconRest = MetricsIcon(), IconActive = MetricsIcon(active: true), Text = "Ooooo" }
+    };
+
+    private bool _showSearch = true;
+
+    private static Icon ResourcesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.AppFolder()
+               : new Icons.Regular.Size24.AppFolder();
+
+    private static Icon ConsoleLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideText()
+               : new Icons.Regular.Size24.SlideText();
+
+    private static Icon StructuredLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.SlideTextSparkle()
+               : new Icons.Regular.Size24.SlideTextSparkle();
+
+    private static Icon TracesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.GanttChart()
+               : new Icons.Regular.Size24.GanttChart();
+
+    private static Icon MetricsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size24.ChartMultiple()
+               : new Icons.Regular.Size24.ChartMultiple();
+
+    private void HandlePopover(bool visible) => Console.WriteLine($"Popover visibility changed to {visible}");
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/AppBar/Examples/AppBarSmallIcons.razor

@@ -0,0 +1,117 @@
+<style>
+    .fluent-appbar.smallicons {
+		--appbar-item-size: 58;
+    }
+</style>
+@{
+	string stylevalue = $"background-color: var(--colorNeutralBackground5); overflow: hidden; resize: {(_vertical ? "vertical; width: 78px; height: 300px;" : "horizontal; width: 380px; height: 58px;")}  padding: 10px;";
+}
+<FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
+    <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="10">
+		<FluentSwitch @bind-Value="_showSearch" Label="Show search in popover" />
+		<FluentSwitch @bind-Value="_vertical" @bind-Value:after="@HandleOrientationChanged" Label="@($"Show {(_vertical ? "Vertical" : "Horizontal")}")" />
+	</FluentStack>
+    <div class="smallicons" style="@stylevalue">
+        <FluentAppBar Orientation="@(_vertical ? Orientation.Vertical : Orientation.Horizontal)" Class="smallicons" PopoverVisibilityChanged="HandlePopover" PopoverShowSearch="@_showSearch">
+
+            <FluentAppBarItem Href="/AppBarDefault"
+                                Match="NavLinkMatch.All"
+                                IconRest="ResourcesIcon()"
+                                IconActive="ResourcesIcon(active: true)"
+                                Text="Resources" />
+            <FluentAppBarItem Href="/AppBar"
+                                IconRest="ConsoleLogsIcon()"
+                                IconActive="ConsoleLogsIcon(active: true)"
+                                Text="Console Logs" />
+
+            <FluentAppBarItem Href="/StructuredLogs"
+                                IconRest="StructuredLogsIcon()"
+                                IconActive="StructuredLogsIcon(active: true)"
+                                Text="Logs"
+                                Tooltip="Structured Logs"/>
+            <FluentAppBarItem Href="/Traces"
+                                IconRest="TracesIcon()"
+                                IconActive="TracesIcon(active: true)"
+                                Text="Traces" />
+            <FluentAppBarItem Href="/Metrics"
+                                IconRest="MetricsIcon()"
+                                IconActive="MetricsIcon(active: true)"
+                                Text="Metrics" />
+            <FluentAppBarItem Href="/AppBarPage"
+                                IconRest="ResourcesIcon()"
+                                IconActive="ResourcesIcon(active: true)"
+                                Text="Resources 2" />
+            <FluentAppBarItem Href="/AppBar"
+                                IconRest="ConsoleLogsIcon()"
+                                IconActive="ConsoleLogsIcon(active: true)"
+                                Text="Console Logs 2" />
+
+            <FluentAppBarItem Href="/StructuredLogs"
+                                IconRest="StructuredLogsIcon()"
+                                IconActive="StructuredLogsIcon(active: true)"
+                                Text="Structured Logs 2" />
+            <FluentAppBarItem Href="/Traces"
+                                IconRest="TracesIcon()"
+                                IconActive="TracesIcon(active: true)"
+                                Text="Traces 2" />
+            <FluentAppBarItem Href="/Metrics"
+                                IconRest="MetricsIcon()"
+                                IconActive="MetricsIcon(active: true)"
+                                Text="Metrics 2" />
+            <FluentAppBarItem Href="/AppBarPage"
+                                IconRest="ResourcesIcon()"
+                                IconActive="ResourcesIcon(active: true)"
+                                Text="Resources 3" />
+            <FluentAppBarItem Href="/AppBar"
+                                IconRest="ConsoleLogsIcon()"
+                                IconActive="ConsoleLogsIcon(active: true)"
+                                Text="Console Logs 3" />
+
+            <FluentAppBarItem Href="/StructuredLogs"
+                                IconRest="StructuredLogsIcon()"
+                                IconActive="StructuredLogsIcon(active: true)"
+                                Text="Structured Logs 3" />
+            <FluentAppBarItem Href="/Traces"
+                                IconRest="TracesIcon()"
+                                IconActive="TracesIcon(active: true)"
+                                Text="Traces 3" />
+            <FluentAppBarItem Href="/Metrics"
+                                IconRest="MetricsIcon()"
+                                IconActive="MetricsIcon(active: true)"
+                                Text="Metrics 3" />
+        </FluentAppBar>
+    </div>
+</FluentStack>
+
+
+@code {
+    private bool _vertical = true;
+    private bool _showSearch = true;
+
+    private static Icon ResourcesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size16.AppFolder()
+               : new Icons.Regular.Size16.AppFolder();
+
+    private static Icon ConsoleLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size16.SlideText()
+               : new Icons.Regular.Size16.SlideText();
+
+    private static Icon StructuredLogsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size16.SlideTextSparkle()
+               : new Icons.Regular.Size16.SlideTextSparkle();
+
+    private static Icon TracesIcon(bool active = false) =>
+        active ? new Icons.Filled.Size16.GanttChart()
+               : new Icons.Regular.Size16.GanttChart();
+
+    private static Icon MetricsIcon(bool active = false) =>
+        active ? new Icons.Filled.Size16.ChartMultiple()
+               : new Icons.Regular.Size16.ChartMultiple();
+
+    private void HandlePopover(bool visible) => Console.WriteLine($"Popover visibility changed to {visible}");
+
+	private void HandleOrientationChanged()
+	{
+		Console.WriteLine($"Orientation changed to {(_vertical ? "vertical" : "horizontal")}");
+	}
+}