8facbb9d6e
* change(ui): route refactor * change(ui): new navigation * change(ui): new navigation - icons and other fixes
103 lines
4.1 KiB
TypeScript
103 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import { Divider, Menu, Typography } from 'antd';
|
|
import SVG from 'UI/SVG';
|
|
import * as routes from 'App/routes';
|
|
import { client, CLIENT_DEFAULT_TAB, CLIENT_TABS, withSiteId } from 'App/routes';
|
|
import { RouteComponentProps, withRouter } from 'react-router-dom';
|
|
import { categories, MENU, preferences, PREFERENCES_MENU } from './data';
|
|
|
|
const { Text } = Typography;
|
|
|
|
|
|
interface Props {
|
|
siteId?: string;
|
|
}
|
|
|
|
|
|
function SideMenu(props: RouteComponentProps<Props>) {
|
|
// @ts-ignore
|
|
const { siteId } = props;
|
|
const isPreferencesActive = props.location.pathname.includes('/client/');
|
|
|
|
const menuRoutes: any = {
|
|
exit: () => props.history.push(withSiteId(routes.sessions(), siteId)),
|
|
[MENU.SESSIONS]: () => withSiteId(routes.sessions(), siteId),
|
|
[MENU.BOOKMARKS]: () => withSiteId(routes.bookmarks(), siteId),
|
|
[MENU.NOTES]: () => withSiteId(routes.notes(), siteId),
|
|
[MENU.LIVE_SESSIONS]: () => withSiteId(routes.assist(), siteId),
|
|
[MENU.RECORDINGS]: () => withSiteId(routes.recordings(), siteId),
|
|
[MENU.DASHBOARDS]: () => withSiteId(routes.dashboard(), siteId),
|
|
[MENU.CARDS]: () => withSiteId(routes.metrics(), siteId),
|
|
[MENU.ALERTS]: () => withSiteId(routes.alerts(), siteId),
|
|
[MENU.FEATURE_FLAGS]: () => withSiteId(routes.fflags(), siteId),
|
|
[MENU.PREFERENCES]: () => client(CLIENT_DEFAULT_TAB),
|
|
[PREFERENCES_MENU.ACCOUNT]: () => client(CLIENT_TABS.PROFILE),
|
|
[PREFERENCES_MENU.SESSION_LISTING]: () => client(CLIENT_TABS.SESSIONS_LISTING),
|
|
[PREFERENCES_MENU.INTEGRATIONS]: () => client(CLIENT_TABS.INTEGRATIONS),
|
|
[PREFERENCES_MENU.METADATA]: () => client(CLIENT_TABS.CUSTOM_FIELDS),
|
|
[PREFERENCES_MENU.WEBHOOKS]: () => client(CLIENT_TABS.WEBHOOKS),
|
|
[PREFERENCES_MENU.PROJECTS]: () => client(CLIENT_TABS.SITES),
|
|
[PREFERENCES_MENU.ROLES_ACCESS]: () => client(CLIENT_TABS.MANAGE_ROLES),
|
|
[PREFERENCES_MENU.AUDIT]: () => client(CLIENT_TABS.AUDIT),
|
|
[PREFERENCES_MENU.TEAM]: () => client(CLIENT_TABS.MANAGE_USERS),
|
|
[PREFERENCES_MENU.NOTIFICATIONS]: () => client(CLIENT_TABS.NOTIFICATIONS),
|
|
[PREFERENCES_MENU.BILLING]: () => client(CLIENT_TABS.BILLING),
|
|
};
|
|
|
|
const handleClick = (item: any) => {
|
|
const handler = menuRoutes[item.key];
|
|
if (handler) {
|
|
const route = handler();
|
|
pushTo(route);
|
|
}
|
|
};
|
|
|
|
const isMenuItemActive = (key: string) => {
|
|
const { pathname } = props.location;
|
|
const activeRoute = menuRoutes[key];
|
|
if (activeRoute) {
|
|
const route = activeRoute();
|
|
return pathname.startsWith(route);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
|
|
const pushTo = (path: string) => {
|
|
props.history.push(path);
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
<Menu defaultSelectedKeys={['1']} mode='inline' onClick={handleClick}
|
|
style={{ backgroundColor: '#f6f6f6', border: 'none' }}>
|
|
{isPreferencesActive && <Menu.Item key='exit' icon={<SVG name='arrow-bar-left' />}>
|
|
<Text className='ml-2'>Exit</Text>
|
|
</Menu.Item>}
|
|
{(isPreferencesActive ? preferences : categories).map((category, index) => (
|
|
<React.Fragment key={category.key}>
|
|
{index > 0 && <Divider style={{ margin: '6px 0' }} />}
|
|
<Menu.ItemGroup key={category.key}
|
|
title={<Text className='uppercase text-sm' type='secondary'>{category.title}</Text>}>
|
|
{category.items.map((item) => item.children ? (
|
|
<Menu.SubMenu key={item.key} title={<Text className='ml-2'>{item.label}</Text>}
|
|
icon={<SVG name={item.icon} size={16} />}>
|
|
{item.children.map((child) => <Menu.Item key={child.key}>{child.label}</Menu.Item>)}
|
|
</Menu.SubMenu>
|
|
) : (
|
|
<Menu.Item key={item.key} icon={<SVG name={item.icon} size={16} />}
|
|
style={{ color: '#333' }}
|
|
className={isMenuItemActive(item.key) ? 'ant-menu-item-selected bg-active-blue color-teal' : ''}>
|
|
<Text className='ml-2'>{item.label}</Text>
|
|
</Menu.Item>
|
|
))}
|
|
</Menu.ItemGroup>
|
|
</React.Fragment>
|
|
))}
|
|
</Menu>
|
|
);
|
|
}
|
|
|
|
export default withRouter(SideMenu);
|