2018-08-06 22:16:36 +02:00
|
|
|
import React from 'react';
|
|
|
|
import { Drawer, Icon, Navigation } from 'react-mdl';
|
|
|
|
import { NavLink } from 'react-router-dom';
|
2019-10-26 22:05:38 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2018-08-06 22:16:36 +02:00
|
|
|
import styles from '../styles.scss';
|
|
|
|
|
|
|
|
import { baseRoutes as routes } from './routes';
|
|
|
|
|
2019-10-26 22:05:38 +02:00
|
|
|
function getIcon(name) {
|
|
|
|
if (name === 'c_github') {
|
|
|
|
return <i className={['material-icons', styles.navigationIcon, styles.iconGitHub].join(' ')} />;
|
|
|
|
} else {
|
|
|
|
return <Icon name={name} className={styles.navigationIcon} />;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-12 20:41:03 +02:00
|
|
|
function renderLink(link) {
|
|
|
|
if (link.path) {
|
|
|
|
return (
|
|
|
|
<NavLink
|
|
|
|
key={link.path}
|
|
|
|
to={link.path}
|
|
|
|
className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
|
|
|
|
activeClassName={[styles.navigationLink, 'mdl-color-text--black', 'mdl-color--blue-grey-100'].join(' ')}
|
|
|
|
>
|
|
|
|
{getIcon(link.icon)} {link.value}
|
|
|
|
</NavLink>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<a
|
|
|
|
href={link.href}
|
|
|
|
key={link.href}
|
|
|
|
target="_blank"
|
|
|
|
className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
|
|
|
|
title={link.title}
|
|
|
|
>
|
|
|
|
{getIcon(link.icon)} {link.value}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-05 21:51:45 +02:00
|
|
|
export const DrawerMenu = ({ links = [], title = 'Unleash' }) => (
|
|
|
|
<Drawer style={{ boxShadow: 'none', border: 0 }}>
|
2018-08-06 22:16:36 +02:00
|
|
|
<span className={[styles.drawerTitle, 'mdl-layout-title'].join(' ')}>
|
|
|
|
<img src="public/logo.png" width="32" height="32" className={styles.drawerTitleLogo} />
|
2020-10-05 21:51:45 +02:00
|
|
|
<span className={styles.drawerTitleText}>{title}</span>
|
2018-08-06 22:16:36 +02:00
|
|
|
</span>
|
|
|
|
<hr />
|
|
|
|
<Navigation className={styles.navigation}>
|
|
|
|
{routes.map(item => (
|
|
|
|
<NavLink
|
|
|
|
key={item.path}
|
|
|
|
to={item.path}
|
2019-03-11 21:10:45 +01:00
|
|
|
className={[styles.navigationLink, 'mdl-color-text--grey-900'].join(' ')}
|
2020-10-05 21:51:45 +02:00
|
|
|
activeClassName={[styles.navigationLink, 'mdl-color-text--black', 'mdl-color--blue-grey-50'].join(
|
2019-03-06 19:27:58 +01:00
|
|
|
' '
|
|
|
|
)}
|
2018-08-06 22:16:36 +02:00
|
|
|
>
|
|
|
|
<Icon name={item.icon} className={styles.navigationIcon} /> {item.title}
|
|
|
|
</NavLink>
|
|
|
|
))}
|
|
|
|
</Navigation>
|
|
|
|
<hr />
|
2020-05-12 20:41:03 +02:00
|
|
|
<Navigation className={styles.navigation}>{links.map(renderLink)}</Navigation>
|
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,
|
2019-10-26 22:05:38 +02:00
|
|
|
};
|