Refine admin shell to Tabler style
TaxBaik CI/CD / build-and-deploy (push) Successful in 55s

This commit is contained in:
2026-07-09 13:34:15 +09:00
parent a312da919c
commit 5ee6a9da3f
2 changed files with 100 additions and 17 deletions
+30 -17
View File
@@ -2,6 +2,10 @@
var path = (Context.Request.Path.Value ?? string.Empty).ToLowerInvariant();
Func<string, bool> isActive = target => path.StartsWith(target.ToLowerInvariant(), StringComparison.OrdinalIgnoreCase);
Func<string, string> activeClass = target => isActive(target) ? "active" : string.Empty;
var coreOpen = isActive("/admin/dashboard") || isActive("/admin/settings") || isActive("/admin/clientlogs") || path == "/admin";
var customerOpen = isActive("/admin/customers") || isActive("/admin/clients") || isActive("/admin/inquiries") || isActive("/admin/consultingactivities");
var contentOpen = isActive("/admin/blog") || isActive("/admin/announcements") || isActive("/admin/faqs");
var financeOpen = isActive("/admin/taxprofiles") || isActive("/admin/taxfilings") || isActive("/admin/taxfilingschedules") || isActive("/admin/revenuetrackings");
}
<!DOCTYPE html>
<html lang="ko">
@@ -15,11 +19,17 @@
<link rel="stylesheet" href="~/css/admin.css" asp-append-version="true" />
</head>
<body class="admin-app">
<div class="page">
<header class="navbar navbar-expand-md d-print-none admin-topbar">
<div class="page admin-shell">
<header class="navbar navbar-expand-md navbar-light d-print-none admin-topbar">
<div class="container-fluid">
<div class="navbar-brand navbar-brand-autodark">
<a href="/admin/dashboard" class="text-decoration-none text-reset fw-semibold">TaxBaik Admin</a>
<div class="d-flex align-items-center gap-3">
<div class="navbar-brand navbar-brand-autodark">
<a href="/admin/dashboard" class="text-decoration-none text-reset fw-semibold">TaxBaik Admin</a>
</div>
<div class="d-none d-lg-flex flex-column">
<span class="text-uppercase text-muted small">Admin Console</span>
<span class="fw-semibold">Razor Pages + Tabler</span>
</div>
</div>
<div class="navbar-nav flex-row order-md-last gap-2 align-items-center">
<span class="text-muted small d-none d-md-inline">@User.Identity?.Name</span>
@@ -31,19 +41,22 @@
<div class="container-fluid">
<div class="row g-3">
<aside class="col-12 col-lg-3 col-xxl-2">
<div class="card shadow-sm border-0 admin-sidebar-card">
<div class="card-header">
<h3 class="card-title">관리 메뉴</h3>
<div class="card shadow-sm border-0 admin-sidebar-card sticky-top">
<div class="card-header admin-sidebar-header">
<div>
<div class="text-uppercase text-muted small">Navigation</div>
<h3 class="card-title mb-0">관리 메뉴</h3>
</div>
</div>
<div class="card-body p-0">
<div class="card-body p-0 admin-sidebar-body">
<div class="accordion accordion-flush" id="adminSidebarAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button @(isActive("/admin/dashboard") || isActive("/admin") && !isActive("/admin/blog") && !isActive("/admin/clients") ? string.Empty : "collapsed")" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuCore" aria-expanded="true">
<button class="accordion-button @(coreOpen ? string.Empty : "collapsed")" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuCore" aria-expanded="@(coreOpen ? "true" : "false")">
기본
</button>
</h2>
<div id="adminMenuCore" class="accordion-collapse collapse show" data-bs-parent="#adminSidebarAccordion">
<div id="adminMenuCore" class="accordion-collapse collapse @(coreOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action @activeClass("/admin/dashboard")" href="/admin/dashboard">대시보드</a>
<a class="list-group-item list-group-item-action @activeClass("/admin/settings")" href="/admin/settings">설정</a>
@@ -53,11 +66,11 @@
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuCustomer" aria-expanded="false">
<button class="accordion-button @(customerOpen ? string.Empty : "collapsed")" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuCustomer" aria-expanded="@(customerOpen ? "true" : "false")">
고객/상담
</button>
</h2>
<div id="adminMenuCustomer" class="accordion-collapse collapse" data-bs-parent="#adminSidebarAccordion">
<div id="adminMenuCustomer" class="accordion-collapse collapse @(customerOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action @activeClass("/admin/customers")" href="/admin/customers">고객</a>
<a class="list-group-item list-group-item-action @activeClass("/admin/clients")" href="/admin/clients">고객사</a>
@@ -68,11 +81,11 @@
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuContent" aria-expanded="false">
<button class="accordion-button @(contentOpen ? string.Empty : "collapsed")" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuContent" aria-expanded="@(contentOpen ? "true" : "false")">
콘텐츠
</button>
</h2>
<div id="adminMenuContent" class="accordion-collapse collapse" data-bs-parent="#adminSidebarAccordion">
<div id="adminMenuContent" class="accordion-collapse collapse @(contentOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action @activeClass("/admin/blog")" href="/admin/blog">블로그</a>
<a class="list-group-item list-group-item-action @activeClass("/admin/announcements")" href="/admin/announcements">공지사항</a>
@@ -82,11 +95,11 @@
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuFinance" aria-expanded="false">
<button class="accordion-button @(financeOpen ? string.Empty : "collapsed")" type="button" data-bs-toggle="collapse" data-bs-target="#adminMenuFinance" aria-expanded="@(financeOpen ? "true" : "false")">
세무 관리
</button>
</h2>
<div id="adminMenuFinance" class="accordion-collapse collapse" data-bs-parent="#adminSidebarAccordion">
<div id="adminMenuFinance" class="accordion-collapse collapse @(financeOpen ? "show" : string.Empty)" data-bs-parent="#adminSidebarAccordion">
<div class="list-group list-group-flush list-group-transparent">
<a class="list-group-item list-group-item-action @activeClass("/admin/taxprofiles")" href="/admin/taxprofiles">세무 프로필</a>
<a class="list-group-item list-group-item-action @activeClass("/admin/taxfilings")" href="/admin/taxfilings">신고 관리</a>
@@ -100,7 +113,7 @@
</div>
</aside>
<main class="col-12 col-lg-9 col-xxl-10">
<div class="card shadow-sm border-0 admin-content-card">
<div class="card shadow-sm border-0 admin-content-card admin-main-surface">
<div class="card-body p-3 p-md-4 p-xl-5">
@RenderBody()
</div>
+70
View File
@@ -345,6 +345,76 @@ html, body {
min-height: 100vh;
}
.admin-shell {
background:
radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 26%),
radial-gradient(circle at top right, rgba(15, 23, 42, 0.04), transparent 22%),
linear-gradient(180deg, #F5F8FC 0%, #EDF2F8 100%);
}
.admin-topbar {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.88) !important;
border-bottom: 1px solid rgba(214, 223, 232, 0.85);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.admin-sidebar-card {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.admin-sidebar-header {
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
border-bottom: 1px solid var(--border-color-light);
}
.admin-sidebar-body {
background: #fff;
}
.admin-sidebar-card .accordion-button {
font-weight: var(--font-weight-semibold);
font-size: 0.88rem;
color: var(--text-primary);
background: #fff;
}
.admin-sidebar-card .accordion-button:not(.collapsed) {
color: var(--primary-dark);
background: linear-gradient(90deg, rgba(31, 78, 121, 0.08), rgba(31, 78, 121, 0.03));
box-shadow: inset 3px 0 0 var(--primary-color);
}
.admin-sidebar-card .list-group-item {
border: 0;
border-radius: 0;
padding: 0.85rem 1rem;
color: var(--text-primary);
background: transparent;
}
.admin-sidebar-card .list-group-item:hover {
background: rgba(31, 78, 121, 0.06);
color: var(--primary-dark);
}
.admin-sidebar-card .list-group-item.active {
background: linear-gradient(90deg, rgba(31, 78, 121, 0.14), rgba(31, 78, 121, 0.06));
color: var(--primary-dark);
font-weight: var(--font-weight-semibold);
}
.admin-main-surface {
border-radius: var(--radius-xl);
overflow: hidden;
}
.admin-content-card .card-body {
min-height: calc(100vh - 140px);
}
.admin-faq-edit-panel {
max-width: 720px;
}