Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 17:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🎨 style: Reduce Transition Duration For Nav And Header from #7653 (#7691)

Browse source
This commit is contained in:
Danny Avila 2025-06-02 14:56:26 -04:00 • committed by GitHub
parent c7f2ee36c5
commit 8cade2120d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Chat/Header.tsx
View file

@ -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} />

6
client/src/components/Nav/Nav.tsx
View file

@ -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