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
..
a11y.ts	✨ v0.7.5-rc2 (#3976)	2024-09-10 19:00:27 -04:00
agents-types.ts	👤 feat: Agent Avatar Removal and Decouple upload/reset from Agent Updates (#10527)	2025-11-17 17:04:01 -05:00
artifacts.ts	🚀 feat: Artifact Editing & Downloads (#5428)	2025-01-23 18:19:04 -05:00
assistants-types.ts	⌚ feat: Add Current Datetime to Assistants (v1/v2) (#4952)	2024-12-11 15:26:18 -05:00
index.ts	🎨 feat: UI Refresh for Enhanced UX (#6346)	2025-03-25 18:50:58 -04:00
mcp.ts	✨ feat: Agent Panel UI Enhancements (#7800)	2025-06-13 15:47:41 -04:00
menus.ts	📁 feat: Integrate SharePoint File Picker and Download Workflow (#8651)	2025-08-13 16:24:16 -04:00
selector.ts	🤖 refactor: Side Panel Agent UI To Account For Ephemeral Agents (#9763)	2025-09-22 09:48:05 -04:00
tools.ts	🎉 feat: Code Interpreter API and Agents Release (#4860)	2024-12-04 15:48:13 -05:00
types.ts	👐 fix: Open/Close Sidebar Button Animation UX Regression from #10521 (#10694)	2025-12-11 16:36:35 -05:00