+
+ 메뉴
+
+
+
+
+
-
- QuantEngine v@appVersion
- 배포: @buildTime
+
+
+
-
-
+
+
+
@Body
@@ -35,8 +101,20 @@
@code {
private bool navOpen = true;
+ private bool fixedOpen = true;
+ private bool isDarkMode = false;
private string appVersion = "Local Debug";
private string buildTime = "N/A";
+ private MudTheme currentTheme = default!;
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ isDarkMode = await MudThemeProvider.GetDarkModeAsync() ?? false;
+ StateHasChanged();
+ }
+ }
protected override async Task OnInitializedAsync()
{
@@ -52,6 +130,19 @@
catch
{
}
+
+ await base.OnInitializedAsync();
+ }
+
+ private async Task ToggleDarkMode()
+ {
+ isDarkMode = !isDarkMode;
+ await MudThemeProvider.SetDarkModeAsync(isDarkMode);
+ }
+
+ private void ToggleDrawer()
+ {
+ navOpen = !navOpen;
}
private async Task HandleLogoutAsync()
@@ -61,6 +152,16 @@
NavigationManager.NavigateTo("/login");
}
+ private string GetFirstLetter(string? name)
+ {
+ return string.IsNullOrEmpty(name) ? "?" : name[0].ToString().ToUpper();
+ }
+
+ private string GetUserInitials()
+ {
+ return string.Empty;
+ }
+
private class VersionInfo
{
public string? Version { get; set; }
diff --git a/src/dotnet/QuantEngine.Web/Client/Layout/MainLayout.razor.css b/src/dotnet/QuantEngine.Web/Client/Layout/MainLayout.razor.css
index 38d1f25..480a48c 100644
--- a/src/dotnet/QuantEngine.Web/Client/Layout/MainLayout.razor.css
+++ b/src/dotnet/QuantEngine.Web/Client/Layout/MainLayout.razor.css
@@ -1,81 +1,83 @@
-.page {
- position: relative;
- display: flex;
- flex-direction: column;
+/* QuantEngine MainLayout Styles */
+
+/* AppBar Enhancements */
+.mud-appbar-dense {
+ padding: 0 1rem;
}
-main {
+.mud-appbar-dense ::deep .mud-appbar-section-center {
flex: 1;
}
-.sidebar {
- background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+/* Avatar Styling */
+::deep .mud-avatar {
+ cursor: pointer;
+ transition: transform 0.2s ease;
}
-.top-row {
- background-color: #f7f7f7;
- border-bottom: 1px solid #d6d5d5;
- justify-content: flex-end;
- height: 3.5rem;
- display: flex;
- align-items: center;
+::deep .mud-avatar:hover {
+ transform: scale(1.05);
}
- .top-row ::deep a, .top-row ::deep .btn-link {
- white-space: nowrap;
- margin-left: 1.5rem;
- text-decoration: none;
+/* Drawer Footer */
+.mud-drawer-footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background: var(--mud-palette-surface);
+}
+
+/* Main Content Area */
+.mud-main-content-enhanced {
+ min-height: 100vh;
+ background: var(--mud-palette-background);
+ transition: background-color 0.3s ease;
+}
+
+/* Navigation Menu Styles */
+.mud-navmenu {
+ padding: 1rem 0;
+}
+
+.mud-navmenu ::deep .mud-nav-item {
+ padding: 0.5rem 0;
+ margin: 0.25rem 0;
+}
+
+.mud-navmenu ::deep .mud-nav-link {
+ border-radius: 0.4rem;
+ margin: 0 0.5rem;
+ transition: all 0.2s ease;
+}
+
+.mud-navmenu ::deep .mud-nav-link:hover {
+ background-color: var(--mud-palette-action-default-hover);
+}
+
+.mud-navmenu ::deep .mud-nav-link.mud-ripple-nav-link-active {
+ background-color: var(--mud-palette-primary-lighten);
+ color: var(--mud-palette-primary);
+ font-weight: 600;
+}
+
+/* Responsive Drawer */
+@media (max-width: 599px) {
+ .mud-drawer-content {
+ width: 100% !important;
}
- .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
- text-decoration: underline;
- }
-
- .top-row ::deep a:first-child {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
-@media (max-width: 640.98px) {
- .top-row {
- justify-content: space-between;
- }
-
- .top-row ::deep a, .top-row ::deep .btn-link {
- margin-left: 0;
+ .mud-drawer-footer {
+ position: relative;
}
}
-@media (min-width: 641px) {
- .page {
- flex-direction: row;
- }
-
- .sidebar {
- width: 250px;
- height: 100vh;
- position: sticky;
- top: 0;
- }
-
- .top-row {
- position: sticky;
- top: 0;
- z-index: 1;
- }
-
- .top-row.auth ::deep a:first-child {
- flex: 1;
- text-align: right;
- width: 0;
- }
-
- .top-row, article {
- padding-left: 2rem !important;
- padding-right: 1.5rem !important;
+@media (min-width: 600px) {
+ .mud-drawer-footer {
+ position: absolute;
}
}
+/* Error UI */
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
@@ -90,9 +92,14 @@ main {
z-index: 1000;
}
- #blazor-error-ui .dismiss {
- cursor: pointer;
- position: absolute;
- right: 0.75rem;
- top: 0.5rem;
- }
+#blazor-error-ui .dismiss {
+ cursor: pointer;
+ position: absolute;
+ right: 0.75rem;
+ top: 0.5rem;
+}
+
+/* Dark Mode Transitions */
+* {
+ transition: background-color 0.3s ease, color 0.3s ease;
+}