From b5b3482d0e3391666a2f0a32b0ffad197a8a562b Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Thu, 21 Feb 2019 14:07:01 +0300 Subject: [PATCH] fix: wire menu to redux and add change meanu breakpoint for guide --- client/gatsby-browser.js | 2 +- client/gatsby-ssr.js | 2 +- client/src/components/Header/header.css | 39 ++++++ client/src/components/Header/index.js | 118 ++++++++++--------- client/src/components/layouts/Default.js | 6 +- client/src/components/layouts/redux/index.js | 12 +- 6 files changed, 115 insertions(+), 64 deletions(-) diff --git a/client/gatsby-browser.js b/client/gatsby-browser.js index fda4744808..8c6bcb132f 100644 --- a/client/gatsby-browser.js +++ b/client/gatsby-browser.js @@ -41,7 +41,7 @@ export const wrapPageElement = ({ element, props }) => { } if (/^\/guide(\/.*)*/.test(pathname)) { return ( - + {element} ); diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js index 789d2b7f4b..d369a5c515 100644 --- a/client/gatsby-ssr.js +++ b/client/gatsby-ssr.js @@ -38,7 +38,7 @@ export const wrapPageElement = ({ element, props }) => { } if (/^\/guide(\/.*)*/.test(pathname)) { return ( - + {element} ); diff --git a/client/src/components/Header/header.css b/client/src/components/Header/header.css index 8cc773813d..a65d1f2048 100644 --- a/client/src/components/Header/header.css +++ b/client/src/components/Header/header.css @@ -176,6 +176,7 @@ header { #top-nav .menu-button { display: none; + color: white; } @media (max-width: 734px) { @@ -232,3 +233,41 @@ header { top: 2.4em; } } + +@media (min-width: 735px) and (max-width: 991px) { + .onGuide #top-nav { + padding: 0; + } + + .onGuide #top-nav .menu-button { + display: block; + margin: 0 20px 0 12px; + padding: 2px 14px; + border: 1px solid #fff; + border-radius: 3px; + cursor: pointer; + } + + .onGuide #top-right-nav { + top: var(--header-height); + } + + .opened #top-nav .menu-button { + background: white; + color: #006400; + } + + .onGuide #top-right-nav { + position: absolute; + top: -300px; + flex-direction: column; + width: 100vw; + height: min-content; + min-height: 160px; + padding: 10px 0; + } + + .onGuide #top-nav img { + margin: 0 0 0 10px; + } +} diff --git a/client/src/components/Header/index.js b/client/src/components/Header/index.js index 1ba56d2b06..799439a7ea 100644 --- a/client/src/components/Header/index.js +++ b/client/src/components/Header/index.js @@ -11,23 +11,28 @@ import { Link } from '../helpers'; import './header.css'; -import { toggleDisplaySideNav } from '../layouts/redux'; +import { toggleDisplaySideNav, toggleDisplayMenu } from '../layouts/redux'; + +const mapStateToProps = state => { + return { + displayMenu: state.guideNav.displayMenu + }; +}; const mapDispatchToProps = dispatch => - bindActionCreators({ toggleDisplaySideNav }, dispatch); + bindActionCreators({ toggleDisplaySideNav, toggleDisplayMenu }, dispatch); const propTypes = { disableSettings: PropTypes.bool, - showMobileSidenav: PropTypes.bool, + displayMenu: PropTypes.bool, + onGuide: PropTypes.bool, + toggleDisplayMenu: PropTypes.func, toggleDisplaySideNav: PropTypes.func }; class Header extends Component { constructor(props) { super(props); - this.state = { - isMenuOpened: false - }; this.menuButtonRef = React.createRef(); } @@ -39,81 +44,78 @@ class Header extends Component { document.removeEventListener('click', this.handleClickOutside); } - toggleClass = () => { - if (this.props.showMobileSidenav) { + toggleDisplayMenu = () => { + if (this.props.onGuide) { this.props.toggleDisplaySideNav(); + } else { + this.props.toggleDisplayMenu(); } - this.setState({ - isMenuOpened: !this.state.isMenuOpened - }); }; handleClickOutside = event => { if ( - this.state.isMenuOpened && + this.props.displayMenu && !this.menuButtonRef.current.contains(event.target) && - !this.props.showMobileSidenav + !this.props.onGuide ) { - this.toggleClass(); + toggleDisplayMenu(); } }; handleMediaChange = matches => { - if (!matches && this.state.isMenuOpened) { - this.toggleClass(); + if (!matches && this.props.displayMenu) { + toggleDisplayMenu(); } }; - render() { - const { disableSettings, showMobileSidenav } = this.props; - if (this.state.isMenuOpened && showMobileSidenav) { - return ( -
- -
- ); + renderClassNames = (displayMenu, onGuide) => { + if (displayMenu && onGuide) { + return 'opened onGuide'; + } else if (displayMenu) { + return 'opened'; + } else if (onGuide) { + return 'onGuide'; } + return ''; + }; + + render() { + const viewportWidth = Math.max( + document.documentElement.clientWidth, + window.innerWidth || 0 + ); + console.log(viewportWidth); + const { disableSettings, onGuide, displayMenu } = this.props; return ( -
+