import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import { IconSVG, prefixClasses as prefix } from 'react-lds';

const PageNavigationMenu = ({ to, children, title }, { cssPrefix, router }) => {
  const isActive = router.isActive(to, false);
  const classes = isActive ? 'list__name site-states-parent slds-is-open slds-is-selected' : 'list__name';
  const icon = children ?
    <IconSVG
      className={prefix(cssPrefix, ['align-middle', 'col--bump-left', 'icon-text-default'], 'icon__svg')}
      sprite="utility"
      icon="down"
      size="x-small"
    /> :
    '';

  return (
    <li className={classes}>
      <Link to={to}>{title} {icon}</Link>
      <ul className="site-states slds-list--vertical">
        {children}
      </ul>
    </li>
  );
};

PageNavigationMenu.propTypes = {
  title: PropTypes.string,
  /**
   * Instances of PageNavigationElement
   */
  children: PropTypes.node,
  to: PropTypes.string,
};

PageNavigationMenu.contextTypes = {
  cssPrefix: PropTypes.string,
  router: PropTypes.object,
};

export default PageNavigationMenu;

@@ -113,33 +113,8 @@
 nSVG
-, prefixClasses as prefix
  %7D f
@@ -189,19 +189,8 @@
 %7D, %7B
- cssPrefix,
  rou
@@ -385,16 +385,17 @@
 n ?%0A    
+(
 %3CIconSVG
@@ -415,29 +415,14 @@
 ame=
-%7Bprefix(cssPrefix, %5B'
+%22slds-
 alig
@@ -429,20 +429,22 @@
 n-middle
-', '
+ slds-
 col--bum
@@ -453,12 +453,14 @@
 left
-', '
+ slds-
 icon
@@ -476,13 +476,14 @@
 ault
-'%5D, '
+ slds-
 icon
@@ -491,11 +491,9 @@
 _svg
-')%7D
+%22
 %0A   
@@ -557,16 +557,17 @@
 %22%0A    /%3E
+)
  :%0A    '

Remove left-over cssprefix functions