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

26
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,7 +64,8 @@ export const NavigationSidebar = () => {
const showRecentProject = mode === 'full' && lastViewed; const showRecentProject = mode === 'full' && lastViewed;
return ( return (
<StyledBox> <StretchContainer>
<ScreenHeightBox>
<PrimaryNavigationList <PrimaryNavigationList
mode={mode} mode={mode}
onClick={setActiveItem} onClick={setActiveItem}
@ -98,6 +104,15 @@ export const NavigationSidebar = () => {
</SecondaryNavigation> </SecondaryNavigation>
)} )}
{mode === 'mini' && (
<ShowAdmin
onChange={() => {
changeExpanded('admin', true);
setMode('full');
}}
/>
)}
{showRecentProject && ( {showRecentProject && (
<RecentProjectsNavigation <RecentProjectsNavigation
mode={mode} mode={mode}
@ -112,6 +127,7 @@ export const NavigationSidebar = () => {
setMode(mode === 'full' ? 'mini' : 'full'); 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 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>
);
};