diff --git a/src/TaxBaik.Web/wwwroot/css/admin.css b/src/TaxBaik.Web/wwwroot/css/admin.css index aa04259..a6200dc 100644 --- a/src/TaxBaik.Web/wwwroot/css/admin.css +++ b/src/TaxBaik.Web/wwwroot/css/admin.css @@ -1846,6 +1846,150 @@ textarea:focus-visible { min-width: 100px; font-size: var(--font-size-xs); } +} + +/* ============================================================================ + Tabler Navbar Vertical (Admin Sidebar) + ============================================================================ */ + +.admin-sidebar-nav { + background: var(--bg-primary); + border-right: 1px solid var(--border-color-light); + padding: 0; + min-height: 100%; + flex-direction: column; +} + +.admin-sidebar-nav .navbar-brand { + padding: var(--space-3) var(--space-4); + border-bottom: 1px solid var(--border-color-light); +} + +.admin-sidebar-nav .navbar-nav { + flex-direction: column; + padding: var(--space-4) 0; +} + +.admin-sidebar-nav .nav-item { + margin: 0; +} + +.admin-sidebar-nav .nav-link { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) var(--space-4); + color: var(--text-primary); + text-decoration: none; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-regular); + transition: all var(--transition-base); + position: relative; + border-left: 3px solid transparent; + margin: 0 var(--space-2); + border-radius: var(--radius-md); +} + +.admin-sidebar-nav .nav-link:hover { + background-color: var(--primary-light); + color: var(--primary-dark); +} + +.admin-sidebar-nav .nav-link.active { + background-color: var(--primary-light); + color: var(--primary-dark); + font-weight: var(--font-weight-semibold); + border-left-color: var(--primary-color); +} + +.admin-sidebar-nav .nav-link-icon { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + flex-shrink: 0; +} + +.admin-sidebar-nav .nav-link-icon svg { + width: 20px; + height: 20px; + stroke: currentColor; +} + +.admin-sidebar-nav .nav-link-title { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.admin-sidebar-nav .dropdown-toggle::after { + content: ''; + display: inline-block; + width: 0.3em; + height: 0.3em; + border: solid currentColor; + border-width: 0.15em 0.15em 0 0; + transform: rotate(45deg); + margin-left: auto; + transition: transform var(--transition-base); +} + +.admin-sidebar-nav .dropdown-toggle:not(.collapsed)::after { + transform: rotate(-135deg); +} + +.admin-sidebar-nav .dropdown-menu { + border: none; + background: var(--bg-secondary); + padding: var(--space-2) 0; + margin: 0; + border-radius: 0; + box-shadow: inset 2px 0 0 var(--border-color-light); +} + +.admin-sidebar-nav .dropdown-item { + padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 20px + var(--space-3)); + color: var(--text-primary); + font-size: var(--font-size-sm); + transition: all var(--transition-base); + text-decoration: none; +} + +.admin-sidebar-nav .dropdown-item:hover { + background-color: var(--primary-light); + color: var(--primary-dark); +} + +.admin-sidebar-nav .dropdown-item.active { + background-color: var(--primary-light); + color: var(--primary-dark); + font-weight: var(--font-weight-semibold); +} + +/* Responsive Navbar Toggler */ +.admin-sidebar-nav .navbar-toggler { + display: none; + border: none; + padding: var(--space-3) var(--space-4); + color: var(--text-primary); +} + +@media (max-width: 991px) { + .admin-sidebar-nav .navbar-toggler { + display: block; + } + + .admin-sidebar-nav { + position: sticky; + top: 0; + } + + .admin-sidebar-nav .navbar-collapse { + max-height: calc(100vh - 150px); + overflow-y: auto; + } .admin-drawer-footer { display: none;