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

🎨 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="mx-1 flex items-center gap-2">
<div <div
className={`flex items-center gap-2 ${ className={`flex items-center gap-2 ${
!isSmallScreen ? 'transition-all duration-500 ease-in-out' : '' !isSmallScreen ? 'transition-all duration-200 ease-in-out' : ''
} ${ } ${
!navVisible !navVisible
? 'translate-x-0 opacity-100' ? 'translate-x-0 opacity-100'
@ -51,7 +51,7 @@ export default function Header() {
</div> </div>
<div <div
className={`flex items-center gap-2 ${ 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]'}`} } ${!navVisible ? 'translate-x-0' : 'translate-x-[-100px]'}`}
> >
<ModelSelector startupConfig={startupConfig} /> <ModelSelector startupConfig={startupConfig} />

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

@ -30,7 +30,7 @@ const NavMask = memo(
id="mobile-nav-mask-toggle" id="mobile-nav-mask-toggle"
role="button" role="button"
tabIndex={0} 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} onClick={toggleNavVisible}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') {
@ -186,7 +186,7 @@ const Nav = memo(
<div <div
data-testid="nav" data-testid="nav"
className={cn( 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]', 'md:max-w-[260px]',
)} )}
style={{ style={{
@ -197,7 +197,7 @@ const Nav = memo(
<div className="h-full w-[320px] md:w-[260px]"> <div className="h-full w-[320px] md:w-[260px]">
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
<div <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"> <div className="flex h-full flex-col">
<nav <nav