diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor b/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor index ecd27001..c7ce3bcb 100644 --- a/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor +++ b/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor @@ -1,60 +1,66 @@ @inherits LayoutComponentBase -@inject IJSRuntime JS -@* - EN: Main layout with sidebar navigation and theme toggle. - VI: Layout chính với sidebar navigation và theme toggle. -*@ + + + + -
- + -
-
- -
- -
+ + @Body -
-
-
+ + + @code { - private string currentTheme = "light"; + private bool _drawerOpen = true; + private bool _isDarkMode = true; - protected override async Task OnAfterRenderAsync(bool firstRender) + private MudTheme _theme = new() { - if (firstRender) + PaletteLight = new PaletteLight() { - // EN: Load saved theme from localStorage - // VI: Tải theme đã lưu từ localStorage - var savedTheme = await JS.InvokeAsync("localStorage.getItem", "theme"); - if (!string.IsNullOrEmpty(savedTheme)) - { - currentTheme = savedTheme; - StateHasChanged(); - } - } + Primary = "#7c3aed", + Secondary = "#06b6d4", + Tertiary = "#f59e0b", + AppbarBackground = "#7c3aed", + }, + PaletteDark = new PaletteDark() + { + Primary = "#7c3aed", + Secondary = "#06b6d4", + Tertiary = "#f59e0b", + AppbarBackground = "#1e1e2e", + Background = "#1e1e2e", + Surface = "#313244", + DrawerBackground = "#181825", + DrawerText = "#cdd6f4", + TextPrimary = "#cdd6f4", + TextSecondary = "#a6adc8", + }, + }; + + private void ToggleDrawer() + { + _drawerOpen = !_drawerOpen; } - private async Task ToggleTheme() + private void ToggleDarkMode() { - currentTheme = currentTheme == "dark" ? "light" : "dark"; - - // EN: Save theme to localStorage - // VI: Lưu theme vào localStorage - await JS.InvokeVoidAsync("localStorage.setItem", "theme", currentTheme); + _isDarkMode = !_isDarkMode; } } diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor b/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor index b11f212f..0d401b79 100644 --- a/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor +++ b/apps/web-client-base-net/src/WebClientBase.Client/Layout/NavMenu.razor @@ -1,30 +1,17 @@ -@* - EN: Navigation menu with Products and Auth links. - VI: Menu navigation với các link Products và Auth. -*@ - -
- GoodGo -
- - + + + Home + + + Products + + + Auth + + + Counter + + + Weather + + diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor b/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor index 9001e0bd..5bdf2982 100644 --- a/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor +++ b/apps/web-client-base-net/src/WebClientBase.Client/Pages/Home.razor @@ -1,7 +1,71 @@ @page "/" -Home +Home - GoodGo -

Hello, world!

+Welcome to GoodGo + + Enterprise frontend application built with Blazor WebAssembly and MudBlazor. + -Welcome to your new app. + + + + + + + + + + + Products + Manage your product catalog + + + + View Products + + + + + + + + + + + + + + Authentication + Login and registration + + + + Go to Auth + + + + + + + + + + + + + + BFF Architecture + YARP reverse proxy to microservices + + + + API Docs + + + + + + + This app uses the Backend for Frontend (BFF) pattern with YARP to proxy API calls to microservices. + diff --git a/apps/web-client-base-net/src/WebClientBase.Client/Program.cs b/apps/web-client-base-net/src/WebClientBase.Client/Program.cs index 5fa2c89f..0a903379 100644 --- a/apps/web-client-base-net/src/WebClientBase.Client/Program.cs +++ b/apps/web-client-base-net/src/WebClientBase.Client/Program.cs @@ -1,11 +1,18 @@ using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using MudBlazor.Services; using WebClientBase.Client; var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("#app"); builder.RootComponents.Add("head::after"); +// EN: Add HttpClient for API calls +// VI: Thêm HttpClient cho các cuộc gọi API builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); +// EN: Add MudBlazor services +// VI: Thêm các services của MudBlazor +builder.Services.AddMudServices(); + await builder.Build().RunAsync(); diff --git a/apps/web-client-base-net/src/WebClientBase.Client/WebClientBase.Client.csproj b/apps/web-client-base-net/src/WebClientBase.Client/WebClientBase.Client.csproj index 1738905a..dec62b80 100644 --- a/apps/web-client-base-net/src/WebClientBase.Client/WebClientBase.Client.csproj +++ b/apps/web-client-base-net/src/WebClientBase.Client/WebClientBase.Client.csproj @@ -10,6 +10,7 @@ + diff --git a/apps/web-client-base-net/src/WebClientBase.Client/_Imports.razor b/apps/web-client-base-net/src/WebClientBase.Client/_Imports.razor index 592bcb8c..bedd62d1 100644 --- a/apps/web-client-base-net/src/WebClientBase.Client/_Imports.razor +++ b/apps/web-client-base-net/src/WebClientBase.Client/_Imports.razor @@ -6,8 +6,8 @@ @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.AspNetCore.Components.WebAssembly.Http @using Microsoft.JSInterop +@using MudBlazor @using WebClientBase.Client @using WebClientBase.Client.Layout @using WebClientBase.Shared @using WebClientBase.Shared.DTOs - diff --git a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html index c6eef2ae..5b372c49 100644 --- a/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html +++ b/apps/web-client-base-net/src/WebClientBase.Client/wwwroot/index.html @@ -7,14 +7,20 @@ GoodGo Web Client Base - - - - - + + + - - + + + + + + + + + + @@ -22,17 +28,17 @@
- - -
+ + +
- - + -

Loading GoodGo... / Đang tải...

+

Loading GoodGo... / Đang tải...

-