redefine side menu bar items for each role

Author: alexanmtz

frontend/src/components/design-library/molecules/heroes/secondary-hero/secondary-hero.tsx

@@ -39,7 +39,7 @@ const SecondaryHero = ({ image, animation, title, items }: SecondaryHeroProps) =
               {items.map((item, index) => (
                 <>
                   <ListItemTop>
-                    <ListItemIcon style={{marginRight: 10}}>{item.icon}</ListItemIcon>
+                    <ListItemIcon style={{ marginRight: 10 }}>{item.icon}</ListItemIcon>
                     <ListItemText primary={item.primaryText} secondary={item.secondaryText} />
                   </ListItemTop>
                   {index < items.length - 1 && <Divider />}

frontend/src/hooks/use-profile-sidebar-menu.tsx

@@ -20,7 +20,9 @@ const useProfileSidebarMenu = ({ user }) => {
 
   useEffect(() => {
     const path = history.location.pathname
-    if (path.includes('/profile/explore')) {
+    if (path === '/profile' || path === '/profile/') {
+      setSelected(0)
+    } else if (path.includes('/profile/explore')) {
       setSelected(2)
     } else if (
       path.includes('/profile/task') ||
@@ -61,9 +63,7 @@ const useProfileSidebarMenu = ({ user }) => {
       ]
     },
     {
-      category: (
-        <FormattedMessage id="account.profile.sidemenu.issues" defaultMessage="Issues" />
-      ),
+      category: <FormattedMessage id="account.profile.sidemenu.issues" defaultMessage="Issues" />,
       items: [
         {
           include: isContributor || isMaintainer || isFunding,
@@ -92,10 +92,10 @@ const useProfileSidebarMenu = ({ user }) => {
       ]
     },
     {
-      category: (
+      category: (isFunding || isMaintainer) && (
         <FormattedMessage
-          id="account.profile.sidemenu.section.bounties"
-          defaultMessage="Bounties"
+          id="account.profile.sidemenu.section.payments"
+          defaultMessage="Payments"
         />
       ),
       items: [
@@ -106,37 +106,67 @@ const useProfileSidebarMenu = ({ user }) => {
           label: <FormattedMessage id="account.profile.payments.list" defaultMessage="Payments" />,
           selected: selected === 3
         },
+        {
+          include: isFunding || isMaintainer,
+          onClick: () => history.push('/profile/wallets'),
+          icon: <WalletIcon />,
+          label: <FormattedMessage id="account.profile.wallet.list" defaultMessage="Wallets" />,
+          selected: selected === 5
+        }
+      ]
+    },
+    {
+      category: isContributor && (
+        <FormattedMessage
+          id="account.profile.sidemenu.section.paymentrequests"
+          defaultMessage="Payment Requests"
+        />
+      ),
+      items: [
         {
           include: isContributor,
           onClick: () => history.push('/profile/payment-requests'),
           icon: <PaymentRequestsIcon />,
           label: (
             <FormattedMessage
-              id="account.profile.paymentRequests.list"
+              id="account.profile.sidemenu.paymentrequests.paymentrequests"
               defaultMessage="Payment Requests"
             />
           ),
           selected: selected === 4
-        },
-        {
-          include: isFunding || isMaintainer,
-          onClick: () => history.push('/profile/wallets'),
-          icon: <WalletIcon />,
-          label: <FormattedMessage id="account.profile.wallet.list" defaultMessage="Wallets" />,
-          selected: selected === 5
-        },
+        }
+      ]
+    },
+    {
+      category: isContributor && (
+        <FormattedMessage
+          id="account.profile.sidemenu.section.receivepayments"
+          defaultMessage="Receive Payments"
+        />
+      ),
+      items: [
         {
           include: isContributor,
           onClick: () => history.push('/profile/claims'),
           icon: <ClaimIcon />,
-          label: <FormattedMessage id="account.profile.claims.list" defaultMessage="Claims" />,
+          label: (
+            <FormattedMessage
+              id="account.profile.sidemenu.contributor.claims"
+              defaultMessage="My Claims"
+            />
+          ),
           selected: selected === 6
         },
         {
           include: isContributor,
           onClick: () => history.push('/profile/payouts'),
           icon: <PayoutIcon />,
-          label: <FormattedMessage id="account.profile.payout.list" defaultMessage="Payouts" />,
+          label: (
+            <FormattedMessage
+              id="account.profile.sidemenu.contributor.payouts"
+              defaultMessage="My Payouts"
+            />
+          ),
           selected: selected === 7
         }
       ]