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,
padding: theme.spacing(2),
alignSelf: 'stretch',
}));
export const ScreenHeightBox = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(3),
@ -64,69 +61,67 @@ export const NavigationSidebar = () => {
return (
<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}
onClick={setActiveItem}
activeItem={activeItem}
/>
</SecondaryNavigation>
{mode === 'full' && (
<SecondaryNavigation
expanded={expanded.includes('configure')}
expanded={expanded.includes('admin')}
onExpandChange={(expand) => {
changeExpanded('configure', expand);
changeExpanded('admin', expand);
}}
mode={mode}
title='Configure'
title='Admin'
>
<SecondaryNavigationList
routes={routes.mainNavRoutes}
routes={routes.adminRoutes}
mode={mode}
onClick={setActiveItem}
activeItem={activeItem}
/>
</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' && (
<ShowAdmin
onChange={() => {
changeExpanded('admin', true);
setMode('full');
}}
/>
)}
{showRecentProject && (
<RecentProjectsNavigation
mode={mode}
projectId={lastViewed}
onClick={() => setActiveItem('/projects')}
/>
)}
<ShowHide
mode={mode}
{mode === 'mini' && (
<ShowAdmin
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>
);
};

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