feat: Introduce full-screen navigation menu, refresh overall UI styling, and simplify the home page content.
This commit is contained in:
Ho Ngoc Hai
@@ -5,40 +5,60 @@
|
||||
<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" Class="border-b border-solid mud-border-lines-default" Fixed="true" Color="Color.Default" Style="backdrop-filter: blur(12px);">
|
||||
<MudIconButton Icon="@Icons.Material.Rounded.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@ToggleDrawer" Class="d-md-none" />
|
||||
<MudText Typo="Typo.h6" Class="ml-3 font-weight-bold" Style="font-family: 'Inter', sans-serif;">GoodGo</MudText>
|
||||
<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 />
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<!-- Desktop Navigation & Actions (Hidden on Mobile) -->
|
||||
<div class="d-none d-md-flex align-center gap-4">
|
||||
<MudStack Row="true" Spacing="4" Class="mr-4">
|
||||
<MudLink Href="/" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Home</MudLink>
|
||||
<MudLink Href="/features" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Features</MudLink>
|
||||
<MudLink Href="/enterprise" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Enterprise</MudLink>
|
||||
<MudLink Href="/pricing" Color="Color.Inherit" Underline="Underline.None" Class="mud-nav-link px-3 py-2">Pricing</MudLink>
|
||||
</MudStack>
|
||||
<!-- 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>
|
||||
|
||||
<MudStack Row="true" Spacing="2">
|
||||
<MudButton Variant="Variant.Outlined" Color="Color.Inherit" Class="rounded-lg">Sign in</MudButton>
|
||||
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="rounded-lg">Download</MudButton>
|
||||
</MudStack>
|
||||
</div>
|
||||
<MudIconButton Icon="@(_isDarkMode ? Icons.Material.Rounded.LightMode : Icons.Material.Rounded.DarkMode)"
|
||||
Color="Color.Inherit"
|
||||
Class="ml-2"
|
||||
OnClick="@ToggleDarkMode" />
|
||||
<!-- Hamburger Menu (Unified) -->
|
||||
<MudIconButton Icon="@Icons.Material.Rounded.Menu"
|
||||
Color="Color.Default"
|
||||
Edge="Edge.End"
|
||||
OnClick="@ToggleMenu"
|
||||
Style="color: var(--text-primary);" />
|
||||
</MudStack>
|
||||
</MudAppBar>
|
||||
|
||||
<MudDrawer @bind-Open="_drawerOpen" Variant="@DrawerVariant.Temporary" Elevation="1">
|
||||
<MudDrawerHeader>
|
||||
<MudText Typo="Typo.h6">GoodGo</MudText>
|
||||
</MudDrawerHeader>
|
||||
<NavMenu />
|
||||
</MudDrawer>
|
||||
|
||||
<MudMainContent Class="pt-16">
|
||||
@Body
|
||||
</MudMainContent>
|
||||
@@ -47,57 +67,46 @@
|
||||
@code {
|
||||
[Inject] private IJSRuntime JSRuntime { get; set; } = default!;
|
||||
|
||||
private bool _drawerOpen = false;
|
||||
private bool _menuOpen = false;
|
||||
private bool _isDarkMode = false;
|
||||
|
||||
private MudTheme _theme = new()
|
||||
{
|
||||
PaletteLight = new PaletteLight()
|
||||
{
|
||||
Primary = "#18181b", // Zinc-900 (almost black)
|
||||
AppbarBackground = "#f7f7f4",
|
||||
// Mapping to Enterprise Primitives
|
||||
Primary = "#18181b",
|
||||
AppbarBackground = "rgba(255,255,255,0.0)", // Transparent for glass effect
|
||||
AppbarText = "#18181b",
|
||||
Background = "#f7f7f4",
|
||||
Background = "#fafafa", // Neutral-50
|
||||
Surface = "#ffffff",
|
||||
DrawerBackground = "#f7f7f4",
|
||||
DrawerText = "#52525b", // Zinc-600
|
||||
TextPrimary = "#18181b",
|
||||
TextSecondary = "#52525b",
|
||||
ActionDefault = "#52525b",
|
||||
Divider = "#e4e4e7", // Zinc-200
|
||||
LinesDefault = "#e4e4e7"
|
||||
ActionDefault = "#18181b",
|
||||
LinesDefault = "#e4e4e7" // Neutral-200
|
||||
},
|
||||
PaletteDark = new PaletteDark()
|
||||
{
|
||||
Primary = "#fafafa", // Zinc-50
|
||||
PrimaryContrastText = "#18181b", // Zinc-900 (Black text on White Primary)
|
||||
AppbarBackground = "#09090b", // Zinc-950
|
||||
Primary = "#fafafa",
|
||||
PrimaryContrastText = "#18181b",
|
||||
AppbarBackground = "rgba(9,9,11,0.0)", // Transparent for glass effect
|
||||
AppbarText = "#fafafa",
|
||||
Background = "#09090b",
|
||||
Surface = "#18181b", // Zinc-900
|
||||
DrawerBackground = "#09090b", // Zinc-950 (Match Body Background)
|
||||
DrawerText = "#fafafa", // Zinc-50 (Ligher text for better contrast)
|
||||
Background = "#09090b", // Neutral-950
|
||||
Surface = "#18181b", // Neutral-900
|
||||
TextPrimary = "#fafafa",
|
||||
TextSecondary = "#a1a1aa",
|
||||
ActionDefault = "#a1a1aa",
|
||||
Divider = "#27272a", // Zinc-800
|
||||
LinesDefault = "#27272a"
|
||||
ActionDefault = "#fafafa",
|
||||
LinesDefault = "#27272a" // Neutral-800
|
||||
},
|
||||
LayoutProperties = new LayoutProperties()
|
||||
{
|
||||
DefaultBorderRadius = "6px",
|
||||
AppbarHeight = "64px"
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
protected override void OnInitialized()
|
||||
private void ToggleMenu()
|
||||
{
|
||||
_theme.Typography.Default.FontFamily = new[] { "Inter", "Helvetica", "Arial", "sans-serif" };
|
||||
_menuOpen = !_menuOpen;
|
||||
}
|
||||
|
||||
private void ToggleDrawer()
|
||||
private void CloseMenu()
|
||||
{
|
||||
_drawerOpen = !_drawerOpen;
|
||||
_menuOpen = false;
|
||||
}
|
||||
|
||||
private async Task ToggleDarkMode()
|
||||
|
||||
Reference in New Issue
Block a user