Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-27 12:51:26 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: add smooth transition animation to narrow mode toggle (#8740)

Browse Source
This commit is contained in:
Konv Suu 2025-08-01 14:45:08 +08:00 committed by GitHub
parent a789a59ad8
commit b7394c98a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/renderer/src/pages/home/Messages/NarrowLayout.tsx
View File

@ -9,22 +9,23 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
const NarrowLayout: FC<Props> = ({ children, ...props }) => {
const { narrowMode } = useSettings()
if (narrowMode) {
return (
<Container className="narrow-mode" {...props}>
{children}
</Container>
)
}
return children
return (
<Container className={`narrow-mode ${narrowMode ? 'active' : ''}`} {...props}>
{children}
</Container>
)
}
const Container = styled.div`
max-width: 800px;
max-width: 100%;
width: 100%;
margin: 0 auto;
position: relative;
transition: max-width 0.3s ease-in-out;
&.active {
max-width: 800px;
}
`
export default NarrowLayout