Shiloh/remnantchat
Shiloh/remnantchat
1
0
Fork 1
Code Issues Pull Requests Packages Projects 4 Releases Wiki Activity

feat: improve drawer layout

Browse Source
This commit is contained in:
Jeremy Kahn 2022-11-26 09:49:02 -06:00
parent 8ec721bc2f
commit fdf80b8292
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Shell/ShellAppBar.tsx
View File

@ -28,19 +28,21 @@ export const AppBar = styled(MuiAppBar, {
...(isDrawerOpen && { ...(isDrawerOpen && {
width: `calc(100% - ${drawerWidth}px)`, width: `calc(100% - ${drawerWidth}px)`,
marginLeft: `${drawerWidth}px`, marginLeft: `${drawerWidth}px`,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}), }),
...(isPeerListOpen && { ...(isPeerListOpen && {
width: `calc(100% - ${peerListWidth}px)`, width: `calc(100% - ${peerListWidth}px)`,
marginRight: `${peerListWidth}px`, marginRight: `${peerListWidth}px`,
}),
...((isDrawerOpen || isPeerListOpen) && {
transition: theme.transitions.create(['margin', 'width'], { transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut, easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
}), }),
...(isDrawerOpen &&
isPeerListOpen && {
width: `calc(100% - ${drawerWidth}px - ${peerListWidth}px)`,
}),
})) }))
interface ShellAppBarProps { interface ShellAppBarProps {