import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
import classNames from 'classnames';
import NavItem from '../navItem/navItem';
import styles from './navDropdown.css';

function NavDropdown(props) {
  const classes = classNames({
    [`${styles.child}`]: true,
    [`${styles.opaque}`]: !(props.location.pathname === '/')
  });

  return (
    <div className={styles.parent}>
      <NavItem text={`${props.text} ${''} ▾`} />
      <ul className={styles.content}>
        {props.children.map(v => (
          <li key={v.props.text} className={classes}>
            {v}
          </li>
        ))}
      </ul>
    </div>
  );
}

NavDropdown.propTypes = {
  /* eslint-disable react/forbid-prop-types */
  children: PropTypes.arrayOf(PropTypes.object).isRequired,
  text: PropTypes.string.isRequired,
  location: PropTypes.object.isRequired
  /* eslint-disable react/forbid-prop-types */
};

export default withRouter(NavDropdown);

@@ -103,45 +103,8 @@
 r';%0A
-import classNames from 'classnames';%0A
 impo
@@ -186,16 +186,13 @@
 ';%0A%0A
-function
+class
  Nav
@@ -203,159 +203,681 @@
 down
-(props) %7B%0A  const classes = classNames(
+ extends React.Component %7B%0A  constructor(props) %7B%0A    super(props);%0A    this.state = 
 %7B%0A    
+ 
-%5B%60$%7Bstyles.child%7D%60%5D: true,%0A    %5B%60$%7Bstyles.opaque%7D%60%5D: !(props.location.pathname === '/')%0A  %7D);%0A%0A  return (%0A
+ isDesktopScreenSize: true,%0A    %7D;%0A    this.updateWindowSize = this.updateWindowSize.bind(this);%0A  %7D%0A%0A  componentDidMount() %7B%0A    this.updateWindowSize();%0A    window.addEventListener('resize', this.updateWindowSize);%0A  %7D%0A%0A  componentWillUnmount() %7B%0A    window.removeEventListener('resize', this.updateWindowSize);%0A  %7D%0A%0A  updateWindowSize() %7B%0A    this.setState(%7B isDekstopScreenSize: window.innerWidth %3E 779 %7D);%0A  %7D%0A%0A  // TODO: Utilize isDesktopScreenSize to render just the children so that the sideNav renders things properly without CSS Media Queries%0A  render() %7B%0A    return (%0A  
     
@@ -914,16 +914,18 @@
 %3E%0A      
+  
 %3CNavItem
@@ -934,16 +934,21 @@
 ext=%7B%60$%7B
+this.
 props.te
@@ -970,16 +970,18 @@
 %3E%0A      
+  
 %3Cul clas
@@ -1012,17 +1012,24 @@
         
-%7B
+  %7Bthis.
 props.ch
@@ -1046,16 +1046,18 @@
 (v =%3E (%0A
+  
         
@@ -1096,18 +1096,25 @@
 me=%7B
-classes
+styles.child
 %7D%3E%0A
+  
     
@@ -1135,16 +1135,18 @@
         
+  
 %3C/li%3E%0A  
@@ -1155,12 +1155,16 @@
     
+ 
+ 
 ))%7D%0A
+  
     
@@ -1171,16 +1171,18 @@
   %3C/ul%3E%0A
+  
     %3C/di
@@ -1186,18 +1186,24 @@
 /div%3E%0A  
-);
+  );%0A  %7D
 %0A%7D%0A%0ANavD
@@ -1235,32 +1235,37 @@
 * eslint-disable
+-rule
  react/forbid-pr
@@ -1379,89 +1379,30 @@
 ,%0A  
-location: PropTypes.object.isRequired%0A  /* eslint-disable react/forbid-prop-types
+/* eslint-disable-rule
  */%0A

Change component to class for state (see full msg)