diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js index 8d2108b23151f1cd44be16521935fefd408780a1..813086cbefdf57ba3c59c2783c13707c1f254e35 100644 --- a/src/components/SiderMenu/SiderMenu.js +++ b/src/components/SiderMenu/SiderMenu.js @@ -6,6 +6,20 @@ import styles from './index.less'; const { Sider } = Layout; const { SubMenu } = Menu; +// Allow menu.js config icon as string or ReactNode +// icon: 'setting', +// icon: 'http://demo.com/icon.png', +// icon: , +const getIcon = (icon) => { + if (typeof icon === 'string' && icon.indexOf('http') === 0) { + return icon; + } + if (typeof icon === 'string') { + return ; + } + return icon; +}; + export default class SiderMenu extends PureComponent { constructor(props) { super(props); @@ -84,7 +98,7 @@ export default class SiderMenu extends PureComponent { title={ item.icon ? ( - + {getIcon(item.icon)} {item.name} ) : item.name @@ -95,7 +109,7 @@ export default class SiderMenu extends PureComponent { ); } - const icon = item.icon && ; + const icon = getIcon(item.icon); return item.hideInMenu ? null : ( diff --git a/src/components/SiderMenu/index.less b/src/components/SiderMenu/index.less index 37c59cb55da6c5981bacfaf6e08c1993ed08a10e..ede5baf871e3b134a85f5b12759d12970b1a2323 100644 --- a/src/components/SiderMenu/index.less +++ b/src/components/SiderMenu/index.less @@ -23,12 +23,19 @@ font-weight: 600; } } + .sider { min-height: 100vh; box-shadow: 2px 0 6px rgba(0, 21, 41, .35); position: relative; z-index: 10; } + +.icon { + width: 14px; + margin-right: 10px; +} + :global { .drawer .drawer-content { background: #001529;