feat(templates): update layout structure of Boilerplate #9565 (#9566)

bitfoundation · Dec 31, 2024 · 140ef28 · 140ef28
1 parent c2649a5
commit 140ef28
Show file tree

Hide file tree

Showing 29 changed files with 190 additions and 607 deletions.
diff --git a/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ClientAppCoordinator.cs b/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/ClientAppCoordinator.cs
@@ -241,13 +241,6 @@ private async Task ConfigureUISetup()
                                                  await storageService.GetItem("Culture") ?? // 2- User settings
                                                  CultureInfo.CurrentUICulture.Name); // 3- OS settings
         }
-
-        var platformCssClass = AppPlatform.IsWindows ? "bit-windows" :
-                               AppPlatform.IsMacOS ? "bit-macos" :
-                               AppPlatform.IsIOS ? "bit-ios" :
-                               AppPlatform.IsAndroid ? "bit-android" : "bit-unknown";
-
-        await jsRuntime.ApplyBodyElementClasses(cssClasses: [platformCssClass], cssVariables: []);
     }
 
     private List<IDisposable> signalROnDisposables = [];

diff --git a/...ilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/DiagnosticModal.razor.scss b/...ilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/DiagnosticModal.razor.scss
@@ -1,4 +1,5 @@
 @import '../../Styles/abstracts/_media-queries.scss';
