Files
pos-system/apps/web-client-base-net/src/WebClientBase.Client/Layout/MainLayout.razor

118 lines
3.9 KiB
Plaintext

@inherits LayoutComponentBase
<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<!-- Full Screen Navigation Overlay -->
<div class="nav-overlay @(_menuOpen ? "open" : "")">
<div class="d-flex flex-column align-center">
<a href="/" class="nav-overlay-link" @onclick="CloseMenu">Home</a>
<a href="/solutions" class="nav-overlay-link" @onclick="CloseMenu">Solutions</a>
<a href="/enterprise" class="nav-overlay-link" @onclick="CloseMenu">Enterprise</a>
<a href="/company" class="nav-overlay-link" @onclick="CloseMenu">Company</a>
<div class="mt-8">
<button class="btn-enterprise-primary" @onclick="CloseMenu">Get in Touch</button>
</div>
</div>
<!-- Close Button Absolute -->
<MudIconButton Icon="@Icons.Material.Rounded.Close"
Color="Color.Inherit"
Size="Size.Large"
OnClick="@ToggleMenu"
Style="position: absolute; top: 24px; right: 24px;"
Class="z-50" />
</div>
<MudLayout>
<MudAppBar Elevation="0" Fixed="true" Color="Color.Transparent" Style="backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle);">
<!-- Logo -->
<MudText Typo="Typo.h6" Class="font-weight-bold" Style="font-family: var(--font-heading); color: var(--text-primary);">
GOODGO
</MudText>
<MudSpacer />
<!-- Action Group (Theme + Menu) -->
<MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
<!-- Theme Toggle -->
<button class="theme-toggle mr-2" @onclick="ToggleDarkMode" aria-label="Toggle theme">
@if (_isDarkMode)
{
<MudIcon Icon="@Icons.Material.Rounded.LightMode" Size="Size.Small" />
}
else
{
<MudIcon Icon="@Icons.Material.Rounded.DarkMode" Size="Size.Small" />
}
</button>
<!-- Hamburger Menu (Unified) -->
<MudIconButton Icon="@Icons.Material.Rounded.Menu"
Color="Color.Default"
Edge="Edge.End"
OnClick="@ToggleMenu"
Style="color: var(--text-primary);" />
</MudStack>
</MudAppBar>
<MudMainContent Class="pt-16">
@Body
</MudMainContent>
</MudLayout>
@code {
[Inject] private IJSRuntime JSRuntime { get; set; } = default!;
private bool _menuOpen = false;
private bool _isDarkMode = false;
private MudTheme _theme = new()
{
PaletteLight = new PaletteLight()
{
// Mapping to Enterprise Primitives
Primary = "#18181b",
AppbarBackground = "rgba(255,255,255,0.0)", // Transparent for glass effect
AppbarText = "#18181b",
Background = "#fafafa", // Neutral-50
Surface = "#ffffff",
TextPrimary = "#18181b",
ActionDefault = "#18181b",
LinesDefault = "#e4e4e7" // Neutral-200
},
PaletteDark = new PaletteDark()
{
Primary = "#fafafa",
PrimaryContrastText = "#18181b",
AppbarBackground = "rgba(9,9,11,0.0)", // Transparent for glass effect
AppbarText = "#fafafa",
Background = "#09090b", // Neutral-950
Surface = "#18181b", // Neutral-900
TextPrimary = "#fafafa",
ActionDefault = "#fafafa",
LinesDefault = "#27272a" // Neutral-800
},
};
private void ToggleMenu()
{
_menuOpen = !_menuOpen;
}
private void CloseMenu()
{
_menuOpen = false;
}
private async Task ToggleDarkMode()
{
_isDarkMode = !_isDarkMode;
await JSRuntime.InvokeVoidAsync("setTheme", _isDarkMode ? "dark" : "light");
}
}