1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
unleash.unleash/frontend/src/component/admin/menu/AdminMenu.tsx
andreas-unleash b74b2bf070
Improve tabs UI on smaller devices (#2014)
* Improve tabs UI on smaller devices

* Improve tabs UI on smaller devices

* bug fix

* add proper scrollable tabs

* removed centered from Tabs (conflicts with scrollable)

* PR comments
2022-09-06 15:32:42 +03:00

159 lines
5.2 KiB
TypeScript

import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { Paper, Tab, Tabs, Theme } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
import { useTheme } from '@mui/material/styles';
const createNavLinkStyle = (props: {
isActive: boolean;
theme: Theme;
}): React.CSSProperties => {
const navLinkStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
textDecoration: 'none',
color: 'inherit',
padding: props.theme.spacing(1.5, 3),
};
const activeNavLinkStyle: React.CSSProperties = {
fontWeight: 'bold',
borderRadius: '3px',
padding: props.theme.spacing(1.5, 3),
};
return props.isActive
? { ...navLinkStyle, ...activeNavLinkStyle }
: navLinkStyle;
};
function AdminMenu() {
const { uiConfig } = useUiConfig();
const theme = useTheme();
const { pathname } = useLocation();
const { isBilling } = useInstanceStatus();
const { flags } = uiConfig;
return (
<Paper
style={{
marginBottom: '1rem',
borderRadius: '12.5px',
boxShadow: 'none',
}}
>
<Tabs
value={pathname}
variant="scrollable"
scrollButtons="auto"
allowScrollButtonsMobile
>
<Tab
value="/admin/users"
label={
<NavLink
to="/admin/users"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<span>Users</span>
</NavLink>
}
/>
{flags.UG && (
<Tab
value="/admin/groups"
label={
<NavLink
to="/admin/groups"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<span>Groups</span>
</NavLink>
}
/>
)}
{flags.RE && (
<Tab
value="/admin/roles"
label={
<NavLink
to="/admin/roles"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<span>Project roles</span>
</NavLink>
}
/>
)}
<Tab
value="/admin/api"
label={
<NavLink
to="/admin/api"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
API access
</NavLink>
}
/>
{uiConfig.flags.embedProxyFrontend && (
<Tab
value="/admin/cors"
label={
<NavLink
to="/admin/cors"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
CORS origins
</NavLink>
}
/>
)}
<Tab
value="/admin/auth"
label={
<NavLink
to="/admin/auth"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
Single sign-on
</NavLink>
}
/>
{isBilling && (
<Tab
value="/admin/billing"
label={
<NavLink
to="/admin/billing"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
Billing
</NavLink>
}
/>
)}
</Tabs>
</Paper>
);
}
export default AdminMenu;