Danny Avila 8d1f1c4dd4 👐 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-11 16:36:35 -05:00
..
Bookmarks	🪦 refactor: Remove Legacy Code (#10533)	2025-12-11 16:36:12 -05:00
ExportConversation	♿ fix: Address Accessibility Issues (#10260)	2025-10-27 19:46:43 -04:00
SettingsTabs	🛗 fix: Address Accessibility Issues - Axe Rating: Serious (#10521)	2025-12-11 16:36:32 -05:00
AccountSettings.tsx	🔇 fix: Hide Button Icons from Screen Readers (#10776)	2025-12-11 16:35:17 -05:00
AgentMarketplaceButton.tsx	🔇 fix: Hide Button Icons from Screen Readers (#10776)	2025-12-11 16:35:17 -05:00
index.ts	🎨 refactor: UI stlye (#4438)	2024-10-19 08:30:52 -04:00
MobileNav.tsx	🛗 fix: Address Accessibility Issues - Axe Rating: Serious (#10521)	2025-12-11 16:36:32 -05:00
Nav.tsx	👐 fix: Open/Close Sidebar Button Animation UX Regression from #10521 (#10694)	2025-12-11 16:36:35 -05:00
NavLink.tsx	👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091)	2024-09-21 22:45:50 -04:00
NavToggle.tsx	📦 feat: Move Shared Components to @librechat/client (#8685)	2025-07-27 12:19:01 -04:00
NewChat.tsx	👐 fix: Open/Close Sidebar Button Animation UX Regression from #10521 (#10694)	2025-12-11 16:36:35 -05:00
SearchBar.tsx	🌐 refactor: Interpolate Localization Keys (#10650)	2025-12-11 16:35:56 -05:00
Settings.tsx	🛗 fix: Address Accessibility Issues - Axe Rating: Serious (#10521)	2025-12-11 16:36:32 -05:00