Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-06 01:15:28 +02: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,
padding: theme.spacing(2),
alignSelf: 'stretch',
}));
export const ScreenHeightBox = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(3),
@ -64,7 +61,6 @@ export const NavigationSidebar = () => {
return (
<StretchContainer>
<ScreenHeightBox>
<PrimaryNavigationList
mode={mode}
onClick={setActiveItem}
@ -126,7 +122,6 @@ export const NavigationSidebar = () => {
setMode(mode === 'full' ? 'mini' : 'full');
}}
/>
</ScreenHeightBox>
</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 SettingsIcon from '@mui/icons-material/Settings';
const ShowHideWrapper = styled(Box, {
const ShowHideRow = styled(Box, {
shouldForwardProp: (prop) => prop !== 'mode',
})<{ mode: NavigationMode }>(({ theme, mode }) => ({
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: theme.spacing(2, 1, 0, mode === 'mini' ? 1.5 : 2),
marginTop: 'auto',
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 }> = ({
@ -21,7 +30,8 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
onChange,
}) => {
return (
<ShowHideWrapper onClick={onChange} mode={mode}>
<ShowHideContainer>
<ShowHideRow onClick={onChange} mode={mode}>
{mode === 'full' && (
<Box
sx={(theme) => ({
@ -44,7 +54,8 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
</Tooltip>
)}
</IconButton>
</ShowHideWrapper>
</ShowHideRow>
</ShowHideContainer>
);
};