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:
parent
5ef33b56d6
commit
d406420223
@ -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>;
|
||||
};
|
@ -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>
|
||||
);
|
||||
};
|
@ -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;
|
||||
|
@ -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;
|
@ -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>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user