[dev-v5] Update the FluentLayout component

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/DebugPages/DebugLayout.razor

@@ -0,0 +1,144 @@
+@page "/Layout/Debug"
+@using Microsoft.AspNetCore.Components.Rendering
+
+<h1>Layout Debug Page</h1>
+
+<div style="margin: 24px;">
+
+    @_renderOptions
+
+    <FluentTextArea @bind-Value="@HamburgerContent" Label="Hamburger content" />
+
+    <FluentStack Margin="@Margin.Vertical2">
+        View: @(MobileView ? "📱 Mobile" : "💻 Desktop")
+        <FluentSpacer />
+        Opened: @Opened
+    </FluentStack>
+
+    <div style="resize: horizontal; overflow: hidden;">
+        <FluentLayout GlobalScrollbar="@GlobalScrollbar" Height="400px" Style="@CommonStyles.NeutralBorder1" OnBreakpointEnter="@(e => MobileView = e)" MenuDeferredLoading="@MenuDeferredLoading">
+
+            @if (Header.Visible)
+            {
+                <!-- Header -->
+                <FluentLayoutItem Area="@LayoutArea.Header" Sticky="@Header.Sticky">
+
+                    <!-- Hamburger menu -->
+                    <FluentLayoutHamburger OnOpened="@(e => Opened = e.Opened)"
+                                           ChildContent="@(string.IsNullOrWhiteSpace(HamburgerContent) ? null : builder => { builder.AddMarkupContent(0, HamburgerContent); })" />
+
+                    <FluentText Weight="TextWeight.Bold" Size="TextSize.Size400">
+                        Microsoft Demo
+                    </FluentText>
+                    <FluentSpacer />
+                    <FluentButton Appearance="ButtonAppearance.Primary" Shape="ButtonShape.Rounded">
+                        Sign in
+                    </FluentButton>
+
+                    <!-- Second Hamburger menu -->
+                    <FluentLayoutHamburger OnOpened="@(e => Opened = e.Opened)"
+                                           ChildContent="@(string.IsNullOrWhiteSpace(HamburgerContent) ? null : builder => { builder.AddMarkupContent(0, HamburgerContent); })" />
+
+                </FluentLayoutItem>
+            }
+
+            @if (Menu.Visible)
+            {
+                <!-- Menu -->
+                <FluentLayoutItem Area="@LayoutArea.Menu" Sticky="@Menu.Sticky"
+                                  Width="150px" Padding="@Padding.All2"
+                                  Style="border-right: var(--strokeWidthThin) solid var(--colorNeutralStroke1);">
+
+                    <FluentText Weight="TextWeight.Bold">Navigation</FluentText>
+                    @NavigationContent
+                </FluentLayoutItem>
+            }
+
+            @if (Content.Visible)
+            {
+                <!-- Content -->
+                <FluentLayoutItem Area="@LayoutArea.Content" Padding="@Padding.All3">
+                    <FluentText Weight="TextWeight.Bold">Content</FluentText>
+                    @BodyContent
+                </FluentLayoutItem>
+            }
+
+            @if (Aside.Visible)
+            {
+                <!-- Aside -->
+                <FluentLayoutItem Area="@LayoutArea.Aside" Width="120px" Sticky="Aside.Sticky"
+                                  Style="padding: 8px; background-color: var(--colorBrandBackground2);">
+                    <FluentText Weight="TextWeight.Bold">News</FluentText>
+                    @AsideContent
+                </FluentLayoutItem>
+            }
+
+            @if (Footer.Visible)
+            {
+                <!-- Footer -->
+                <FluentLayoutItem Area="@LayoutArea.Footer" Sticky="@Footer.Sticky">
+                    &copy; Microsoft @DateTime.Now.Year
+                </FluentLayoutItem>
+            }
+
+        </FluentLayout>
+    </div>
+
+</div>
+
+<h1>Standalone Hamburger</h1>
+<FluentLayoutHamburger Visible="true"
+                       Icon="@(new Icons.Regular.Size20.LineHorizontal4().WithColor(Color.Primary))">
+    Standalone Hamburger Content
+</FluentLayoutHamburger>
+
+@code
+{
+    protected void RenderOptions(RenderTreeBuilder __builder)
+    {
+        <table>
+            <thead>
+                <tr>
+                    <th>Area</th>
+                    <th>Visible</th>
+                    <th>Sticky</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Global Scrollbar</td>
+                    <td><InputCheckbox @bind-Value="@(GlobalScrollbar)" /></td>
+                </tr>
+                <tr>
+                    <td>Menu Deferred Loading</td>
+                    <td><InputCheckbox @bind-Value="@(MenuDeferredLoading)" /></td>
+                </tr>
+                <tr>
+                    <td>Header</td>
+                    <td><InputCheckbox @bind-Value="@(Header.Visible)" /></td>
+                    <td><InputCheckbox @bind-Value="@(Header.Sticky)" /></td>
+                </tr>
+                <tr>
+                    <td>Menu</td>
+                    <td><InputCheckbox @bind-Value="@(Menu.Visible)" /></td>
+                    <td><InputCheckbox @bind-Value="@(Menu.Sticky)" /></td>
+                </tr>
+                <tr>
+                    <td>Content</td>
+                    <td><InputCheckbox @bind-Value="@(Content.Visible)" /></td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td>Aside</td>
+                    <td><InputCheckbox @bind-Value="@(Aside.Visible)" /></td>
+                    <td><InputCheckbox @bind-Value="@(Aside.Sticky)" /></td>
+                </tr>
+                <tr>
+                    <td>Footer</td>
+                    <td><InputCheckbox @bind-Value="@(Footer.Visible)" /></td>
+                    <td><InputCheckbox @bind-Value="@(Footer.Sticky)" /></td>
+                </tr>
+            </tbody>
+        </table>
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/DebugPages/DebugLayout.razor.cs

@@ -0,0 +1,38 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+using Microsoft.AspNetCore.Components;
+
+namespace FluentUI.Demo.Client.Documentation.Components.Layout.DebugPages;
+
+public partial class DebugLayout
+{
+    private bool GlobalScrollbar = true;
+    private bool MenuDeferredLoading;
+    private string HamburgerContent = string.Empty;
+    private readonly RenderFragment _renderOptions;
+    private readonly Option Header = new() { Visible = true, Sticky = false };
+    private readonly Option Menu = new() { Visible = true, Sticky = false };
+    private readonly Option Content = new() { Visible = true, Sticky = false };
+    private readonly Option Aside = new() { Visible = true, Sticky = false };
+    private readonly Option Footer = new() { Visible = true, Sticky = false };
+
+    public bool MobileView { get; set; }
+    public bool Opened { get; set; }
+
+    private class Option
+    {
+        public bool Visible { get; set; }
+        public bool Sticky { get; set; }
+    }
+
+    public DebugLayout()
+    {
+        _renderOptions = RenderOptions;
+    }
+
+    private static readonly MarkupString NavigationContent = SampleData.Text.Titles.Take(20).ToMarkupList("li");
+    private static readonly MarkupString BodyContent = SampleData.Text.LoremIpsum.Take(10).ToMarkupList("p");
+    private static readonly MarkupString AsideContent = (MarkupString)SampleData.Text.LoremIpsum.ElementAt(2)[..200];
+}