codexly-ui 0.8.2 → 0.8.3

package/fesm2022/codexly-ui.mjs

@@ -9399,6 +9399,9 @@ class ClxAppLayoutComponent {
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     _hovered = signal(false, ...(ngDevMode ? [{ debugName: "_hovered" }] : /* istanbul ignore next */ []));
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
+    /** True only for the duration of an explicit toggle/hover transition — see _sidebarCls(). */
+    _animating = signal(false, ...(ngDevMode ? [{ debugName: "_animating" }] : /* istanbul ignore next */ []));
+    _animatingTimer;
     collapsedChange = output();
     expandedChange = output();
     constructor() {
@@ -9422,12 +9425,22 @@ class ClxAppLayoutComponent {
             width = 'w-72';
         }
         const isOverlay = isDesktopCollapsed && hovered;
+        // `width` only transitions while `_animating` is true (set for the duration of an explicit
+        // collapse/expand/hover toggle — see _withTransition()). Left permanently on, this transition
+        // would also animate every layout pass a native window resize causes (the sidebar's computed
+        // width changes as a flex/fixed side-effect of the viewport reflow even when its Tailwind
+        // width class hasn't), turning a single instant reflow into a 300ms interpolated one and
+        // dragging the rest of the flex-sibling content along with it — the classic "resize lags,
+        // catches up after you stop" symptom.
+        const transition = this._animating()
+            ? 'transition-[width,transform] duration-300 ease-in-out lg:transition-[width]'
+            : 'transition-none';
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
             'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
-            'transition-[width,transform] duration-300 ease-in-out',
+            transition,
             isOverlay ? 'shadow-2xl' : '',
-            'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
+            'lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
             (!this._isMobile() || this._sidebarOpen()) ? 'translate-x-0' : '-translate-x-full',
         ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
@@ -9458,23 +9471,38 @@ class ClxAppLayoutComponent {
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
+        clearTimeout(this._animatingTimer);
+    }
+    /** Arms the width/transform transition for one toggle's duration, then switches it back off
+     *  so a later window resize reflow doesn't get caught by a live CSS transition on `width`. */
+    _withTransition(fn) {
+        this._animating.set(true);
+        fn();
+        clearTimeout(this._animatingTimer);
+        this._animatingTimer = setTimeout(() => this._animating.set(false), 320);
     }
     _toggleCollapsed() {
-        const next = !this.collapsed();
-        this.collapsed.set(next);
-        this._hovered.set(false);
-        this.collapsedChange.emit(next);
+        this._withTransition(() => {
+            const next = !this.collapsed();
+            this.collapsed.set(next);
+            this._hovered.set(false);
+            this.collapsedChange.emit(next);
+        });
     }
     _onSidebarEnter() {
         if (this.collapsed() && !this._isMobile()) {
-            this._hovered.set(true);
-            this.expandedChange.emit(true);
+            this._withTransition(() => {
+                this._hovered.set(true);
+                this.expandedChange.emit(true);
+            });
         }
     }
     _onSidebarLeave() {
         if (this._hovered()) {
-            this._hovered.set(false);
-            this.expandedChange.emit(false);
+            this._withTransition(() => {
+                this._hovered.set(false);
+                this.expandedChange.emit(false);
+            });
         }
     }
     toggleSidebar() { this._sidebarOpen.update(v => !v); }