layout

.dockerignore

@@ -0,0 +1,30 @@
+**/.classpath
+**/.dockerignore
+**/.env
+**/.git
+**/.gitignore
+**/.project
+**/.settings
+**/.toolstarget
+**/.vs
+**/.vscode
+**/*.*proj.user
+**/*.dbmdl
+**/*.jfm
+**/azds.yaml
+**/bin
+**/charts
+**/docker-compose*
+**/Dockerfile*
+**/node_modules
+**/npm-debug.log
+**/obj
+**/secrets.dev.yaml
+**/values.dev.yaml
+LICENSE
+README.md
+!**/.gitignore
+!.git/HEAD
+!.git/config
+!.git/packed-refs
+!.git/refs/heads/**

BlazorFluentUI/.config/dotnet-tools.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "8.0.6",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
+    }
+  }
+}

BlazorFluentUI/BlazorFluentUI.csproj

@@ -4,11 +4,14 @@
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
+    <UserSecretsId>a4f1c096-eec4-4f90-9505-558f2f4be683</UserSecretsId>
+    <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
   </PropertyGroup>
 
   <ItemGroup>
 	  <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.9.0" />
 	  <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="4.6.0" />
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.9.0" />
+    <PackageReference Include="Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version="1.20.1" />
   </ItemGroup>
 </Project>

BlazorFluentUI/Components/Layout/MainLayout.razor

@@ -1,16 +1,13 @@
 @inherits LayoutComponentBase
 
-<FluentToastProvider />
+@inject IHostEnvironment HostEnvironment
-<FluentDialogProvider />
-<FluentTooltipProvider />
-<FluentMessageBarProvider />
 
 <FluentLayout>
     <FluentHeader>
         BlazorFluentUI
     </FluentHeader>
     <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
-        <NavMenu />
+        @* <NavMenu /> *@
         <FluentBodyContent Class="body-content">
             <div class="content">
                 <FluentMessageBarProvider Section="MESSAGES_TOP" />
@@ -27,8 +24,27 @@
     </FluentFooter>
 </FluentLayout>
 
-<div id="blazor-error-ui">
+<FluentToastProvider />
+<FluentDialogProvider />
+<FluentTooltipProvider />
+<FluentMessageBarProvider />
+
+
+@* <div id="blazor-error-ui">
     An unhandled error has occurred.
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
+</div> *@
+
+<div id="blazor-error-ui" data-nosnippet>
+    @if (HostEnvironment.IsProduction())
+    {
+        <span>An error has occurred.</span>
+    }
+    else
+    {
+        <span>An unhandled exception occurred.</span>
+    }
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
 </div>

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -15,6 +15,7 @@
                 <FluentNavLink Href="layoutfooter" Icon="@(new Icons.Regular.Size20.DocumentFooter())" IconColor="Color.Accent">Footer</FluentNavLink>
                 <FluentNavLink Href="layoutbodycontent" Icon="@(new Icons.Regular.Size20.ContentViewGallery())" IconColor="Color.Accent">BodyContent</FluentNavLink>
                 <FluentNavLink Href="layoutgrid" Icon="@(new Icons.Regular.Size20.Grid())" IconColor="Color.Accent">Grid</FluentNavLink>
+                <FluentNavLink Href="layoutlayout" Icon="@(new Icons.Regular.Size20.LayoutColumnOneThirdLeft())" IconColor="Color.Accent">Layout</FluentNavLink>
             </FluentNavGroup>
         </FluentNavMenu>
     </nav>

BlazorFluentUI/Components/Pages/Home.razor

@@ -4,7 +4,7 @@
 
 <PageTitle>Home</PageTitle>
 
-<FluentCard>
+<FluentCard Width="auto"  Height="auto">
     <h2>Hello Fluent UI!</h2>
     <FluentIcon Value="@(new Icons.Regular.Size24.EmojiSmileSlight())" />
     <FluentIcon Value="@(Icon.FromImageUrl("/favicon.ico"))" />

BlazorFluentUI/Components/Pages/LayoutLayout.razor

@@ -0,0 +1,68 @@
+@page "/layoutlayout"
+
+@rendermode RenderMode.InteractiveServer
+
+<FluentLabel Typo="Typography.H3">Layout</FluentLabel>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<FluentLabel Typo="Typography.Body">
+    The <code>FluentLayout</code> component is a container for other components.
+</FluentLabel>
+<FluentCard Width="auto" Height="auto">
+    <FluentStack Orientation="Orientation.Horizontal" Wrap="true">
+        <FluentSwitch @bind-Value="@showHeader">Header</FluentSwitch>
+        <FluentSwitch @bind-Value="@showNavMenu">NavMenu</FluentSwitch>
+        <FluentSwitch @bind-Value="@showBodyContent">BodyContent</FluentSwitch>
+        <FluentSwitch @bind-Value="@showFooter">Footer</FluentSwitch>
+    </FluentStack>
+    <FluentLayout Class="mt-3">
+        @if (showHeader)
+        {
+            <FluentHeader>
+                Header text
+                <FluentSpacer/>
+                Aligned to the end
+            </FluentHeader>
+        }
+
+        <FluentStack Orientation="Orientation.Horizontal">
+            @if (showNavMenu)
+            {
+                <FluentNavMenu Width="250">
+                    <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())">Item 1</FluentNavLink>
+                    <FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())">Item 2</FluentNavLink>
+                    <FluentNavGroup Title="Item 3">
+                        <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())">Item 3.1</FluentNavLink>
+                        <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())">Item 3.2</FluentNavLink>
+                    </FluentNavGroup>
+                    <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true">Item 4</FluentNavLink>
+                </FluentNavMenu>
+            }
+
+            @if (showBodyContent)
+            {
+                <FluentBodyContent Style="max-height:300px">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem lacus.
+                    Ut id leo non enim feugiat ultrices. Proin vulputate volutpat urna nec iaculis.
+                    Integer dui lacus, fermentum sit amet aliquet in, scelerisque vitae dui.
+                    Nulla fringilla sagittis orci eu consectetur. Fusce eget dolor non lectus placerat
+                </FluentBodyContent>
+            }
+        </FluentStack>
+
+        @if (showFooter)
+        {
+            <FluentFooter>
+                Footer text
+                <FluentSpacer/>
+                Aligned to the end
+            </FluentFooter>
+        }
+    </FluentLayout>
+</FluentCard>
+
+@code {
+    bool showHeader = true;
+    bool showNavMenu = true;
+    bool showBodyContent = true;
+    bool showFooter = true;
+}

BlazorFluentUI/Dockerfile

@@ -0,0 +1,25 @@
+#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging.
+
+FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base
+USER app
+WORKDIR /app
+EXPOSE 8080
+EXPOSE 8081
+
+FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
+ARG BUILD_CONFIGURATION=Release
+WORKDIR /src
+COPY ["BlazorFluentUI/BlazorFluentUI.csproj", "BlazorFluentUI/"]
+RUN dotnet restore "./BlazorFluentUI/BlazorFluentUI.csproj"
+COPY . .
+WORKDIR "/src/BlazorFluentUI"
+RUN dotnet build "./BlazorFluentUI.csproj" -c $BUILD_CONFIGURATION -o /app/build
+
+FROM build AS publish
+ARG BUILD_CONFIGURATION=Release
+RUN dotnet publish "./BlazorFluentUI.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false
+
+FROM base AS final
+WORKDIR /app
+COPY --from=publish /app/publish .
+ENTRYPOINT ["dotnet", "BlazorFluentUI.dll"]

BlazorFluentUI/Properties/launchSettings.json

@@ -1,31 +1,22 @@
 {
-  "$schema": "http://json.schemastore.org/launchsettings.json",
-    "iisSettings": {
-      "windowsAuthentication": false,
-      "anonymousAuthentication": true,
-      "iisExpress": {
-        "applicationUrl": "http://localhost:41550",
-        "sslPort": 44309
-      }
-    },
   "profiles": {
     "http": {
       "commandName": "Project",
-        "dotnetRunMessages": true,
       "launchBrowser": true,
-        "applicationUrl": "http://localhost:5231",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-        }
+      },
+      "dotnetRunMessages": true,
+      "applicationUrl": "http://localhost:5231"
     },
     "https": {
       "commandName": "Project",
-        "dotnetRunMessages": true,
       "launchBrowser": true,
-        "applicationUrl": "https://localhost:7166;http://localhost:5231",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-        }
+      },
+      "dotnetRunMessages": true,
+      "applicationUrl": "https://localhost:7166;http://localhost:5231"
     },
     "IIS Express": {
       "commandName": "IISExpress",
@@ -33,6 +24,26 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
+    },
+    "Container (Dockerfile)": {
+      "commandName": "Docker",
+      "launchBrowser": true,
+      "launchUrl": "{Scheme}://{ServiceHost}:{ServicePort}",
+      "environmentVariables": {
+        "ASPNETCORE_HTTPS_PORTS": "8081",
+        "ASPNETCORE_HTTP_PORTS": "8080"
+      },
+      "publishAllPorts": true,
+      "useSSL": true
     }
+  },
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:41550",
+      "sslPort": 44309
     }
   }
+}