modificaions to the leve side navigation and new sessions page

jam-ui/src/components/navbar/NavbarVerticalMenu.js

@@ -7,22 +7,22 @@ import NavbarVerticalMenuItem from './NavbarVerticalMenuItem';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const NavbarVerticalMenu = ({ routes, location }) => {
-  const [openedIndex, setOpenedIndex] = useState(null);
   const { setShowBurgerMenu } = useContext(AppContext);
+  const [ navRoutes, setNavRoutes ] = useState([])
 
   useEffect(() => {
-    let openedDropdown = null;
+    let navs = []
     routes.forEach((route, index) => {
-      if (location.pathname.indexOf(route.to) === 0) openedDropdown = index;
+      navs.push({ ...route, isOpened: true, index })
     });
-
-    setOpenedIndex(openedDropdown);
-    // eslint-disable-next-line
+    setNavRoutes(navs)
   }, []);
 
-  const toggleOpened = (e, index) => {
+  const toggleOpened = (e, route) => {
     e.preventDefault();
-    return setOpenedIndex(openedIndex === index ? null : index);
+    const clickedNav = navRoutes.find(r => r.index === route.index)
+    const toggled = {...clickedNav, isOpened: !route.isOpened}
+    setNavRoutes(prev => prev.map(navRoute => navRoute.index === toggled.index ? toggled : navRoute))
   };
 
   const getHr = name => {
@@ -35,31 +35,32 @@ const NavbarVerticalMenu = ({ routes, location }) => {
     }
   };
 
-  return routes.map((route, index) => {
+  return navRoutes.map((route) => {
+    const { isOpened, ...routeRest } = route; //remove isOpened attribute from the route abject
     if (!route.children) {
       return (
-        <Fragment key={index}>
+        <Fragment key={route.index}>
           {getHr(route.name)}
           <NavItem>
-            <NavLink className="nav-link" {...route} onClick={() => setShowBurgerMenu(false)}>
-              <NavbarVerticalMenuItem route={route} />
+            <NavLink className="nav-link" {...routeRest} onClick={() => setShowBurgerMenu(false)}>
+              <NavbarVerticalMenuItem route={routeRest} />
             </NavLink>
           </NavItem>
         </Fragment>
       );
     }
     return (
-      <Fragment key={index}>
+      <Fragment key={route.index}>
         {getHr(route.name)}
         <NavItem>
           <BootstrapNavLink
-            onClick={e => toggleOpened(e, index)}
+            onClick={e => toggleOpened(e, route)}
             className="dropdown-indicator cursor-pointer"
-            aria-expanded={openedIndex === index}
+            aria-expanded={route.isOpened}
           >
-            <NavbarVerticalMenuItem route={route} />
+            <NavbarVerticalMenuItem route={routeRest} />
           </BootstrapNavLink>
-          <Collapse isOpen={openedIndex === index}>
+          <Collapse isOpen={route.isOpened}>
             <Nav>
               <NavbarVerticalMenu routes={route.children} location={location} />
             </Nav>

jam-ui/src/components/page/JKNewMusicSession.js

@@ -119,7 +119,9 @@ const JKNewMusicSession = () => {
                     <JKTooltip title={t('new.invitations_help', { ns: 'sessions' })} />
                   </Label>
                   <JKFriendsAutoComplete friends={friends} onSelect={handleOnSelect} />
-                  <JKSessionInviteesChips invitees={invitees} removeInvitee={removeInvitee} />
+                  { invitees.length > 0 && 
+                    <JKSessionInviteesChips invitees={invitees} removeInvitee={removeInvitee} />
+                  }
                 </FormGroup>
 
                 <FormGroup className="mb-3">

jam-ui/src/helpers/initFA.js

@@ -153,7 +153,10 @@ import {
   faUserPlus,
   faUsers,
   faVideo,
-  faCross
+  faCross,
+  faMusic,
+  faRecordVinyl,
+  faAddressCard
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -273,6 +276,9 @@ library.add(
   faCalendarCheck,
   faMapMarkerAlt,
   faCross,
+  faMusic,
+  faRecordVinyl,
+  faAddressCard,
 
   // Brand
   faFacebook,
@@ -313,5 +319,5 @@ library.add(
   farSmileBeam,
   farCircle,
   farCopy,
-  farComment
+  farComment,
 );

jam-ui/src/routes.js

@@ -12,26 +12,66 @@ export const friendsRoute = {
   to: '/friends',
   exact: true,
   icon: 'users',
+  children: [
+    { to: '/friends', name: 'My friends' },
+    { to: '/friends/find', name: 'Find Friends' }
+  ]
 }
 
 export const musicSessionRoutes = {
   name: 'Sessions',
   to: '/sessions',
   exact: true,
-  icon: 'stream',
+  icon: 'music',
   children: [
     { to: '/sessions/new', name: 'Create Session' },
-    { to: '/sessions', name: 'Browse Sessions' },
-    { to: '/sessions/lobby', name: 'Lobby' },
-    { to: '/sessions/history', name: 'Session History' },
+    { to: '/sessions', name: 'Browse Current Sessions' },
+    { to: '/sessions/history', name: 'View Session History' },
   ]
 }
 
-export const helpRoute = {
+export const jamTrackRoutes = {
+  name: 'JamTracks',
+  to: '/jamtracks',
+  exact: true,
+  icon: 'record-vinyl',
+  children: [
+    { to: '/jamtracks', name: 'My JamTracks'},
+    { to: '/jamtracks/search', name: 'Search JamTracks'},
+  ]
+}
+
+export const profileRoute = {
+  name: 'Profile',
+  to: '/profile',
+  exact: true,
+  icon: 'user',
+}
+
+export const accountRoutes = {
+  name: 'Account',
+  to: '/account',
+  exact: true,
+  icon: 'lock',
+  children: [
+    { to: '/account/subscription', name: 'Subscription'},
+    { to: '/account/payments', name: 'Payments'},
+    { to: '/account/identity', name: 'Identity'},
+    { to: '/account/affiliate', name: 'Affiliate'}
+  ]
+}
+
+export const helpRoutes = {
   name: 'Help',
   to: '/help',
   exact: true,
-  icon: 'question-circle'
+  icon: 'question-circle',
+  children: [
+    { to: '/knowladge', name: 'Knowladge Base' },
+    { to: '/helpdesk', name: 'Help Desk'},
+    { to: '/forum', name: 'Forum'}
+
+  ]
 }
 
 export const legacyRoute = {
@@ -359,9 +399,12 @@ export const utilityRoutes = {
 
 export default [
   homeRoute,
-  friendsRoute,
   musicSessionRoutes,
-  helpRoute,
+  friendsRoute,
+  jamTrackRoutes,
+  profileRoute,
+  accountRoutes,
+  helpRoutes,
   //legacyRoute,
   //homeRoutes,
   //pageRoutes,