diff --git a/www/src/components/share-menu.js b/www/src/components/share-menu.js
index bbbdca2fa87b5..fd7dc037977f1 100644
--- a/www/src/components/share-menu.js
+++ b/www/src/components/share-menu.js
@@ -23,6 +23,36 @@ class ShareMenu extends React.Component {
open: false,
}
this.shareMenu = this.shareMenu.bind(this)
+ this.clickOutsideShareMenu = this.clickOutsideShareMenu.bind(this)
+ this.setShareBtnRef = this.setShareBtnRef.bind(this)
+ this.setShareMenuRef = this.setShareMenuRef.bind(this)
+ }
+
+ componentDidMount() {
+ document.addEventListener(`mousedown`, this.clickOutsideShareMenu)
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener(`mousedown`, this.clickOutsideShareMenu)
+ }
+
+ setShareBtnRef(node) {
+ this.shareBtnref = node
+ }
+
+ setShareMenuRef(node) {
+ this.shareMenuRef = node
+ }
+
+ clickOutsideShareMenu(event) {
+ const { open } = this.state
+ if (
+ open &&
+ !this.shareBtnref.contains(event.target) &&
+ !this.shareMenuRef.contains(event.target)
+ ) {
+ this.shareMenu()
+ }
}
shareMenu() {
@@ -46,6 +76,7 @@ class ShareMenu extends React.Component {
color: styles[theme].textColor,
cursor: `pointer`,
}}
+ ref={this.setShareBtnRef}
>
@@ -57,6 +88,7 @@ class ShareMenu extends React.Component {
left: `auto`,
right: 0,
}}
+ ref={this.setShareMenuRef}
>
(
display: `flex`,
flexWrap: `nowrap`,
flexGrow: 1,
- justifyContent: `space-between`,
borderBottom: `1px solid ${colors.ui.light}`,
paddingBottom: rhythm(2 / 4),
[presets.Phablet]: {
@@ -122,42 +121,53 @@ const Meta = ({ starter, repoName, imageSharp, demo }) => (
zIndex: 1,
}}
>
-
-
+
+ {` Visit demo `}
+
+
- {` Visit demo `}
-
-
+