From 8cade2120d8f6d6155524a6590b024b27643caa1 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Mon, 2 Jun 2025 14:56:26 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20Reduce=20Transition=20D?=
 =?UTF-8?q?uration=20For=20Nav=20And=20Header=20from=20#7653=20(#7691)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Chat/Header.tsx | 4 ++--
 client/src/components/Nav/Nav.tsx     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
index 8a9bd80c23..93a265f4a2 100644
--- a/client/src/components/Chat/Header.tsx
+++ b/client/src/components/Chat/Header.tsx
@@ -39,7 +39,7 @@ export default function Header() {
         <div className="mx-1 flex items-center gap-2">
           <div
             className={`flex items-center gap-2 ${
-              !isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
+              !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
             } ${
               !navVisible
                 ? 'translate-x-0 opacity-100'
@@ -51,7 +51,7 @@ export default function Header() {
           </div>
           <div
             className={`flex items-center gap-2 ${
-              !isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
+              !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
             } ${!navVisible ? 'translate-x-0' : 'translate-x-[-100px]'}`}
           >
             <ModelSelector startupConfig={startupConfig} />
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index d425468ca6..a692274719 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/client/src/components/Nav/Nav.tsx
@@ -30,7 +30,7 @@ const NavMask = memo(
       id="mobile-nav-mask-toggle"
       role="button"
       tabIndex={0}
-      className={`nav-mask transition-opacity duration-500 ease-in-out ${navVisible ? 'active opacity-100' : 'opacity-0'}`}
+      className={`nav-mask transition-opacity duration-200 ease-in-out ${navVisible ? 'active opacity-100' : 'opacity-0'}`}
       onClick={toggleNavVisible}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -186,7 +186,7 @@ const Nav = memo(
         <div
           data-testid="nav"
           className={cn(
-            'nav active max-w-[320px] flex-shrink-0 transform overflow-x-hidden bg-surface-primary-alt transition-all duration-500 ease-in-out',
+            'nav active max-w-[320px] flex-shrink-0 transform overflow-x-hidden bg-surface-primary-alt transition-all duration-200 ease-in-out',
             'md:max-w-[260px]',
           )}
           style={{
@@ -197,7 +197,7 @@ const Nav = memo(
           <div className="h-full w-[320px] md:w-[260px]">
             <div className="flex h-full flex-col">
               <div
-                className={`flex h-full flex-col transition-opacity duration-500 ease-in-out ${navVisible ? 'opacity-100' : 'opacity-0'}`}
+                className={`flex h-full flex-col transition-opacity duration-200 ease-in-out ${navVisible ? 'opacity-100' : 'opacity-0'}`}
               >
                 <div className="flex h-full flex-col">
                   <nav