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

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 HideIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
import ExpandIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
import SettingsIcon from '@mui/icons-material/Settings';
const ShowHideWrapper = styled(Box, {
shouldForwardProp: (prop) => prop !== 'mode',
@ -46,3 +47,19 @@ export const ShowHide: FC<{ mode: NavigationMode; onChange: () => void }> = ({
</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>
);
};