diff --git a/frontend/src/App.css b/frontend/src/App.css index 9afbf9a..268cc55 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -217,7 +217,15 @@ body { background: rgba(10, 10, 15, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); - animation: fadeIn 0.2s ease; + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s var(--transition-smooth); +} + +.sidebar-backdrop--visible { + opacity: 1; + pointer-events: auto; } .sidebar { @@ -232,13 +240,18 @@ body { background: var(--color-surface); border-right: 1px solid var(--color-border); overflow: hidden; - animation: slideInLeft 0.3s var(--transition-smooth); box-shadow: 8px 0 40px rgba(10, 10, 15, 0.4); + transition: transform 0.3s var(--transition-smooth); } -@keyframes slideInLeft { - from { transform: translateX(-100%); } - to { transform: translateX(0); } +.sidebar--collapsed { + transform: translateX(-100%); + pointer-events: none; +} + +.sidebar--open { + transform: translateX(0); + pointer-events: auto; } .sidebar--collapsed { diff --git a/frontend/src/components/SessionSidebar/index.tsx b/frontend/src/components/SessionSidebar/index.tsx index 7d444d7..043e380 100644 --- a/frontend/src/components/SessionSidebar/index.tsx +++ b/frontend/src/components/SessionSidebar/index.tsx @@ -118,8 +118,6 @@ export function SessionSidebar({ return groups; }, [sessions, searchQuery]); - if (!open) return null; - const groupLabels: Record = { today: t("sidebar.today"), yesterday: t("sidebar.yesterday"), @@ -128,8 +126,11 @@ export function SessionSidebar({ return ( <> -
-
+
+
{/* 头部:新建 + 收起 */}