Danny Avila 1d9ea7f83f 👐 fix: Open/Close Sidebar Button Animation UX Regression from #10521 (#10694) ... Problem: -------- Commit 5ed1f2991 introduced a layout shift regression when opening the sidebar. The UI would visibly "jump" as elements shifted right before the animation completed. Closing the sidebar worked correctly. Root Cause Analysis: -------------------- The accessibility PR added a redundant `{navVisible && ...}` conditional wrapper around the `<nav>` content inside Nav.tsx's `motion.div`. This caused a race condition: 1. User clicks "Open Sidebar" button 2. `navVisible` state becomes `true` 3. React renders the `motion.div` AND its children simultaneously 4. The inner `{navVisible && (<nav>...)}` renders content at full width (320px/260px) BEFORE framer-motion applies `initial={{ width: 0 }}` 5. Brief flash of full-width content causes visible layout shift 6. Animation then starts from width: 0, but damage is done The ref-based focus management (passing `openSidebarRef`/`closeSidebarRef` through context) was suspected but was not the actual cause. However, `requestAnimationFrame` focus calls during animation start could trigger forced layout calculations, exacerbating the issue. Solution: --------- 1. Remove redundant conditional rendering in Nav.tsx - The outer `{navVisible && (<motion.div>...)}` already controls visibility - The `overflow-x-hidden` class on motion.div clips content during animation - Content should always exist inside motion.div for smooth clipping 2. Replace ref-based focus with ID-based focus management - Refs passed through component tree can affect React's reconciliation - Using `document.getElementById()` decouples focus from render cycle - Exported `CLOSE_SIDEBAR_ID` and `OPEN_SIDEBAR_ID` constants for consistency 3. Delay focus until after animation completes - Changed from `requestAnimationFrame` to `setTimeout(..., 250)` - Animation duration is 200ms; 250ms ensures completion - Prevents layout thrashing during animation 4. Clean up prop drilling - Removed `openSidebarRef`/`closeSidebarRef` from Root.tsx context - Simplified Nav.tsx, Header.tsx, NewChat.tsx prop signatures - Updated ContextType to remove ref properties Files Changed: -------------- - client/src/routes/Root.tsx - client/src/components/Nav/Nav.tsx - client/src/components/Nav/NewChat.tsx - client/src/components/Chat/Header.tsx - client/src/components/Chat/Menus/OpenSidebar.tsx - client/src/common/types.ts Accessibility Note: ------------------- The original inner conditional was added to prevent keyboard navigation to hidden sidebar content for screen readers. This is still handled by: - AnimatePresence unmounting the motion.div after exit animation - The motion.div having width: 0 during exit (content not reachable) - Screen readers typically skip content being animated out - Other: removed non-existant prop from BookmarkNav Testing: -------- - Verified smooth animation when opening sidebar (no layout shift) - Verified smooth animation when closing sidebar (unchanged) - Verified focus transfers correctly between open/close buttons - Verified keyboard navigation works as expected		2025-12-04 14:34:46 -05:00
..
Bookmarks	📦 feat: Move Shared Components to @librechat/client (#8685)	2025-07-27 12:19:01 -04:00
Endpoints	🛗 fix: Address Accessibility Issues - Axe Rating: Serious (#10521)	2025-12-04 14:34:45 -05:00
Models	🎨 feat: UI Refresh for Enhanced UX (#6346)	2025-03-25 18:50:58 -04:00
Presets	🪦 refactor: Remove Legacy Code (#10533)	2025-12-04 14:34:44 -05:00
UI	📦 feat: Move Shared Components to @librechat/client (#8685)	2025-07-27 12:19:01 -04:00
BookmarkMenu.tsx	📦 feat: Move Shared Components to @librechat/client (#8685)	2025-07-27 12:19:01 -04:00
HeaderNewChat.tsx	♻️ refactor: Message Cache Clearing Logic into Reusable Helper (#10226)	2025-10-22 22:02:29 +02:00
index.ts	🧭 refactor: Modernize Nav/Header (#7094)	2025-04-27 14:03:25 -04:00
OpenSidebar.tsx	👐 fix: Open/Close Sidebar Button Animation UX Regression from #10521 (#10694)	2025-12-04 14:34:46 -05:00
PresetsMenu.tsx	📦 feat: Move Shared Components to @librechat/client (#8685)	2025-07-27 12:19:01 -04:00