From cb929e3957bc704068b98e3f84b7caa9d40f45e4 Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Mon, 24 May 2021 00:32:14 +0400 Subject: [PATCH 1/2] added item to nav --- server.js | 2 +- src/assets/images/create-team-green.svg | 15 ++ src/assets/images/create-team.svg | 15 ++ src/components/Menu/index.jsx | 34 ++-- src/constants/apps.js | 238 ++++++++++++------------ 5 files changed, 176 insertions(+), 128 deletions(-) create mode 100644 src/assets/images/create-team-green.svg create mode 100644 src/assets/images/create-team.svg diff --git a/server.js b/server.js index 30eb854..c293c19 100644 --- a/server.js +++ b/server.js @@ -20,6 +20,6 @@ app.get('/', function (req, res) { res.send('alive') }) -const PORT = process.env.PORT || 3001; +const PORT = process.env.PORT || 3002; app.listen(PORT, '0.0.0.0'); console.log(`App is hosted on port ${PORT}.`); // eslint-disable-line no-console diff --git a/src/assets/images/create-team-green.svg b/src/assets/images/create-team-green.svg new file mode 100644 index 0000000..abab467 --- /dev/null +++ b/src/assets/images/create-team-green.svg @@ -0,0 +1,15 @@ + + + 08E95137-2037-4B8F-91FD-731B926A951E + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/create-team.svg b/src/assets/images/create-team.svg new file mode 100644 index 0000000..38dd31f --- /dev/null +++ b/src/assets/images/create-team.svg @@ -0,0 +1,15 @@ + + + 08E95137-2037-4B8F-91FD-731B926A951E + + + + + + + + + + + + diff --git a/src/components/Menu/index.jsx b/src/components/Menu/index.jsx index 96f75d3..f0ac045 100644 --- a/src/components/Menu/index.jsx +++ b/src/components/Menu/index.jsx @@ -3,18 +3,18 @@ * * General component to show menu with submenu. */ -import React, { Fragment, useCallback, useState } from "react"; -import { useLocation } from "@reach/router"; -import cn from "classnames"; -import { includes, map } from "lodash"; -import NavLink from "../NavLink"; -import "./styles.css"; +import React, { Fragment, useCallback, useState } from 'react'; +import { useLocation } from '@reach/router'; +import cn from 'classnames'; +import { includes, map } from 'lodash'; +import NavLink from '../NavLink'; +import './styles.css'; const SubMenu = ({ option }) => { const location = useLocation(); const [isOpen, setIsOpen] = useState( - includes(map(option.children, "path"), location.pathname) + includes(map(option.children, 'path'), location.pathname) ); const toggleOpen = useCallback(() => { @@ -24,8 +24,8 @@ const SubMenu = ({ option }) => { return ( <> { to={subOption.path} activeClassName="menu-link-active" className="menu-link" + exact > {subOption.title} @@ -62,10 +63,19 @@ const Menu = ({ options, sidebarCollapsed }) => ( to={option.path} activeClassName="menu-link-active" className="menu-link" + exact > - Subroute Icon - Subroute Icon - {!sidebarCollapsed ? option.title : ''} + Subroute Icon + Subroute Icon + {!sidebarCollapsed ? option.title : ''} ) : ( diff --git a/src/constants/apps.js b/src/constants/apps.js index d56af2d..3f09313 100644 --- a/src/constants/apps.js +++ b/src/constants/apps.js @@ -1,224 +1,232 @@ /** * Config for the All Apps menu. */ -import appReactIcon from "../assets/images/reactjs.svg"; -import appAngularIcon from "../assets/images/angularjs.svg"; -import appTaasIcon from "../assets/images/integrations.svg"; +import appReactIcon from '../assets/images/reactjs.svg'; +import appAngularIcon from '../assets/images/angularjs.svg'; +import appTaasIcon from '../assets/images/integrations.svg'; const appSubmissionReviewIcon = appTaasIcon; -import manageWorkIcon from "../assets/images/managework.svg"; -import ondemandTalentIcon from "../assets/images/ondemand-talent.svg"; -import myOrganizationIcon from "../assets/images/my-organization.svg"; +import manageWorkIcon from '../assets/images/managework.svg'; +import ondemandTalentIcon from '../assets/images/ondemand-talent.svg'; +import myOrganizationIcon from '../assets/images/my-organization.svg'; const integrationsIcon = appTaasIcon; const customerplatformIcon = manageWorkIcon; const workmanagerIcon = ondemandTalentIcon; -import learnIcon from "../assets/images/learn.svg"; -import earnIcon from "../assets/images/earn.svg"; -import homeIcon from "../assets/images/home.svg"; -import homeGreenIcon from "../assets/images/home-green.svg"; -import projectsIcon from "../assets/images/projects.svg"; -import projectsGreenIcon from "../assets/images/projects-green.svg"; -import crowdsourceIcon from "../assets/images/crowdsource.svg"; -import crowdsourceGreenIcon from "../assets/images/crowdsource-green.svg"; -import myteamsIcon from "../assets/images/my-teams.svg"; -import myteamsGreenIcon from "../assets/images/my-teams-green.svg"; -import skillSearchIcon from "../assets/images/skill-search.svg"; -import skillSearchGreenIcon from "../assets/images/skill-search-green.svg"; -import organizationSettingsIcon from "../assets/images/organization-settings.svg"; -import organizationSettingsGreenIcon from "../assets/images/organization-settings-green.svg"; -import integrationsPluginIcon from "../assets/images/integrations-plugins.svg"; -import integrationsPluginGreenIcon from "../assets/images/integrations-plugins-green.svg"; -import apisIcon from "../assets/images/apis.svg"; -import apisGreenIcon from "../assets/images/apis-green.svg"; -import myWorkIcon from "../assets/images/my-work.svg"; -import myWorkGreenIcon from "../assets/images/my-work-green.svg"; -import findWorkIcon from "../assets/images/find-work.svg"; -import findWorkGreenIcon from "../assets/images/find-work-green.svg"; -import thriveIcon from "../assets/images/thrive.svg"; -import thriveGreenIcon from "../assets/images/thrive-green.svg"; -import skillBuilderIcon from "../assets/images/skill-builder.svg"; -import skillBuilderGreenIcon from "../assets/images/skill-builder-green.svg"; -import reportsIcon from "../assets/images/reports.svg"; -import reportsGreenIcon from "../assets/images/reports-green.svg"; -import testimonalsIcon from "../assets/images/testimonals.svg"; -import testimonalsGreenIcon from "../assets/images/testimonals-green.svg"; -import faqIcon from "../assets/images/faq.svg"; -import faqGreenIcon from "../assets/images/faq-green.svg"; -import discussionsIcon from "../assets/images/discussions.svg"; -import discussionsGreenIcon from "../assets/images/discussions-green.svg"; -import filesIcon from "../assets/images/files.svg"; -import filesGreenIcon from "../assets/images/files-green.svg"; +import learnIcon from '../assets/images/learn.svg'; +import earnIcon from '../assets/images/earn.svg'; +import homeIcon from '../assets/images/home.svg'; +import homeGreenIcon from '../assets/images/home-green.svg'; +import projectsIcon from '../assets/images/projects.svg'; +import projectsGreenIcon from '../assets/images/projects-green.svg'; +import crowdsourceIcon from '../assets/images/crowdsource.svg'; +import crowdsourceGreenIcon from '../assets/images/crowdsource-green.svg'; +import myteamsIcon from '../assets/images/my-teams.svg'; +import myteamsGreenIcon from '../assets/images/my-teams-green.svg'; +import skillSearchIcon from '../assets/images/skill-search.svg'; +import skillSearchGreenIcon from '../assets/images/skill-search-green.svg'; +import organizationSettingsIcon from '../assets/images/organization-settings.svg'; +import organizationSettingsGreenIcon from '../assets/images/organization-settings-green.svg'; +import integrationsPluginIcon from '../assets/images/integrations-plugins.svg'; +import integrationsPluginGreenIcon from '../assets/images/integrations-plugins-green.svg'; +import apisIcon from '../assets/images/apis.svg'; +import apisGreenIcon from '../assets/images/apis-green.svg'; +import myWorkIcon from '../assets/images/my-work.svg'; +import myWorkGreenIcon from '../assets/images/my-work-green.svg'; +import findWorkIcon from '../assets/images/find-work.svg'; +import findWorkGreenIcon from '../assets/images/find-work-green.svg'; +import thriveIcon from '../assets/images/thrive.svg'; +import thriveGreenIcon from '../assets/images/thrive-green.svg'; +import skillBuilderIcon from '../assets/images/skill-builder.svg'; +import skillBuilderGreenIcon from '../assets/images/skill-builder-green.svg'; +import reportsIcon from '../assets/images/reports.svg'; +import reportsGreenIcon from '../assets/images/reports-green.svg'; +import testimonalsIcon from '../assets/images/testimonals.svg'; +import testimonalsGreenIcon from '../assets/images/testimonals-green.svg'; +import faqIcon from '../assets/images/faq.svg'; +import faqGreenIcon from '../assets/images/faq-green.svg'; +import discussionsIcon from '../assets/images/discussions.svg'; +import discussionsGreenIcon from '../assets/images/discussions-green.svg'; +import filesIcon from '../assets/images/files.svg'; +import filesGreenIcon from '../assets/images/files-green.svg'; +import createTeamIcon from '../assets/images/create-team.svg'; +import createTeamGreenIcon from '../assets/images/create-team-green.svg'; /** * Micro-app categories */ export const APP_CATEGORIES = [ { - category: "Manage", + category: 'Manage', apps: [ { - title: "TaaS", + title: 'TaaS', icon: appTaasIcon, - path: "/taas/myteams", + path: '/taas/myteams', menu: [ { - title: "My Teams", - path: "/taas/myteams", + title: 'My Teams', + path: '/taas/myteams', icon: myteamsIcon, activeIcon: myteamsGreenIcon, }, + { + title: 'Create New Team', + path: '/taas/myteams/createnewteam', + icon: createTeamIcon, + activeIcon: createTeamGreenIcon, + }, ], }, { - title: "Submission Review", + title: 'Submission Review', icon: appSubmissionReviewIcon, - path: "/submissions", + path: '/submissions', menu: [], }, { - title: "Manage Work", + title: 'Manage Work', icon: manageWorkIcon, - path: "/manage-work", + path: '/manage-work', menu: [ { - title: "Homepage", - path: "/manage-work", + title: 'Homepage', + path: '/manage-work', icon: homeIcon, activeIcon: homeGreenIcon, }, { - title: "Projects", - path: "/manage-work/projects", + title: 'Projects', + path: '/manage-work/projects', icon: projectsIcon, activeIcon: projectsGreenIcon, }, { - title: "Crowdsource", - path: "/manage-work/crowdsource", + title: 'Crowdsource', + path: '/manage-work/crowdsource', icon: crowdsourceIcon, activeIcon: crowdsourceGreenIcon, }, ], }, { - title: "On-Demand Talent", + title: 'On-Demand Talent', icon: ondemandTalentIcon, - path: "/ondemand-talent", + path: '/ondemand-talent', menu: [ { - title: "Homepage", - path: "/ondemand-talent", + title: 'Homepage', + path: '/ondemand-talent', icon: homeIcon, activeIcon: homeGreenIcon, }, { - title: "My Teams", - path: "/ondemand-talent/my-teams", + title: 'My Teams', + path: '/ondemand-talent/my-teams', icon: myteamsIcon, activeIcon: myteamsGreenIcon, }, ], }, { - title: "My Organization", + title: 'My Organization', icon: myOrganizationIcon, - path: "/my-organization", + path: '/my-organization', menu: [ { - title: "Skill Search", - path: "/my-organization", + title: 'Skill Search', + path: '/my-organization', icon: skillSearchIcon, activeIcon: skillSearchGreenIcon, }, { - title: "Organization Settings", - path: "/my-organization/settings", + title: 'Organization Settings', + path: '/my-organization/settings', icon: organizationSettingsIcon, activeIcon: organizationSettingsGreenIcon, }, ], }, { - title: "Integrations", + title: 'Integrations', icon: integrationsIcon, - path: "/integrations", + path: '/integrations', menu: [ { - title: "Integrations Plug-Ins", - path: "/integrations", + title: 'Integrations Plug-Ins', + path: '/integrations', icon: integrationsPluginIcon, activeIcon: integrationsPluginGreenIcon, }, { - title: "APIs", - path: "/integrations/apis", + title: 'APIs', + path: '/integrations/apis', icon: apisIcon, activeIcon: apisGreenIcon, }, ], }, { - title: "Customer Platform", + title: 'Customer Platform', icon: customerplatformIcon, - path: "/customer-platform", + path: '/customer-platform', menu: [ { - title: "Catalog", - path: "/customer-platform", + title: 'Catalog', + path: '/customer-platform', icon: homeIcon, activeIcon: homeGreenIcon, }, { - title: "My Work", - path: "/customer-platform/my-work", + title: 'My Work', + path: '/customer-platform/my-work', icon: apisIcon, activeIcon: apisGreenIcon, }, { - title: "Reports", - path: "/customer-platform/reports", + title: 'Reports', + path: '/customer-platform/reports', icon: reportsIcon, activeIcon: reportsGreenIcon, }, { - title: "Testimonals", - path: "/customer-platform/testimonals", + title: 'Testimonals', + path: '/customer-platform/testimonals', icon: testimonalsIcon, activeIcon: testimonalsGreenIcon, }, { - title: "FAQ", - path: "/customer-platform/FAQ", + title: 'FAQ', + path: '/customer-platform/FAQ', icon: faqIcon, activeIcon: faqGreenIcon, }, ], }, { - title: "Work Manager", + title: 'Work Manager', icon: workmanagerIcon, - path: "/work-manager", + path: '/work-manager', menu: [ { - title: "Challenges/Tasks", - path: "/work-manager", + title: 'Challenges/Tasks', + path: '/work-manager', icon: homeIcon, activeIcon: homeGreenIcon, }, { - title: "Discussions", - path: "/work-manager/discussions", + title: 'Discussions', + path: '/work-manager/discussions', icon: discussionsIcon, activeIcon: discussionsGreenIcon, }, { - title: "Files & Links", - path: "/work-manager/files-links", + title: 'Files & Links', + path: '/work-manager/files-links', icon: filesIcon, activeIcon: filesGreenIcon, }, { - title: "Reports", - path: "/work-manager/reports", + title: 'Reports', + path: '/work-manager/reports', icon: reportsIcon, activeIcon: reportsGreenIcon, }, @@ -227,60 +235,60 @@ export const APP_CATEGORIES = [ ], }, { - category: "Do", + category: 'Do', apps: [ { - title: "Earn", + title: 'Earn', icon: earnIcon, - path: "/earn", + path: '/earn', menu: [], }, { - title: "Learn", + title: 'Learn', icon: learnIcon, - path: "/learn", + path: '/learn', menu: [ { - title: "Thrive", - path: "/learn", + title: 'Thrive', + path: '/learn', icon: thriveIcon, activeIcon: thriveGreenIcon, }, { - title: "Skill Builder", - path: "/learn/skill-builder", + title: 'Skill Builder', + path: '/learn/skill-builder', icon: skillBuilderIcon, activeIcon: skillBuilderGreenIcon, }, ], }, { - title: "Tasks", + title: 'Tasks', icon: manageWorkIcon, - path: "/task-marketplace", + path: '/task-marketplace', menu: [], }, ], }, { - category: "Sample", + category: 'Sample', apps: [ { - title: "React Example", + title: 'React Example', icon: appReactIcon, - path: "/micro-frontends-react-route", + path: '/micro-frontends-react-route', menu: [], }, { - title: "Angular Example", + title: 'Angular Example', icon: appAngularIcon, - path: "/micro-frontends-angular-route", + path: '/micro-frontends-angular-route', menu: [], }, { - title: "Documentation", + title: 'Documentation', icon: appReactIcon, - path: "/model", + path: '/model', menu: [], }, ], From 180bd1ac362ed77a40409008766070d06daab3d3 Mon Sep 17 00:00:00 2001 From: Michael Baghel Date: Mon, 24 May 2021 23:17:05 +0400 Subject: [PATCH 2/2] Made only My Teams use an exact path for sidenav --- src/components/Menu/index.jsx | 3 +-- src/constants/apps.js | 2 ++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Menu/index.jsx b/src/components/Menu/index.jsx index f0ac045..13e0352 100644 --- a/src/components/Menu/index.jsx +++ b/src/components/Menu/index.jsx @@ -41,7 +41,6 @@ const SubMenu = ({ option }) => { to={subOption.path} activeClassName="menu-link-active" className="menu-link" - exact > {subOption.title} @@ -63,7 +62,7 @@ const Menu = ({ options, sidebarCollapsed }) => ( to={option.path} activeClassName="menu-link-active" className="menu-link" - exact + exact={option.isExact} >