2018-08-06 22:16:36 +02:00
|
|
|
import React from 'react';
|
2021-03-30 15:14:02 +02:00
|
|
|
import { Divider, Drawer, List, Icon } from '@material-ui/core';
|
2018-08-06 22:16:36 +02:00
|
|
|
import { NavLink } from 'react-router-dom';
|
2021-03-30 15:14:02 +02:00
|
|
|
import classnames from 'classnames';
|
2019-10-26 22:05:38 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2021-03-30 15:14:02 +02:00
|
|
|
|
|
|
|
import styles from './drawer.module.scss';
|
2018-08-06 22:16:36 +02:00
|
|
|
|
|
|
|
import { baseRoutes as routes } from './routes';
|
|
|
|
|
2021-05-04 09:59:42 +02:00
|
|
|
import logo from '../../assets/img/logo.png';
|
|
|
|
|
2021-02-24 11:03:18 +01:00
|
|
|
const filterByFlags = flags => r => {
|
|
|
|
if (r.flag && !flags[r.flag]) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return true;
|
|
|
|
};
|
|
|
|
|
2019-10-26 22:05:38 +02:00
|
|
|
function getIcon(name) {
|
|
|
|
if (name === 'c_github') {
|
2021-05-04 09:59:42 +02:00
|
|
|
return (
|
|
|
|
<i
|
|
|
|
className={classnames(
|
|
|
|
'material-icons',
|
|
|
|
styles.navigationIcon,
|
|
|
|
styles.iconGitHub
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
);
|
2019-10-26 22:05:38 +02:00
|
|
|
} else {
|
2021-03-30 15:14:02 +02:00
|
|
|
return <Icon className={styles.navigationIcon}>{name}</Icon>;
|
2019-10-26 22:05:38 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-03-30 15:14:02 +02:00
|
|
|
function renderLink(link, toggleDrawer) {
|
2020-05-12 20:41:03 +02:00
|
|
|
if (link.path) {
|
|
|
|
return (
|
|
|
|
<NavLink
|
2021-03-30 15:14:02 +02:00
|
|
|
onClick={() => toggleDrawer()}
|
2020-05-12 20:41:03 +02:00
|
|
|
key={link.path}
|
|
|
|
to={link.path}
|
2021-03-30 15:14:02 +02:00
|
|
|
className={classnames(styles.navigationLink)}
|
|
|
|
activeClassName={classnames(styles.navigationLinkActive)}
|
2020-05-12 20:41:03 +02:00
|
|
|
>
|
|
|
|
{getIcon(link.icon)} {link.value}
|
|
|
|
</NavLink>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<a
|
|
|
|
href={link.href}
|
|
|
|
key={link.href}
|
|
|
|
target="_blank"
|
2021-03-30 15:14:02 +02:00
|
|
|
className={[styles.navigationLink].join(' ')}
|
2021-05-04 09:59:42 +02:00
|
|
|
title={link.title}
|
|
|
|
rel="noreferrer"
|
2020-05-12 20:41:03 +02:00
|
|
|
>
|
|
|
|
{getIcon(link.icon)} {link.value}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-04 09:59:42 +02:00
|
|
|
export const DrawerMenu = ({
|
|
|
|
links = [],
|
|
|
|
title = 'Unleash',
|
|
|
|
flags = {},
|
|
|
|
open = false,
|
|
|
|
toggleDrawer,
|
|
|
|
}) => (
|
|
|
|
<Drawer
|
|
|
|
className={styles.drawer}
|
|
|
|
open={open}
|
|
|
|
anchor={'left'}
|
|
|
|
onClose={() => toggleDrawer()}
|
|
|
|
>
|
2021-03-30 15:14:02 +02:00
|
|
|
<div className={styles.drawerContainer}>
|
|
|
|
<div className={styles.drawerTitleContainer}>
|
|
|
|
<span className={[styles.drawerTitle].join(' ')}>
|
2021-05-04 09:59:42 +02:00
|
|
|
<img
|
|
|
|
alt="Unleash Logo"
|
|
|
|
src={logo}
|
|
|
|
width="32"
|
|
|
|
height="32"
|
|
|
|
className={styles.drawerTitleLogo}
|
|
|
|
/>
|
2021-03-30 15:14:02 +02:00
|
|
|
<span className={styles.drawerTitleText}>{title}</span>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<List className={styles.drawerList}>
|
|
|
|
{routes.filter(filterByFlags(flags)).map(item => (
|
|
|
|
<NavLink
|
|
|
|
onClick={() => toggleDrawer()}
|
|
|
|
key={item.path}
|
|
|
|
to={item.path}
|
|
|
|
className={classnames(styles.navigationLink)}
|
2021-05-04 09:59:42 +02:00
|
|
|
activeClassName={classnames(
|
|
|
|
styles.navigationLinkActive
|
|
|
|
)}
|
2021-03-30 15:14:02 +02:00
|
|
|
>
|
|
|
|
{getIcon(item.icon)}
|
|
|
|
{item.title}
|
|
|
|
</NavLink>
|
|
|
|
))}
|
|
|
|
</List>
|
|
|
|
<Divider />
|
2021-05-04 09:59:42 +02:00
|
|
|
<List className={styles.navigation}>
|
|
|
|
{links.map(l => renderLink(l, toggleDrawer))}
|
|
|
|
</List>
|
2021-03-30 15:14:02 +02:00
|
|
|
</div>
|
2018-08-06 22:16:36 +02:00
|
|
|
</Drawer>
|
|
|
|
);
|
2019-10-26 22:05:38 +02:00
|
|
|
|
|
|
|
DrawerMenu.propTypes = {
|
|
|
|
links: PropTypes.array,
|
2020-10-05 21:51:45 +02:00
|
|
|
title: PropTypes.string,
|
2021-02-24 11:03:18 +01:00
|
|
|
flags: PropTypes.object,
|
2021-03-30 15:14:02 +02:00
|
|
|
open: PropTypes.bool,
|
|
|
|
toggleDrawer: PropTypes.func,
|
2019-10-26 22:05:38 +02:00
|
|
|
};
|