diff --git a/assets/css/main.css b/assets/css/main.css
index 20e70c23..993f2242 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4927,27 +4927,37 @@ input.field--reset:active {
font-size: 14px;
max-width: 20vw; }
-.navItem--counterBadge, .navItem--counterBadgeProNotifications, .navItem--counterBadgeProMessages {
- background-color: #f65858;
- border: 2px solid white;
+.navItem--connections {
+ display: none; }
+ @media screen and (min-width: 768px) {
+ .navItem--connections {
+ display: block; } }
+
+.navItem--counterBadge, .navItem--counterBadgeConnections, .navItem--counterBadgeProNotifications, .navItem--counterBadgeProMessages {
+ background-color: #e32359;
+ border: 1px solid white;
border-radius: 10px;
box-sizing: border-box;
display: inline-block;
- height: 14px;
+ height: 10px;
position: absolute;
- width: 14px; }
+ width: 10px; }
.navItem--counterBadge {
- bottom: 12px;
- right: -3px; }
+ bottom: 14px;
+ right: -5px; }
+
+.navItem--counterBadgeConnections {
+ bottom: 40px;
+ right: 22px; }
.navItem--counterBadgeProNotifications {
- bottom: 38px;
- right: 24px; }
+ bottom: 40px;
+ right: 28px; }
.navItem--counterBadgeProMessages {
- bottom: 38px;
- right: 14px; }
+ bottom: 40px;
+ right: 18px; }
.navItem-label {
color: rgba(46, 62, 72, 0.6);
@@ -5087,38 +5097,43 @@ input.field--reset:active {
.notification--read {
background: #f6f7f8 !important; }
-.profileDropdown-content.wide {
- width: 512px; }
-
-.profileDropdown-content.new-padding {
- padding: 12px 16px; }
-
-.profileDropdown-content .list-item {
- padding-bottom: 8px !important;
- padding-top: 8px !important; }
-
-.profileDropdown-content .profileDropdown-draft-group {
- padding-top: 0 !important; }
-
-.profileDropdown-content .links-divider {
- border-top: thin;
- margin-bottom: 12px;
- margin-top: 12px; }
-
-.profileDropdown-content .links-item {
- box-sizing: border-box;
- color: inherit;
- display: inline-block;
- font-size: 14px;
- font-weight: 400;
- line-height: 1.43;
- margin: 0;
- min-width: 0;
- padding-bottom: 4px;
- padding-top: 4px;
- text-decoration: none; }
- .profileDropdown-content .links-item:hover {
- color: #00798a; }
+.profileDropdown-content {
+ /* stylelint-enable */ }
+ .profileDropdown-content.wide {
+ width: 512px; }
+ .profileDropdown-content.new-padding {
+ padding: 12px 16px; }
+ .profileDropdown-content .list-item {
+ padding-bottom: 8px !important;
+ padding-top: 8px !important; }
+ .profileDropdown-content .profileDropdown-draft-group {
+ padding-top: 0 !important; }
+ .profileDropdown-content .links-divider {
+ border-top: thin;
+ margin-bottom: 12px;
+ margin-top: 12px; }
+ .profileDropdown-content .links-item {
+ box-sizing: border-box;
+ color: inherit;
+ display: inline-block;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.43;
+ margin: 0;
+ min-width: 0;
+ padding-bottom: 4px;
+ padding-top: 4px;
+ text-decoration: none;
+ /* stylelint-disable selector-max-compound-selectors, selector-max-combinators, selector-max-class */ }
+ .profileDropdown-content .links-item--connections {
+ display: none; }
+ @media screen and (max-width: 768px) {
+ .profileDropdown-content .links-item--connections {
+ display: block; } }
+ .profileDropdown-content .links-item--connections .navItem--counterBadgeConnections {
+ position: initial; }
+ .profileDropdown-content .links-item:hover {
+ color: #00798a; }
.profileDropdown-draft-group div {
color: #0cbadf;
diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss
index e08a3800..45b0f524 100644
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -73,10 +73,18 @@ $zindex--aboveFloatingContent: map-get($zindex-map, "floating-content") + 1;
}
}
+.navItem--connections {
+ display: none;
+
+ @media screen and (min-width: 768px) {
+ display: block;
+ }
+}
+
%navItem--counterBadgePlaceholder {
- $_newDotSize: 14px;
- background-color: #f65858;
- border: 2px solid $C-white;
+ $_newDotSize: 10px;
+ background-color: #e32359;
+ border: 1px solid $C-white;
border-radius: 10px;
box-sizing: border-box;
display: inline-block;
@@ -87,20 +95,26 @@ $zindex--aboveFloatingContent: map-get($zindex-map, "floating-content") + 1;
.navItem--counterBadge {
@extend %navItem--counterBadgePlaceholder;
- bottom: 12px;
- right: -3px;
+ bottom: 14px;
+ right: -5px;
+}
+
+.navItem--counterBadgeConnections {
+ @extend %navItem--counterBadgePlaceholder;
+ bottom: 40px;
+ right: 22px;
}
.navItem--counterBadgeProNotifications {
@extend %navItem--counterBadgePlaceholder;
- bottom: 38px;
- right: 24px;
+ bottom: 40px;
+ right: 28px;
}
.navItem--counterBadgeProMessages {
@extend %navItem--counterBadgePlaceholder;
- bottom: 38px;
- right: 14px;
+ bottom: 40px;
+ right: 18px;
}
$maxLabelSize: 12;
@@ -331,10 +345,21 @@ $maxScalingBP: $breakpoint-m / 1px;
padding-top: 4px;
text-decoration: none;
+ /* stylelint-disable selector-max-compound-selectors, selector-max-combinators, selector-max-class */
+ &--connections {
+ display: none;
+ @media screen and (max-width: 768px) {
+ display: block;
+ }
+ .navItem--counterBadgeConnections {
+ position: initial;
+ }
+ }
&:hover {
color: #00798a;
}
}
+ /* stylelint-enable */
}
.profileDropdown-draft-group {
diff --git a/assets/svg/connections.svg b/assets/svg/connections.svg
new file mode 100644
index 00000000..145404f0
--- /dev/null
+++ b/assets/svg/connections.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx
index 1805a2aa..0917df25 100644
--- a/src/navigation/Nav.jsx
+++ b/src/navigation/Nav.jsx
@@ -22,6 +22,7 @@ import NavbarSearch, { NAVBAR_SEARCH_INPUT_ID } from './components/search/Navbar
import MESSAGE_ICON from '../../assets/svg/message.svg';
import NOTIFICATION_ICON from '../../assets/svg/notification.svg';
+import CONNECTIONS_ICON from '../../assets/svg/connections.svg';
import PRO_DASHBOARD_ICON from '../../assets/svg/proDashboard.svg';
const CLASS_UNAUTH_ITEM = 'navItem--unauthenticated';
@@ -170,6 +171,7 @@ export class Nav extends React.Component {
proDashboard,
explore, // eslint-disable-line no-unused-vars
messages,
+ connections,
notifications,
groups,
groupDraft,
@@ -230,6 +232,7 @@ export class Nav extends React.Component {
savedEvents={profile.profileDropdown.savedEvents}
yourGroups={profile.profileDropdown.yourGroups}
yourEvents={profile.profileDropdown.yourEvents}
+ yourConnections={profile.profileDropdown.yourConnections}
profile={profile}
groups={groups.list}
groupDraft={groupDraft}
@@ -237,6 +240,7 @@ export class Nav extends React.Component {
isNewNavsOrder={
isNewNavsOrder && (localeCode ? localeCode.includes('en') : false)
}
+ hasNewConnections={connections.hasNewConnections}
/>
) : (
@@ -277,6 +281,10 @@ export class Nav extends React.Component {
);
};
+ const getConnectionsIcon = () => (
+
+ );
+
const getNotificationsIcon = () => {
if (media.isAtMediumUp) {
return (
@@ -391,6 +399,19 @@ export class Nav extends React.Component {
linkClassName: 'navItemLink-pro',
isTargetBlank: true,
},
+ media.isAtMediumUp && {
+ shrink: true,
+ linkTo: connections.link,
+ label: connections.label,
+ labelClassName: 'navItem-label-pro',
+ className: cx('navItem--connections', CLASS_AUTH_ITEM),
+ linkClassName: 'navItemLink-pro',
+ counterBadgeClassName: 'navItem--counterBadgeConnections',
+ icon: getConnectionsIcon(),
+ hasUpdates: connections.hasNewConnections > 0,
+ updatesLabel: updatesLabel,
+ onLinkClick: messages.onLinkClick,
+ },
{
shrink: true,
linkTo: messages.link,
diff --git a/src/navigation/__snapshots__/Nav.test.jsx.snap b/src/navigation/__snapshots__/Nav.test.jsx.snap
index eb69621d..9db053e6 100644
--- a/src/navigation/__snapshots__/Nav.test.jsx.snap
+++ b/src/navigation/__snapshots__/Nav.test.jsx.snap
@@ -373,6 +373,24 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = `
linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro"
shrink={true}
/>
+
+ }
+ key="3"
+ label="Connections"
+ labelClassName="navItem-label-pro"
+ linkClassName="navItemLink-pro"
+ linkTo="meetup.com/your-connections"
+ shrink={true}
+ />
}
- key="3"
+ key="4"
label="Messages"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -402,7 +420,7 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = `
src=""
/>
}
- key="4"
+ key="5"
label="Notifications"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -428,6 +446,7 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = `
},
]
}
+ hasNewConnections={true}
help={
Object {
"label": "Help",
@@ -475,6 +494,10 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = `
"label": "Settings",
"link": "meetup.com/settings",
},
+ "yourConnections": Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ },
"yourEvents": Object {
"label": "Your events",
"link": "meetup.com/your-events",
@@ -498,6 +521,12 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = `
"link": "meetup.com/settings",
}
}
+ yourConnections={
+ Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ }
+ }
yourEvents={
Object {
"label": "Your events",
@@ -546,7 +575,7 @@ exports[`Nav should match the snapshot for authenticated medium screens 1`] = `
}
- key="5"
+ key="6"
label="Profile"
labelClassName="navItem-label display--block atMedium_display--none"
linkTo=""
@@ -636,6 +665,25 @@ exports[`Nav should match the snapshot for authenticated medium screens and new
linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro"
shrink={true}
/>
+
+ }
+ isNewNavActive={true}
+ key="3"
+ label="Connections"
+ labelClassName="navItem-label-pro"
+ linkClassName="navItemLink-pro"
+ linkTo="meetup.com/your-connections"
+ shrink={true}
+ />
}
isNewNavActive={true}
- key="3"
+ key="4"
label="Messages"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -667,7 +715,7 @@ exports[`Nav should match the snapshot for authenticated medium screens and new
/>
}
isNewNavActive={true}
- key="4"
+ key="5"
label="Notifications"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -693,6 +741,7 @@ exports[`Nav should match the snapshot for authenticated medium screens and new
},
]
}
+ hasNewConnections={true}
help={
Object {
"label": "Help",
@@ -741,6 +790,10 @@ exports[`Nav should match the snapshot for authenticated medium screens and new
"label": "Settings",
"link": "meetup.com/settings",
},
+ "yourConnections": Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ },
"yourEvents": Object {
"label": "Your events",
"link": "meetup.com/your-events",
@@ -764,6 +817,12 @@ exports[`Nav should match the snapshot for authenticated medium screens and new
"link": "meetup.com/settings",
}
}
+ yourConnections={
+ Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ }
+ }
yourEvents={
Object {
"label": "Your events",
@@ -813,7 +872,7 @@ exports[`Nav should match the snapshot for authenticated medium screens and new
}
isNewNavActive={true}
- key="5"
+ key="6"
label="Profile"
labelClassName="navItem-label display--block atMedium_display--none"
linkTo=""
@@ -1176,6 +1235,24 @@ exports[`Nav should match the snapshot for groups loading state 1`] = `
linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro"
shrink={true}
/>
+
+ }
+ key="3"
+ label="Connections"
+ labelClassName="navItem-label-pro"
+ linkClassName="navItemLink-pro"
+ linkTo="meetup.com/your-connections"
+ shrink={true}
+ />
}
- key="3"
+ key="4"
label="Messages"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -1205,7 +1282,7 @@ exports[`Nav should match the snapshot for groups loading state 1`] = `
src=""
/>
}
- key="4"
+ key="5"
label="Notifications"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -1231,6 +1308,7 @@ exports[`Nav should match the snapshot for groups loading state 1`] = `
},
]
}
+ hasNewConnections={true}
help={
Object {
"label": "Help",
@@ -1278,6 +1356,10 @@ exports[`Nav should match the snapshot for groups loading state 1`] = `
"label": "Settings",
"link": "meetup.com/settings",
},
+ "yourConnections": Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ },
"yourEvents": Object {
"label": "Your events",
"link": "meetup.com/your-events",
@@ -1301,6 +1383,12 @@ exports[`Nav should match the snapshot for groups loading state 1`] = `
"link": "meetup.com/settings",
}
}
+ yourConnections={
+ Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ }
+ }
yourEvents={
Object {
"label": "Your events",
@@ -1349,7 +1437,7 @@ exports[`Nav should match the snapshot for groups loading state 1`] = `
}
- key="5"
+ key="6"
label="Profile"
labelClassName="navItem-label display--block atMedium_display--none"
linkTo=""
@@ -1444,6 +1532,24 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = `
linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro"
shrink={true}
/>
+
+ }
+ key="3"
+ label="Connections"
+ labelClassName="navItem-label-pro"
+ linkClassName="navItemLink-pro"
+ linkTo="meetup.com/your-connections"
+ shrink={true}
+ />
}
- key="3"
+ key="4"
label="Messages"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -1473,7 +1579,7 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = `
src=""
/>
}
- key="4"
+ key="5"
label="Notifications"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -1499,6 +1605,7 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = `
},
]
}
+ hasNewConnections={true}
help={
Object {
"label": "Help",
@@ -1546,6 +1653,10 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = `
"label": "Settings",
"link": "meetup.com/settings",
},
+ "yourConnections": Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ },
"yourEvents": Object {
"label": "Your events",
"link": "meetup.com/your-events",
@@ -1569,6 +1680,12 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = `
"link": "meetup.com/settings",
}
}
+ yourConnections={
+ Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ }
+ }
yourEvents={
Object {
"label": "Your events",
@@ -1617,7 +1734,7 @@ exports[`Nav should match the snapshot for notifications loading state 1`] = `
}
- key="5"
+ key="6"
label="Profile"
labelClassName="navItem-label display--block atMedium_display--none"
linkTo=""
@@ -2013,6 +2130,24 @@ exports[`Nav should match the snapshot for unread notifications 1`] = `
linkTo="meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro"
shrink={true}
/>
+
+ }
+ key="3"
+ label="Connections"
+ labelClassName="navItem-label-pro"
+ linkClassName="navItemLink-pro"
+ linkTo="meetup.com/your-connections"
+ shrink={true}
+ />
}
- key="3"
+ key="4"
label="Messages"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -2042,7 +2177,7 @@ exports[`Nav should match the snapshot for unread notifications 1`] = `
src=""
/>
}
- key="4"
+ key="5"
label="Notifications"
labelClassName="navItem-label-pro"
linkClassName="navItemLink-pro"
@@ -2068,6 +2203,7 @@ exports[`Nav should match the snapshot for unread notifications 1`] = `
},
]
}
+ hasNewConnections={true}
help={
Object {
"label": "Help",
@@ -2115,6 +2251,10 @@ exports[`Nav should match the snapshot for unread notifications 1`] = `
"label": "Settings",
"link": "meetup.com/settings",
},
+ "yourConnections": Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ },
"yourEvents": Object {
"label": "Your events",
"link": "meetup.com/your-events",
@@ -2138,6 +2278,12 @@ exports[`Nav should match the snapshot for unread notifications 1`] = `
"link": "meetup.com/settings",
}
}
+ yourConnections={
+ Object {
+ "label": "Your connections",
+ "link": "meetup.com/your-connections",
+ }
+ }
yourEvents={
Object {
"label": "Your events",
@@ -2186,7 +2332,7 @@ exports[`Nav should match the snapshot for unread notifications 1`] = `
}
- key="5"
+ key="6"
label="Profile"
labelClassName="navItem-label display--block atMedium_display--none"
linkTo=""
diff --git a/src/navigation/components/profile/ProfileDropdown.jsx b/src/navigation/components/profile/ProfileDropdown.jsx
index a919cd4a..2deb0f4c 100644
--- a/src/navigation/components/profile/ProfileDropdown.jsx
+++ b/src/navigation/components/profile/ProfileDropdown.jsx
@@ -35,6 +35,8 @@ export const ProfileDropdownComponent = ({
yourGroups,
isNewNavActive,
isNewNavsOrder,
+ yourConnections,
+ hasNewConnections,
}) => {
const groupsContent = groups.map(group => (
+ {!!yourConnections && (
+
+
+ {yourConnections.label}{' '}
+ {hasNewConnections ? (
+
+ ) : (
+ '🆕'
+ )}
+
+
+ )}
) : (
diff --git a/src/navigation/nav.story.jsx b/src/navigation/nav.story.jsx
index feb97674..190c4c31 100644
--- a/src/navigation/nav.story.jsx
+++ b/src/navigation/nav.story.jsx
@@ -76,6 +76,11 @@ export const navItemsFactory = () => {
'meetup.com/lp/meetup-pro/?fromUpgrade=true&utm_medium=display&utm_source=meetup&utm_content=lp_pro&utm_campaign=meetup_orgeng_c2p_pro',
label: 'Try for free',
},
+ connections: {
+ link: 'meetup.com/your-connections',
+ label: 'Connections',
+ hasNewConnections: true,
+ },
messages: {
link: 'meetup.com/messages',
label: 'Messages',
@@ -111,6 +116,10 @@ export const navItemsFactory = () => {
savedEvents: { link: 'meetup.com/saved-events', label: 'Saved events' },
yourGroups: { link: 'meetup.com/groups', label: 'Your groups' },
yourEvents: { link: 'meetup.com/your-events', label: 'Your events' },
+ yourConnections: {
+ link: 'meetup.com/your-connections',
+ label: 'Your connections',
+ },
allGroupsLabel: 'See all groups',
allGroupsLink: 'meetup.com/groups',
groupHome: () => {},