fix profile page and registration page issues

src/components/MenuItem/MenuItem.jsx

@@ -1,8 +1,11 @@
-import { NavLink } from 'react-router-dom'
+import { NavLink, withRouter } from 'react-router-dom'
 import React from 'react'
+import { some } from 'lodash'
 import PT from 'prop-types'
 import cn from 'classnames'
 import NotificationBadge from '../NotificationBadge/NotificationBadge'
+import ArrowUpIcon from '../../assets/icons/arrows-16px-1_minimal-up.svg'
+
 
 import styles from './MenuItem.scss'
 
@@ -14,28 +17,76 @@ const MenuItem = ({
   exact,
   isActive,
   count,
-}) => (
-  <li>
-    <NavLink
-      to={to}
-      className={styles.navItem}
-      activeClassName={styles.active}
-      exact={exact}
-      isActive={isActive}
+  children,
+  isAccordionOpen,
+  onAccordionToggle,
+  match,
+  wrapperClass
+}) => {
+  const matchedPath = match && match.path
+  const isChildActive = children && some(children, c => c.to === matchedPath)
+
+  return (
+    <li className={
+      cn(wrapperClass,
+        styles.menuItem,
+        { [styles.open]: isAccordionOpen, [styles.withChildren]: children })}
     >
-      <span styleName="left">
-        {!!Icon && <Icon className={cn(styles.icon, styles[iconClassName])} />}
-        {label}
-      </span>
-      <span styleName="right">
-        {!!count && <NotificationBadge count={count} />}
-      </span>
-    </NavLink>
-  </li>
-)
+      {!children && (
+        <NavLink
+          to={to}
+          className={styles.navItem}
+          activeClassName={styles.active}
+          exact={exact}
+          isActive={isActive}
+        >
+          <span styleName="left">
+            {!!Icon && (
+              <Icon className={cn(styles.icon, styles[iconClassName])} />
+            )}
+            {label}
+          </span>
+          <span styleName="right">
+            {!!count && <NotificationBadge count={count} />}
+          </span>
+        </NavLink>
+      )}
+
+      {children && (
+        <div>
+          <div
+            className={cn(styles.navItem, {
+              [styles.activeParent]: isChildActive,
+              [styles.active]: isChildActive
+            })}
+            onClick={() => onAccordionToggle(!isAccordionOpen)}
+          >
+            <span styleName="left">
+              {!!Icon && (
+                <Icon className={cn(styles.icon, styles[iconClassName])} />
+              )}
+              {label}
+            </span>
+            <span styleName="right">
+              {!!count && <NotificationBadge count={count} />}
+            </span>
+
+            <ArrowUpIcon className={styles.arrowUpIcon} />
+          </div>
+
+          {isAccordionOpen &&
+            <ul>
+              { children.map(c => <MenuItem {...c} key={c.to} wrapperClass={styles.childNavItem} />) }
+            </ul>
+          }
+        </div>
+      )}
+    </li>
+  )
+}
 
 MenuItem.defaultProps = {
-  exact: true,
+  exact: true
 }
 
 MenuItem.propTypes = {
@@ -46,6 +97,10 @@ MenuItem.propTypes = {
   exact: PT.bool,
   isActive: PT.func,
   count: PT.number,
+  children: PT.array,
+  isAccordionOpen: PT.bool,
+  onAccordionToggle: PT.func,
+  wrapperClass: PT.string
 }
 
-export default MenuItem
+export default withRouter(MenuItem)

src/components/MenuItem/MenuItem.scss

@@ -1,5 +1,29 @@
 @import "../../styles/includes";
 
+.menuItem.withChildren {
+  .arrowUpIcon {
+    transform: rotate(180deg);
+    opacity: 0.6;
+    height: 10px;
+  }
+
+  &.open .arrowUpIcon {
+    transform: rotate(0deg);
+  }
+
+  &.open > div > .navItem {
+    box-shadow: 0 4px 4px -4px #777;
+    position: relative;
+    z-index: 1;
+  }
+
+  &.open+li {
+    box-shadow: 0 -4px 4px -4px #777;
+    position: relative;
+    z-index: 1;
+  }
+}
+
 .navItem {
   @include roboto;
 
@@ -10,6 +34,7 @@
   margin-right: -1px;
   position: relative;
   font-size: 14px;
+  cursor: pointer;
 
   &,
   &:avtive,
@@ -19,6 +44,13 @@
   }
 }
 
+.childNavItem {
+  a {
+    padding-left: 40px;
+    font-size: 12px;
+  }
+}
+
 .left,
 .right {
   display: flex;
@@ -48,7 +80,11 @@
   fill: #0AB88A;
 }
 
