Danny Avila 9848f86215 👐 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-03 14:27:23 -05:00
..
public	🌉 feat: Integrate Helicone AI Gateway Provider (#10287)	2025-11-13 08:45:32 -05:00
scripts	🔧 refactor: Build Process and Static Asset Handling (#7605)	2025-05-28 11:48:04 -04:00
src	👐 fix: Open/Close Sidebar Button Animation UX Regression from #10521 (#10694)	2025-12-03 14:27:23 -05:00
test	🔐 feat: Granular Role-based Permissions + Entra ID Group Discovery (#7804)	2025-08-13 16:24:17 -04:00
babel.config.cjs	chore: Remove Unused Dependencies 🧹 (#939)	2023-09-14 15:12:22 -04:00
check_updates.sh	🔧 fix: Resolve Proper Dependencies to fix Application Error (#2488)	2024-04-22 12:52:30 -04:00
index.html	🌐 feat: Add support to SubDirectory hosting (#9155)	2025-08-27 02:00:18 -04:00
jest.config.cjs	✨ v0.8.1-rc2 (#10688)	2025-11-26 11:40:08 -05:00
nginx.conf	🚅 chore: Added an Example of Nginx gzip Settings (#3173)	2024-06-23 13:49:00 -04:00
package.json	🔐 refactor: MCP User Variable Description Rendering (#10769)	2025-12-02 09:03:22 -05:00
postcss.config.cjs	refactor: Settings/Presets UI Restructure, convert many files to TS (#740)	2023-08-04 13:56:44 -04:00
tailwind.config.cjs	🖼️ style: Improve Marketplace & Sharing Dialog UI	2025-08-13 16:24:24 -04:00
tsconfig.json	🖼️ style: Improve Marketplace & Sharing Dialog UI	2025-08-13 16:24:24 -04:00
vite.config.ts	🌐 feat: Configurable Domain and Port for Vite Dev Server (#10180)	2025-10-22 22:04:49 +02:00