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

🎨 style: Header UI Transitions & Image Detail Panel (#7653)

Browse source 
* feat: Enhance DialogImage component with image size retrieval and details panel

* feat: Improve UI transitions and responsiveness in Header, DialogImage, Nav, and SearchBar components

* fix: Correct button icon toggle in DialogImage component
This commit is contained in:
Marco Beretta 2025-06-02 13:50:44 +02:00 • committed by GitHub
parent 37c94beeac
commit aca89091d9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 235 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

11
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 ${navVisible ? 'active' : ''}`}
className={`nav-mask transition-opacity duration-500 ease-in-out ${navVisible ? 'active opacity-100' : 'opacity-0'}`}
onClick={toggleNavVisible}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
@ -186,18 +186,19 @@ const Nav = memo(
<div
data-testid="nav"
className={cn(
'nav active max-w-[320px] flex-shrink-0 overflow-x-hidden bg-surface-primary-alt',
'nav active max-w-[320px] flex-shrink-0 transform overflow-x-hidden bg-surface-primary-alt transition-all duration-500 ease-in-out',
'md:max-w-[260px]',
)}
style={{
width: navVisible ? navWidth : '0px',
visibility: navVisible ? 'visible' : 'hidden',
transition: 'width 0.2s, visibility 0.2s',
transform: navVisible ? 'translateX(0)' : 'translateX(-100%)',
}}
>
<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">
<div
className={`flex h-full flex-col transition-opacity duration-500 ease-in-out ${navVisible ? 'opacity-100' : 'opacity-0'}`}
>
<div className="flex h-full flex-col">
<nav
id="chat-history-nav"