fix ui
All checks were successful
Deploy on Master Change / deploy (push) Successful in 49s

This commit is contained in:
2026-07-03 23:01:57 +07:00
parent f67fc157ed
commit e80569906c
2 changed files with 20 additions and 23 deletions

View File

@@ -345,21 +345,21 @@ function App() {
Đăng xuất Đăng xuất
</button> </button>
</div> </div>
</aside>
<button <button
type="button" type="button"
className={`sidebar-edge-toggle${sidebarCollapsed ? ' sidebar-edge-toggle--collapsed' : ''}`} className="sidebar-edge-toggle"
onClick={toggleSidebarCollapse} onClick={toggleSidebarCollapse}
title={sidebarCollapsed ? 'Mở rộng menu' : 'Thu gọn menu'} title={sidebarCollapsed ? 'Mở rộng menu' : 'Thu gọn menu'}
> >
<svg viewBox="0 0 10 18" width="10" height="18" fill="currentColor"> <svg viewBox="0 0 10 18" width="10" height="18" fill="currentColor">
{sidebarCollapsed {sidebarCollapsed
? <path d="M1 1 L9 9 L1 17" /> ? <path d="M1 1 L9 9 L1 17" />
: <path d="M9 1 L1 9 L9 17" /> : <path d="M9 1 L1 9 L9 17" />
} }
</svg> </svg>
</button> </button>
</aside>
<main className={`main-content${sidebarCollapsed ? ' main-content--full' : ''}`}> <main className={`main-content${sidebarCollapsed ? ' main-content--full' : ''}`}>
<div className="page-viewport"> <div className="page-viewport">

View File

@@ -84,7 +84,7 @@ body {
position: fixed; position: fixed;
height: 100vh; height: 100vh;
max-height: 100vh; max-height: 100vh;
overflow: hidden; overflow: visible;
z-index: 10; z-index: 10;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: transform 0.28s cubic-bezier(.4,0,.2,1), width 0.28s cubic-bezier(.4,0,.2,1); transition: transform 0.28s cubic-bezier(.4,0,.2,1), width 0.28s cubic-bezier(.4,0,.2,1);
@@ -97,8 +97,8 @@ body {
/* ── Sidebar Edge Toggle (triangle tab at mid-right edge) ── */ /* ── Sidebar Edge Toggle (triangle tab at mid-right edge) ── */
.sidebar-edge-toggle { .sidebar-edge-toggle {
position: fixed; position: absolute;
left: 272px; right: -16px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 11; z-index: 11;
@@ -114,8 +114,9 @@ body {
cursor: pointer; cursor: pointer;
color: var(--text-muted); color: var(--text-muted);
padding: 0; padding: 0;
transition: left 0.28s cubic-bezier(.4,0,.2,1), background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s;
box-shadow: 2px 0 6px rgba(0,0,0,0.06); box-shadow: 2px 0 6px rgba(0,0,0,0.06);
pointer-events: auto;
} }
.sidebar-edge-toggle:hover { .sidebar-edge-toggle:hover {
@@ -123,10 +124,6 @@ body {
color: var(--accent); color: var(--accent);
} }
.sidebar-edge-toggle--collapsed {
left: 0;
}
.sidebar > nav { .sidebar > nav {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
@@ -4706,7 +4703,7 @@ input:checked + .slider:before {
} }
/* Show edge toggle when sidebar is open on mobile */ /* Show edge toggle when sidebar is open on mobile */
.sidebar--open ~ .sidebar-edge-toggle { .sidebar.sidebar--open .sidebar-edge-toggle {
display: flex; display: flex;
} }