diff --git a/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor b/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor index dece72d5db..2f7ab6843d 100644 --- a/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor +++ b/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor @@ -31,7 +31,7 @@ Title="Open or hide the console" /> - + @{ var menuHeight = _consoleLogOpened ? "calc(100vh - 90px - 150px)" : "calc(100vh - 90px)"; @@ -41,13 +41,25 @@ - - @Body - + @if (IsHomePage()) + { + +
+
@Body
+
+
+
+ } + else + { + + @Body + - - - + + + + }
diff --git a/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.cs b/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.cs index b5d5eb1669..f2ea6eafd0 100644 --- a/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.cs +++ b/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.cs @@ -30,4 +30,16 @@ protected override void OnInitialized() return ValueTask.CompletedTask; }); } + + private bool IsHomePage() + { + if (Navigation.Uri == Navigation.BaseUri) + { + return true; + } + + return false; + } + + private string GetLayoutKey() => IsHomePage() ? "Home" : string.Empty; } diff --git a/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.css b/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.css new file mode 100644 index 0000000000..cd224119dc --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Layout/DemoMainLayout.razor.css @@ -0,0 +1,9 @@ +.demo-home { + display: flex; +} + +@media (max-width: 1280px) { + .demo-home { + flex-direction: column; + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/Layout/DemoNavMenu.razor b/examples/Demo/FluentUI.Demo.Client/Layout/DemoNavMenu.razor index f9ab4f82f6..9e0b18070b 100644 --- a/examples/Demo/FluentUI.Demo.Client/Layout/DemoNavMenu.razor +++ b/examples/Demo/FluentUI.Demo.Client/Layout/DemoNavMenu.razor @@ -3,7 +3,7 @@