diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js index 03efb5d9..36fbcf35 100644 --- a/browser/main/HomePage/ArticleTopBar.js +++ b/browser/main/HomePage/ArticleTopBar.js @@ -35,7 +35,8 @@ export default class ArticleTopBar extends React.Component { super(props) this.state = { - isTooltipHidden: true + isTooltipHidden: true, + isLinksDropdownOpen: false } } @@ -96,6 +97,28 @@ export default class ArticleTopBar extends React.Component { dispatch(toggleTutorial()) } + handleLinksDropdownClick (e) { + e.preventDefault() + let linksButton = document.activeElement + this.handleLinksDropdownClickHandler = e => { + if (linksButton !== document.activeElement) { + console.log('hide dropdown') + document.removeEventListener('click', this.handleLinksDropdownClickHandler) + this.setState({ + isLinksDropdownOpen: false + }) + } + } + + if (!this.state.isLinksDropdownOpen) { + document.removeEventListener('click', this.handleLinksDropdownClickHandler) + document.addEventListener('click', this.handleLinksDropdownClickHandler) + this.setState({ + isLinksDropdownOpen: true + }) + } + } + render () { let { status } = this.props return ( @@ -132,10 +155,23 @@ export default class ArticleTopBar extends React.Component {
- + this.handleLinksDropdownClick(e)} href> - Boost official page - + + { + this.state.isLinksDropdownOpen + ? ( +
+ + Boost official page + + + Discuss + +
+ ) + : null + }
{status.isTutorialOpen ? ( diff --git a/browser/styles/main/HomeContainer/components/ArticleTopBar.styl b/browser/styles/main/HomeContainer/components/ArticleTopBar.styl index afad46a9..6397e74a 100644 --- a/browser/styles/main/HomeContainer/components/ArticleTopBar.styl +++ b/browser/styles/main/HomeContainer/components/ArticleTopBar.styl @@ -147,17 +147,33 @@ infoBtnActiveBgColor = #3A3A3A .tooltip opacity 1 - &>.logo + &>.linksBtn display block position absolute top 8px right 15px opacity 0.7 - .tooltip - tooltip() - margin-top 44px - margin-left -120px &:hover opacity 1 .tooltip opacity 1 + &>.links-dropdown + position fixed + z-index 50 + right 10px + top 40px + background-color transparentify(invBackgroundColor, 80%) + padding 5px 0 + .links-item + padding 0 10px + height 33px + width 100% + display block + line-height 33px + text-decoration none + color white + &:hover + background-color transparentify(lighten(invBackgroundColor, 30%), 80%) + + +