Files
pos-system/apps/web-client-tpos-net/src/WebClientTpos.Client/Layout/MarketingLayout.razor

122 lines
4.5 KiB
Plaintext

@*
EN: Marketing layout — Industrial sidebar + TopBar + Content area.
VI: Layout Marketing — Sidebar công nghiệp + TopBar + Vùng nội dung.
Design: pencil-design/src/pages/tMarketing/desktop/
*@
@inherits LayoutComponentBase
@inject NavigationManager NavigationManager
@inject IJSRuntime JS
<MudThemeProvider IsDarkMode="true" Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<div class="mkt-layout">
@* ═══ SIDEBAR / THANH ĐIỀU HƯỚNG ═══ *@
<aside class="mkt-sidebar @(_sidebarOpen ? "mkt-sidebar--open" : "")">
@* Logo *@
<div class="mkt-sidebar__logo">
<div class="mkt-sidebar__logo-icon">M</div>
<span class="mkt-sidebar__logo-text">tMARKETING</span>
</div>
@* Navigation / Điều hướng *@
<nav class="mkt-sidebar__nav">
<NavLink href="/marketing" class="mkt-nav-item" Match="NavLinkMatch.All" ActiveClass="mkt-nav-item--active">
<span class="mkt-nav-num">01</span>
<span>HUB</span>
</NavLink>
<NavLink href="/marketing/livechat" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
<span class="mkt-nav-num">02</span>
<span>CHAT</span>
</NavLink>
<NavLink href="/marketing/customers" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
<span class="mkt-nav-num">03</span>
<span>CRM</span>
</NavLink>
<NavLink href="/marketing/content" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
<span class="mkt-nav-num">04</span>
<span>AI STUDIO</span>
</NavLink>
<NavLink href="/marketing/analytics" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
<span class="mkt-nav-num">05</span>
<span>ANALYTICS</span>
</NavLink>
<NavLink href="/marketing/chatbot" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
<span class="mkt-nav-num">06</span>
<span>CHATBOT</span>
</NavLink>
<NavLink href="/marketing/ai-chatbot" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
<span class="mkt-nav-num">07</span>
<span>AI BOT</span>
</NavLink>
</nav>
@* Stats card / Thẻ thống kê *@
<div class="mkt-sidebar__stats">
<div class="mkt-sidebar__stats-header">
<i data-lucide="bar-chart-2"></i>
<span>REACH TODAY</span>
</div>
<div class="mkt-sidebar__stats-value">45.2K</div>
</div>
@* User profile / Hồ sơ người dùng *@
<div class="mkt-sidebar__user">
<div class="mkt-user-avatar">AD</div>
<span class="mkt-user-name">ADMIN</span>
<button @onclick="Logout" title="Đăng xuất">
<i data-lucide="chevron-right"></i>
</button>
</div>
</aside>
@* Mobile overlay *@
@if (_sidebarOpen)
{
<div class="mkt-sidebar-overlay" @onclick="CloseSidebar"></div>
}
@* ═══ MAIN AREA / VÙNG NỘI DUNG ═══ *@
<main class="mkt-main">
@* Mobile toggle button — visible only on ≤768px *@
<button class="mkt-mobile-toggle" @onclick="ToggleSidebar" style="position:fixed;top:12px;left:12px;z-index:998;">
<i data-lucide="menu"></i>
</button>
@Body
</main>
</div>
@code {
private bool _sidebarOpen = false;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
// EN: Re-init Lucide icons after every render (Blazor navigation replaces DOM)
// VI: Khởi tạo lại Lucide icons sau mỗi lần render
try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
}
private void ToggleSidebar() => _sidebarOpen = !_sidebarOpen;
private void CloseSidebar() => _sidebarOpen = false;
private void Logout() => NavigationManager.NavigateTo("/login");
private MudTheme _theme = new()
{
PaletteDark = new PaletteDark()
{
Primary = "#FACC15",
PrimaryContrastText = "#18181B",
AppbarBackground = "#0F0F10",
AppbarText = "#FAFAFA",
Background = "#18181B",
Surface = "#0F0F10",
TextPrimary = "#FAFAFA",
TextSecondary = "#71717A",
ActionDefault = "#FAFAFA",
LinesDefault = "#27272A"
}
};
}