Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
Code Issues Projects Releases Wiki Activity

feat: smart sticky expand/hide button (#7201)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-05-29 10:47:57 +02:00 committed by GitHub
parent ab3cbcfa56
commit 8d898c2ac9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 78 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationSidebar.tsx
View File

@ -41,9 +41,6 @@ export const StretchContainer = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
padding: theme.spacing(2), padding: theme.spacing(2),
alignSelf: 'stretch', alignSelf: 'stretch',
}));
export const ScreenHeightBox = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: theme.spacing(3), gap: theme.spacing(3),
@ -64,7 +61,6 @@ export const NavigationSidebar = () => {
return ( return (
<StretchContainer> <StretchContainer>
<ScreenHeightBox>
<PrimaryNavigationList <PrimaryNavigationList
mode={mode} mode={mode}
onClick={setActiveItem} onClick={setActiveItem}
@ -126,7 +122,6 @@ export const NavigationSidebar = () => {
setMode(mode === 'full' ? 'mini' : 'full'); setMode(mode === 'full' ? 'mini' : 'full');
}} }}
/> />
</ScreenHeightBox>
</StretchContainer> </StretchContainer>
); );
}; };

19
frontend/src/component/layout/MainLayout/NavigationSidebar/ShowHide.tsx
View File

@ -5,15 +5,24 @@ import HideIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
import ExpandIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; import ExpandIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
import SettingsIcon from '@mui/icons-material/Settings'; import SettingsIcon from '@mui/icons-material/Settings';
const ShowHideWrapper = styled(Box, { const ShowHideRow = styled(Box, {
shouldForwardProp: (prop) => prop !== 'mode', shouldForwardProp: (prop) => prop !== 'mode',
})<{ mode: NavigationMode }>(({ theme, mode }) => ({ })<{ mode: NavigationMode }>(({ theme, mode }) => ({
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
padding: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2), padding: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2),
marginTop: 'auto',
cursor: 'pointer', cursor: 'pointer',
position: 'sticky',
bottom: theme.spacing(2),
width: '100%',
}));
// This component is needed when the sticky item could overlap with nav items. You can replicate it on a short screen.
const ShowHideContainer = styled(Box)(({ theme }) => ({
flexGrow: 1,
display: 'flex',
alignItems: 'end',
})); }));
export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
@ -21,7 +30,8 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
onChange, onChange,
}) => { }) => {
return ( return (
<ShowHideWrapper onClick={onChange} mode={mode}> <ShowHideContainer>
<ShowHideRow onClick={onChange} mode={mode}>
{mode === 'full' && ( {mode === 'full' && (
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
@ -44,7 +54,8 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
</Tooltip> </Tooltip>
)} )}
</IconButton> </IconButton>
</ShowHideWrapper> </ShowHideRow>
</ShowHideContainer>
); );
}; };