122 lines
4.5 KiB
Plaintext
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"
|
|
}
|
|
};
|
|
}
|