-.active {
+.arrowUpIcon {
+  float: right;
+}
+
+.active:not(.activeParent) {
   @include roboto-bold;
   background-color: $tc-gray-neutral-dark;
   color: $tc-gray-90;

src/components/MenuList/MenuList.jsx

@@ -5,11 +5,11 @@ import MenuItem from '../MenuItem/MenuItem'
 
 import styles from './MenuList.scss'
 
-const MenuList = ({ navLinks }) => (
+const MenuList = ({ navLinks, onAccordionToggle }) => (
   <nav className={styles.container}>
     <ul>
       {!!navLinks &&
-        navLinks.map((link, i) => <MenuItem key={i} {...link} />)}
+        navLinks.map((link, i) => <MenuItem key={i} {...link} onAccordionToggle={(open) => onAccordionToggle(i, open)} />)}
     </ul>
   </nav>
 )
@@ -23,7 +23,8 @@ MenuList.propTypes = {
       exact: PT.bool,
       isActive: PT.func
     })
-  )
+  ),
+  onAccordionToggle: PT.func.isRequired
 }
 
 export default MenuList

src/components/UserSidebar/UserSidebar.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import update from 'react-addons-update'
+import { findIndex, some } from 'lodash'
+import { withRouter } from 'react-router-dom'
+
 import UserSummary from '../UserSummary/UserSummary'
 import MenuList from '../MenuList/MenuList'
 import NotificationsIcon from '../../assets/icons/ui-bell.svg'
@@ -21,40 +25,93 @@ const navLinks = [{
   to: '/settings/profile',
   Icon: MyProfileIcon,
   iconClassName: 'fill',
-}, {
-  label: 'NOTIFICATION SETTINGS',
-  to: '/settings/notifications',
-  Icon: NotificationSettingsIcon,
-  iconClassName: 'fill',
-}, {
-  label: 'ACCOUNT & SECURITY',
-  to: '/settings/account',
-  Icon: AccountSecurityIcon,
-  iconClassName: 'fill',
+  children: [
+    {
+      label: 'PROFILE INFORMATION',
+      to: '/settings/profile',
+      Icon: MyProfileIcon,
+      iconClassName: 'fill',
+    },
+    {
+      label: 'NOTIFICATION SETTINGS',
+      to: '/settings/notifications',
+      Icon: NotificationSettingsIcon,
+      iconClassName: 'fill',
+    }, {
+      label: 'ACCOUNT & SECURITY',
+      to: '/settings/account',
+      Icon: AccountSecurityIcon,
+      iconClassName: 'fill',
+    }
+  ]
 }, {
   label: 'NOTIFICATIONS',
   to: '/notifications',
   Icon: NotificationsIcon,
   iconClassName: 'fill',
 }]
 
-const UserSidebar = ({user}) => {
-  return (
-    <div styleName="container">
-      <div className="sideAreaWrapper">
-        <UserSummary user={user}/>
-        <hr styleName="separator"/>
-        <div styleName="section-title">
-          SYSTEM
+class UserSidebar extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      navLinks
+    }
+  }
+
+  componentDidMount() {
+    this.initAccordion()
+  }
+
+  initAccordion() {
+    const {match} = this.props
+    const {navLinks} = this.state
+
+    const matchedPath = match && match.path
+    const activeNavIndex = findIndex(navLinks, nav => nav.children && some(nav.children, c => c.to === matchedPath))
+
+    if (activeNavIndex >= 0) {
+      this.setAccordionOpen(activeNavIndex, true)
+    }
+  }
+
+  setAccordionOpen(i, open) {
+    const { navLinks } = this.state
+    const updatedNavLinks = update(navLinks, {
+      [i]: {
+        $set: {
+          ...navLinks[i],
+          isAccordionOpen: open
+        }
+      }
+    })
+
+    this.setState({
+      navLinks: updatedNavLinks
+    })
+  }
+
+  render() {
+    const {user} = this.props
+    const {navLinks} = this.state
+
+    return (
+      <div styleName="container">
+        <div className="sideAreaWrapper">
+          <UserSummary user={user}/>
+          <hr styleName="separator"/>
+          <div styleName="section-title">
+            SYSTEM
+          </div>
+          <MenuList navLinks={navLinks} onAccordionToggle={(i, open) => this.setAccordionOpen(i, open)} />
         </div>
-        <MenuList navLinks={navLinks}/>
       </div>
-    </div>
-  )
+    )
+  }
 }
 
 UserSidebar.propTypes = {
   user: PropTypes.object.isRequired
 }
 
-export default UserSidebar
+export default withRouter(UserSidebar)