Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +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

89
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,69 +61,67 @@ export const NavigationSidebar = () => {
return ( return (
<StretchContainer> <StretchContainer>
<ScreenHeightBox> <PrimaryNavigationList
<PrimaryNavigationList mode={mode}
onClick={setActiveItem}
activeItem={activeItem}
/>
<SecondaryNavigation
expanded={expanded.includes('configure')}
onExpandChange={(expand) => {
changeExpanded('configure', expand);
}}
mode={mode}
title='Configure'
>
<SecondaryNavigationList
routes={routes.mainNavRoutes}
mode={mode} mode={mode}
onClick={setActiveItem} onClick={setActiveItem}
activeItem={activeItem} activeItem={activeItem}
/> />
</SecondaryNavigation>
{mode === 'full' && (
<SecondaryNavigation <SecondaryNavigation
expanded={expanded.includes('configure')} expanded={expanded.includes('admin')}
onExpandChange={(expand) => { onExpandChange={(expand) => {
changeExpanded('configure', expand); changeExpanded('admin', expand);
}} }}
mode={mode} mode={mode}
title='Configure' title='Admin'
> >
<SecondaryNavigationList <SecondaryNavigationList
routes={routes.mainNavRoutes} routes={routes.adminRoutes}
mode={mode} mode={mode}
onClick={setActiveItem} onClick={setActiveItem}
activeItem={activeItem} activeItem={activeItem}
/> />
</SecondaryNavigation> </SecondaryNavigation>
{mode === 'full' && ( )}
<SecondaryNavigation
expanded={expanded.includes('admin')}
onExpandChange={(expand) => {
changeExpanded('admin', expand);
}}
mode={mode}
title='Admin'
>
<SecondaryNavigationList
routes={routes.adminRoutes}
mode={mode}
onClick={setActiveItem}
activeItem={activeItem}
/>
</SecondaryNavigation>
)}
{mode === 'mini' && ( {mode === 'mini' && (
<ShowAdmin <ShowAdmin
onChange={() => {
changeExpanded('admin', true);
setMode('full');
}}
/>
)}
{showRecentProject && (
<RecentProjectsNavigation
mode={mode}
projectId={lastViewed}
onClick={() => setActiveItem('/projects')}
/>
)}
<ShowHide
mode={mode}
onChange={() => { onChange={() => {
setMode(mode === 'full' ? 'mini' : 'full'); changeExpanded('admin', true);
setMode('full');
}} }}
/> />
</ScreenHeightBox> )}
{showRecentProject && (
<RecentProjectsNavigation
mode={mode}
projectId={lastViewed}
onClick={() => setActiveItem('/projects')}
/>
)}
<ShowHide
mode={mode}
onChange={() => {
setMode(mode === 'full' ? 'mini' : 'full');
}}
/>
</StretchContainer> </StretchContainer>
); );
}; };

61
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,30 +30,32 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
onChange, onChange,
}) => { }) => {
return ( return (
<ShowHideWrapper onClick={onChange} mode={mode}> <ShowHideContainer>
{mode === 'full' && ( <ShowHideRow onClick={onChange} mode={mode}>
<Box {mode === 'full' && (
sx={(theme) => ({ <Box
color: theme.palette.neutral.main, sx={(theme) => ({
fontSize: 'small', color: theme.palette.neutral.main,
})} fontSize: 'small',
> })}
Hide (⌘ + B) >
</Box> Hide (⌘ + B)
)} </Box>
<IconButton>
{mode === 'full' ? (
<HideIcon color='primary' />
) : (
<Tooltip title='Expand (⌘ + B)' placement='right'>
<ExpandIcon
data-testid='expand-navigation'
color='primary'
/>
</Tooltip>
)} )}
</IconButton> <IconButton>
</ShowHideWrapper> {mode === 'full' ? (
<HideIcon color='primary' />
) : (
<Tooltip title='Expand (⌘ + B)' placement='right'>
<ExpandIcon
data-testid='expand-navigation'
color='primary'
/>
</Tooltip>
)}
</IconButton>
</ShowHideRow>
</ShowHideContainer>
); );
}; };