Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: Expand admin settings (#7192)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-05-28 16:09:23 +02:00 committed by GitHub
parent dbc14fa7e9
commit 8e0b75102b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 72 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import { Box, styled } from '@mui/material'; import { Box, styled } from '@mui/material';
import { type FC, useState } from 'react'; import { type FC, useState } from 'react';
import { useNavigationMode } from './useNavigationMode'; import { useNavigationMode } from './useNavigationMode';
import { ShowHide } from './ShowHide'; import { ShowAdmin, ShowHide } from './ShowHide';
import { useRoutes } from './useRoutes'; import { useRoutes } from './useRoutes';
import { useExpanded } from './useExpanded'; import { useExpanded } from './useExpanded';
import { import {
@ -37,13 +37,18 @@ export const MobileNavigationSidebar: FC<{ onClick: () => void }> = ({
); );
}; };
export const StyledBox = styled(Box)(({ theme }) => ({ export const StretchContainer = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
padding: theme.spacing(2, 2, 2, 2), padding: theme.spacing(2, 2, 2, 2),
zIndex: theme.zIndex.tooltip,
alignSelf: 'stretch',
}));
export const ScreenHeightBox = styled(Box)(({ theme }) => ({
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: theme.spacing(3), gap: theme.spacing(3),
zIndex: theme.zIndex.tooltip, minHeight: '93vh',
})); }));
export const NavigationSidebar = () => { export const NavigationSidebar = () => {
@ -59,59 +64,70 @@ export const NavigationSidebar = () => {
const showRecentProject = mode === 'full' && lastViewed; const showRecentProject = mode === 'full' && lastViewed;
return ( return (
<StyledBox> <StretchContainer>
<PrimaryNavigationList <ScreenHeightBox>
mode={mode} <PrimaryNavigationList
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('admin')} expanded={expanded.includes('configure')}
onExpandChange={(expand) => { onExpandChange={(expand) => {
changeExpanded('admin', expand); changeExpanded('configure', expand);
}} }}
mode={mode} mode={mode}
title='Admin' title='Configure'
> >
<SecondaryNavigationList <SecondaryNavigationList
routes={routes.adminRoutes} routes={routes.mainNavRoutes}
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>
)}
{showRecentProject && ( {mode === 'mini' && (
<RecentProjectsNavigation <ShowAdmin
onChange={() => {
changeExpanded('admin', true);
setMode('full');
}}
/>
)}
{showRecentProject && (
<RecentProjectsNavigation
mode={mode}
projectId={lastViewed}
onClick={() => setActiveItem('/projects')}
/>
)}
<ShowHide
mode={mode} mode={mode}
projectId={lastViewed} onChange={() => {
onClick={() => setActiveItem('/projects')} setMode(mode === 'full' ? 'mini' : 'full');
}}
/> />
)} </ScreenHeightBox>
</StretchContainer>
<ShowHide
mode={mode}
onChange={() => {
setMode(mode === 'full' ? 'mini' : 'full');
}}
/>
</StyledBox>
); );
}; };

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

@ -3,6 +3,7 @@ import type { NavigationMode } from './NavigationMode';
import type { FC } from 'react'; import type { FC } from 'react';
import HideIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; 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';
const ShowHideWrapper = styled(Box, { const ShowHideWrapper = styled(Box, {
shouldForwardProp: (prop) => prop !== 'mode', shouldForwardProp: (prop) => prop !== 'mode',
@ -46,3 +47,19 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
</ShowHideWrapper> </ShowHideWrapper>
); );
}; };
const ShowAdminWrapper = styled(Box)(({ theme }) => ({
padding: theme.spacing(2, 1, 0, 1.5),
}));
export const ShowAdmin: FC<{ onChange: () => void }> = ({ onChange }) => {
return (
<ShowAdminWrapper onClick={onChange}>
<IconButton>
<Tooltip title='Expand admin settings' placement='right'>
<SettingsIcon data-testid='expand-admin-settings' />
</Tooltip>
</IconButton>
</ShowAdminWrapper>
);
};