jpmschweitzer/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-10-29 17:22:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(sidebar): animate the sidebar toggle instead of snapping

Browse Source 
The global .hidden utility (display: none) also matches #sidebar.hidden,
so the collapsed sidebar was removed from layout before its width/opacity
transition could run, and opening and closing both snapped in one frame.

Keep the collapsed sidebar rendered and take it out of interaction once
closed: .sidebar.hidden stays display: flex, gains pointer-events: none,
and visibility: hidden that is transitioned so it only flips after the
collapse finishes (keeping the closed sidebar out of the tab order).

On desktop the icon rail now tucks under the sidebar and slides out as it
collapses, so the combined width eases instead of jumping by 48px when
the two swap. On mobile the drawer keeps its width while off so it slides
out as well as in, and switching it to the right edge before opening no
longer animates it across the screen. Transitions are disabled under
prefers-reduced-motion, and the auto-collapse restore measures the chat
width with the transition suppressed.

Re-record the computed-style snapshot baseline for the sidebar and icon
rail.
This commit is contained in:
Yu-Wei Chang
2026-10-24 22:26:40 -07:00
parent a0c93f38ef
commit 4954cc2e8c
3 changed files with 104 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/sidebar-layout.js
+16 -3
View File
@@ -170,6 +170,15 @@ export function initSidebarLayout(Storage, opts) {
syncRailSide();
}
// Move the closed drawer to the other edge without transitioning its
// transform across the screen, so it then slides in from the edge it opens on.
function _setSidebarSideInstantly(sidebar, right) {
sidebar.style.setProperty('transition', 'none', 'important');
sidebar.classList.toggle('right-side', right);
void sidebar.offsetWidth;
sidebar.style.removeProperty('transition');
}
// Deliberate "open the sidebar" used by the mobile swipe gesture (wired at
// module scope). It MUST set _userToggledSidebar so the auto-collapse
// MutationObserver doesn't immediately re-hide it (the swipe was opening it,
@@ -189,7 +198,7 @@ export function initSidebarLayout(Storage, opts) {
if (side === 'left' || side === 'right') {
const wantRight = side === 'right';
if (sidebar.classList.contains('right-side') !== wantRight) {
sidebar.classList.toggle('right-side', wantRight);
_setSidebarSideInstantly(sidebar, wantRight);
// Swipe-selected sides are temporary on compact/mobile layouts. Do
// not overwrite the user's desktop sidebar preference.
if (window.innerWidth >= 768) {
@@ -227,7 +236,7 @@ export function initSidebarLayout(Storage, opts) {
// Mobile: the hamburger always opens the sidebar from the RIGHT.
// (Not persisted — keeps the desktop side preference untouched.)
if (!sidebar.classList.contains('right-side')) {
sidebar.classList.add('right-side');
_setSidebarSideInstantly(sidebar, true);
if (documentModule && documentModule.swapSide) { try { documentModule.swapSide(); } catch (_) {} }
}
// Opening sidebar — blur keyboard first, then open after layout settles
@@ -312,7 +321,9 @@ export function initSidebarLayout(Storage, opts) {
_wasAutoCollapsed = true;
syncRailSide();
} else if (window.innerWidth >= AUTO_COLLAPSE_WIDTH && isHidden && _wasAutoCollapsed) {
// Only restore if chat won't be too narrow
// Only restore if chat won't be too narrow. Suppress the width
// transition so the reflow measures the sidebar at its full width.
sidebar.style.transition = 'none';
sidebar.classList.remove('hidden');
void document.body.offsetWidth; // reflow
if (chatContainer && chatContainer.offsetWidth < MIN_CHAT_WIDTH) {
@@ -320,6 +331,8 @@ export function initSidebarLayout(Storage, opts) {
} else {
_wasAutoCollapsed = false;
}
void document.body.offsetWidth;
sidebar.style.transition = '';
syncRailSide();
}
}