1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

chore: menu cleanups (#9792)

This commit is contained in:
David Leek 2025-04-17 11:59:35 +02:00 committed by GitHub
parent 5ef33b56d6
commit d406420223
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 0 additions and 408 deletions

View File

@ -1,24 +0,0 @@
import { styled } from '@mui/material';
import type { FC } from 'react';
import { NavLink } from 'react-router-dom';
const StyledNavLink = styled(NavLink)(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
textDecoration: 'none',
color: 'inherit',
padding: theme.spacing(0, 5),
'&.active': {
fontWeight: 'bold',
},
}));
export const CenteredNavLink: FC<{
to: string;
children?: React.ReactNode;
}> = ({ to, children }) => {
return <StyledNavLink to={to}>{children}</StyledNavLink>;
};

View File

@ -1,156 +0,0 @@
import { Grid, styled, Paper, useMediaQuery, useTheme } from '@mui/material';
import type { ReactNode } from 'react';
import { Sticky } from 'component/common/Sticky/Sticky';
import { AdminMenuNavigation } from './AdminNavigationItems';
import { useNewAdminMenu } from '../../../../hooks/useNewAdminMenu';
const breakpointLgMinusPadding = 1250;
const breakpointLgMinusPaddingAdmin = 1550;
const breakpointXlMinusPadding = 1512;
const breakpointXlAdmin = 1812;
const breakpointXxl = 1856;
const MainLayoutContent = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
maxWidth: `${breakpointXlMinusPadding}px`,
margin: '0 auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up(breakpointXxl)]: {
width: '100%',
},
[theme.breakpoints.down(breakpointXxl)]: {
marginLeft: theme.spacing(7),
marginRight: theme.spacing(7),
},
[theme.breakpoints.down('lg')]: {
maxWidth: `${breakpointLgMinusPadding}px`,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
[theme.breakpoints.down(1024)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
minHeight: '94vh',
}));
const AdminMainLayoutContent = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
maxWidth: `${breakpointXlMinusPadding}px`,
margin: '0 auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.up(breakpointXxl)]: {
width: '100%',
},
[theme.breakpoints.down(breakpointXxl)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('lg')]: {
maxWidth: `${breakpointLgMinusPadding}px`,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
[theme.breakpoints.down(1024)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
minHeight: '94vh',
}));
const StyledAdminMainGrid = styled(Grid)(({ theme }) => ({
minWidth: 0, // this is a fix for overflowing flex
maxWidth: `${breakpointXlAdmin}px`,
margin: '0 auto',
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(2),
[theme.breakpoints.down('lg')]: {
maxWidth: `${breakpointLgMinusPaddingAdmin}px`,
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
[theme.breakpoints.down(1024)]: {
marginLeft: 0,
marginRight: 0,
},
[theme.breakpoints.down('sm')]: {
minWidth: '100%',
},
minHeight: '94vh',
}));
const StyledMenuPaper = styled(Paper)(({ theme }) => ({
width: '100%',
minWidth: 320,
padding: theme.spacing(3),
marginTop: theme.spacing(6.5),
borderRadius: `${theme.shape.borderRadiusLarge}px`,
boxShadow: 'none',
}));
const StickyContainer = styled(Sticky)(({ theme }) => ({
position: 'sticky',
top: 0,
background: theme.palette.background.application,
transition: 'padding 0.3s ease',
}));
interface IWrapIfAdminSubpageProps {
children: ReactNode;
}
export const WrapIfAdminSubpage = ({ children }: IWrapIfAdminSubpageProps) => {
const showOnlyAdminMenu = useNewAdminMenu();
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'));
const showAdminMenu = !isSmallScreen && showOnlyAdminMenu;
if (showAdminMenu) {
return (
<AdminMenu>
<AdminMainLayoutContent>{children}</AdminMainLayoutContent>
</AdminMenu>
);
}
return <MainLayoutContent>{children}</MainLayoutContent>;
};
interface IAdminMenuProps {
children: ReactNode;
}
export const AdminMenu = ({ children }: IAdminMenuProps) => {
const theme = useTheme();
const isBreakpoint = useMediaQuery(theme.breakpoints.down(1352));
const breakpointedSize = isBreakpoint ? 8 : 9;
const onClick = () => {
scrollTo({
top: 0,
behavior: 'smooth',
});
};
return (
<StyledAdminMainGrid container spacing={1}>
<Grid item>
<StickyContainer>
<StyledMenuPaper>
<AdminMenuNavigation onClick={onClick} />
</StyledMenuPaper>
</StickyContainer>
</Grid>
<Grid item md={breakpointedSize}>
{children}
</Grid>
</StyledAdminMainGrid>
);
};

View File

@ -39,20 +39,6 @@
color: inherit;
}
.navigationLink {
text-decoration: none;
color: var(--drawer-link-inactive);
padding: var(--drawer-padding);
display: flex;
align-items: centre;
}
.navigationLinkActive {
background-color: var(--drawer-link-active-bg);
color: var(--drawer-link-active);
width: 100%;
}
.navigationIcon {
margin-right: 16px;
fill: #635dc5;

View File

@ -1,92 +0,0 @@
import { ListItem, Link, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { EnterpriseBadge } from 'component/common/EnterpriseBadge/EnterpriseBadge';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import type { INavigationMenuItem } from 'interfaces/route';
import { Link as RouterLink } from 'react-router-dom';
interface INavigationLinkProps {
path: string;
text: string;
handleClose: () => void;
mode?: INavigationMenuItem['menu']['mode'];
}
const StyledListItem = styled(ListItem)({
minWidth: '150px',
height: '100%',
width: '100%',
margin: '0',
padding: '0',
});
const StyledLink = styled(RouterLink)(({ theme }) => ({
textDecoration: 'none',
alignItems: 'center',
display: 'flex',
color: 'inherit',
height: '100%',
width: '100%',
'&&': {
// Override MenuItem's built-in padding.
color: theme.palette.text.primary,
padding: theme.spacing(1, 2),
},
}));
const StyledSpan = styled('span')(({ theme }) => ({
width: '12.5px',
height: '12.5px',
display: 'block',
backgroundColor: theme.palette.primary.main,
marginRight: '1rem',
borderRadius: '2px',
}));
const StyledBadgeContainer = styled('div')(({ theme }) => ({
marginLeft: 'auto',
paddingLeft: theme.spacing(2),
display: 'flex',
}));
const NavigationLink = ({
path,
text,
handleClose,
...props
}: INavigationLinkProps) => {
const { isPro } = useUiConfig();
const showEnterpriseBadgeToPro = Boolean(
isPro() &&
!props.mode?.includes('pro') &&
props.mode?.includes('enterprise'),
);
return (
<StyledListItem
onClick={() => {
handleClose();
}}
>
<Link
style={{ textDecoration: 'none' }}
component={StyledLink}
to={path}
underline='hover'
>
<StyledSpan />
{text}
<ConditionallyRender
condition={showEnterpriseBadgeToPro}
show={
<StyledBadgeContainer>
<EnterpriseBadge />
</StyledBadgeContainer>
}
/>
</Link>
</StyledListItem>
);
};
export default NavigationLink;

View File

@ -1,122 +0,0 @@
import { Divider, Tooltip } from '@mui/material';
import { Menu, MenuItem, styled } from '@mui/material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import type { INavigationMenuItem } from 'interfaces/route';
import { Link } from 'react-router-dom';
import { EnterpriseBadge } from '../../../common/EnterpriseBadge/EnterpriseBadge';
import { useCallback } from 'react';
interface INavigationMenuProps {
options: INavigationMenuItem[];
id: string;
anchorEl: any;
handleClose: () => void;
style: Object;
}
const StyledLink = styled(Link)(({ theme }) => ({
textDecoration: 'none',
alignItems: 'center',
display: 'flex',
color: 'inherit',
height: '100%',
width: '100%',
'&&': {
// Override MenuItem's built-in padding.
padding: theme.spacing(1, 2),
},
}));
const StyledSpan = styled('span')(({ theme }) => ({
width: '12.5px',
height: '12.5px',
display: 'block',
backgroundColor: theme.palette.primary.main,
marginRight: theme.spacing(2),
borderRadius: '2px',
}));
const StyledBadgeContainer = styled('div')(({ theme }) => ({
marginLeft: 'auto',
paddingLeft: theme.spacing(2),
display: 'flex',
}));
export const NavigationMenu = ({
options,
id,
handleClose,
anchorEl,
style,
}: INavigationMenuProps) => {
const { isPro, isOss } = useUiConfig();
const showBadge = useCallback(
(mode?: INavigationMenuItem['menu']['mode']) => {
if (
isPro() &&
!mode?.includes('pro') &&
mode?.includes('enterprise')
) {
return true;
}
return false;
},
[isPro],
);
return (
<Menu
id={id}
onClose={handleClose}
anchorEl={anchorEl}
open={Boolean(anchorEl)}
style={style}
>
{options
.flatMap((option, i) => {
const previousGroup = options[i - 1]?.group;
const addDivider =
previousGroup &&
previousGroup !== option.group &&
(!isOss() || option.group === 'log');
return [
addDivider ? (
<Divider variant='middle' key={option.group} />
) : null,
<Tooltip
title={
showBadge(option?.menu?.mode)
? 'This is an Enterprise feature'
: ''
}
arrow
placement='left'
key={option.path}
>
<MenuItem
component={StyledLink}
to={option.path}
onClick={handleClose}
>
<StyledSpan />
{option.title}
<ConditionallyRender
condition={showBadge(option?.menu?.mode)}
show={
<StyledBadgeContainer>
<EnterpriseBadge />
</StyledBadgeContainer>
}
/>
</MenuItem>
</Tooltip>,
];
})
.filter(Boolean)}
</Menu>
);
};