+@import '../../Styles/abstracts/_bit-css-variables.scss';
 
 section {
     width: 100%;
@@ -8,10 +9,10 @@ section {
 ::deep {
     .modal {
         width: unset;
-        top: var(--app-inset-top);
-        left: var(--app-inset-left);
-        right: var(--app-inset-right);
-        bottom: var(--app-inset-bottom);
+        top: $bit-env-inset-top;
+        left: $bit-env-inset-left;
+        right: $bit-env-inset-right;
+        bottom: $bit-env-inset-bottom;
     }
 
     .container {
@@ -26,15 +27,15 @@ section {
         left: 50%;
         position: fixed;
         transform: translateX(-50%);
-        bottom: calc(var(--app-inset-bottom) + 1rem);
+        bottom: calc(#{$bit-env-inset-bottom} + 1rem);
     }
 
     .log-modal {
         overflow: auto;
         max-width: 40rem;
         max-height: 40rem;
         white-space: nowrap;
-        height: min(20rem, var(--app-height) - 4rem);
-        width: min(40rem, calc(var(--app-width) - 2rem));
+        height: min(20rem, #{$bit-env-height-available} - 4rem);
+        width: min(40rem, calc(#{$bit-env-width-available} - 2rem));
     }
 }
diff --git a/...oilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor.scss b/...oilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/IdentityHeader.razor.scss
@@ -15,8 +15,8 @@ header {
             height: unset;
             max-width: 225px;
             box-shadow: none;
-            bottom: var(--app-inset-bottom);
-            top: var(--app-inset-top) !important;
+            bottom: $bit-env-inset-bottom;
+            top: $bit-env-inset-top !important;
         }
     }
 }
diff --git a/...t.Core/Components/Layout/RootLayout.razor → ...t.Core/Components/Layout/MainLayout.razor b/...t.Core/Components/Layout/RootLayout.razor → ...t.Core/Components/Layout/MainLayout.razor
@@ -1,11 +1,12 @@
 @inherits LayoutComponentBase
 
-<RootContainer IsOnline="isOnline"
-               CurrentDir="currentDir"
-               CurrentTheme="currentTheme"
-               IsAuthenticated="isAuthenticated"
-               CurrentRouteData="currentRouteData"
-               IsCrossLayoutPage="isCrossLayoutPage">
+
+<BitAppShell CascadingValues="@([new(currentDir),
+                                 new(isOnline, Parameters.IsOnline),
+                                 new(currentTheme, Parameters.CurrentTheme),
+                                 new(isAuthenticated, Parameters.IsAuthenticated),
+                                 new(currentRouteData, Parameters.CurrentRouteData),
+                                 new(isCrossLayoutPage, Parameters.IsCrossLayoutPage)])">
     <main class="@GetMainCssClass()">
         <div class="root">
             @if (isAuthenticated is false)
@@ -14,7 +15,7 @@
             }
             else if (isAuthenticated is true)
             {
-                <NavPanel />
+                <BitNavPanel @bind-IsOpen="isNavPanelOpen" Items="navPanelItems" />
             }
 
             <div class="stack">
@@ -41,7 +42,7 @@
             <NavBar />
         }
     </main>
-</RootContainer>
+</BitAppShell>
 
 <SnackBar />
 <DiagnosticModal />

diff --git a/...ore/Components/Layout/RootLayout.razor.cs → ...ore/Components/Layout/MainLayout.razor.cs b/...ore/Components/Layout/RootLayout.razor.cs → ...ore/Components/Layout/MainLayout.razor.cs
@@ -3,9 +3,10 @@
 
 namespace Boilerplate.Client.Core.Components.Layout;
 
-public partial class RootLayout : IAsyncDisposable
+public partial class MainLayout : IAsyncDisposable
 {
     private BitDir? currentDir;
+    private bool isNavPanelOpen;
     private readonly BitModalParameters modalParameters = new() { Classes = new() { Root = "modal" } };
 
     /// <summary>
@@ -21,12 +22,14 @@ public partial class RootLayout : IAsyncDisposable
     private AppThemeType? currentTheme;
     private RouteData? currentRouteData;
     private List<Action> unsubscribers = [];
+    private List<BitNavItem> navPanelItems = [];
 
 
     [AutoInject] private Keyboard keyboard = default!;
     [AutoInject] private AuthManager authManager = default!;
     [AutoInject] private ThemeService themeService = default!;
     [AutoInject] private PubSubService pubSubService = default!;
+    [AutoInject] private BitExtraServices bitExtraServices = default!;
     [AutoInject] private IExceptionHandler exceptionHandler = default!;
     [AutoInject] private ITelemetryContext telemetryContext = default!;
     [AutoInject] private NavigationManager navigationManager = default!;
@@ -40,19 +43,24 @@ protected override async Task OnInitializedAsync()
     {
         try
         {
+            InitializeNavPanelItems();
+
             navigationManager.LocationChanged += NavigationManagerLocationChanged;
             authManager.AuthenticationStateChanged += AuthenticationStateChanged;
+
             unsubscribers.Add(pubSubService.Subscribe(ClientPubSubMessages.CULTURE_CHANGED, async _ =>
             {
                 SetCurrentDir();
                 StateHasChanged();
             }));
+
             unsubscribers.Add(pubSubService.Subscribe(ClientPubSubMessages.THEME_CHANGED, async payload =>
             {
                 if (payload is null) return;
                 currentTheme = (AppThemeType)payload;
                 StateHasChanged();
             }));
+
             unsubscribers.Add(pubSubService.Subscribe(ClientPubSubMessages.ROUTE_DATA_UPDATED, async payload =>
             {
                 currentRouteData = (RouteData?)payload;
@@ -66,11 +74,19 @@ protected override async Task OnInitializedAsync()
                 await InvokeAsync(StateHasChanged);
             }));
 
+            unsubscribers.Add(pubSubService.Subscribe(ClientPubSubMessages.OPEN_NAV_PANEL, async _ =>
+            {
+                isNavPanelOpen = true;
+                StateHasChanged();
+            }));
+
             isAuthenticated = await prerenderStateService.GetValue(async () => (await AuthenticationStateTask).User.IsAuthenticated());
 
             SetCurrentDir();
             currentTheme = await themeService.GetCurrentTheme();
 
+            await bitExtraServices.AddRootCssClasses();
+
             await base.OnInitializedAsync();
         }
         catch (Exception exp)

diff --git a/...e/Components/Layout/RootLayout.razor.scss → ...e/Components/Layout/MainLayout.razor.scss b/...e/Components/Layout/RootLayout.razor.scss → ...e/Components/Layout/MainLayout.razor.scss
@@ -7,7 +7,7 @@ main {
 
     @include lt-md {
         height: unset;
-        min-height: var(--app-height);
+        min-height: $bit-env-height-available;
     }
 
     &.unauthenticated {

diff --git a/...it.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MessageBox.razor.scss b/...it.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/MessageBox.razor.scss
@@ -1,9 +1,10 @@
 @import '../../Styles/abstracts/_media-queries.scss';
+@import '../../Styles/abstracts/_bit-css-variables.scss';
 
 section {
     padding: 1rem;
     min-width: 20rem;
-    max-height: var(--app-height);
+    max-height: $bit-env-height-available;
 
     @include lt-md {
         min-width: unset;
@@ -20,6 +21,6 @@ section {
 
 ::deep {
     .stack {
-        max-height: calc(var(--app-height) - 3rem);
+        max-height: calc(#{$bit-env-height-available} - 3rem);
     }
 }
diff --git a/...erplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavBar.razor b/...erplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavBar.razor
@@ -9,8 +9,8 @@
         @*#endif*@
         @*#if (sample == "Admin")*@
         <BitNavBarOption Text="@Localizer[nameof(AppStrings.Dashboard)]" IconName="@BitIconName.BarChartVerticalFill" Url="@Urls.DashboardPage" />
-        <BitNavBarOption Text="@Localizer[nameof(AppStrings.Products)]" IconName="@BitIconName.Product" Url="@Urls.ProductsPage" />
         <BitNavBarOption Text="@Localizer[nameof(AppStrings.Categories)]" IconName="@BitIconName.BuildQueue" Url="@Urls.CategoriesPage" />
+        <BitNavBarOption Text="@Localizer[nameof(AppStrings.Products)]" IconName="@BitIconName.Product" Url="@Urls.ProductsPage" />
         @*#endif*@
         <BitNavBarOption Text="@Localizer[nameof(AppStrings.Terms)]" IconName="@BitIconName.EntityExtraction" Url="@Urls.TermsPage" />
     </BitNavBar>

diff --git a/...te/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavBar.razor.scss b/...te/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavBar.razor.scss
@@ -7,9 +7,9 @@ section {
     height: 3.5rem;
     position: fixed;
     align-items: center;
-    max-width: var(--app-width);
+    bottom: $bit-env-inset-bottom;
     justify-content: space-around;
-    bottom: var(--app-inset-bottom);
+    max-width: $bit-env-width-available;
     background-color: $bit-color-background-primary;
     border-top: 1px solid $bit-color-border-tertiary;
 

diff --git a/...plate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavPanel.razor b/...plate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavPanel.razor