From ca4365d82090d0feced2366a0ccdf9c3fe9c420d Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 5 Aug 2018 11:27:26 +0200 Subject: [PATCH] Ensured toggle menu is hidden on route change --- src/common/MainHeader.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js index 18be02fc..8f8f222a 100644 --- a/src/common/MainHeader.js +++ b/src/common/MainHeader.js @@ -1,27 +1,33 @@ import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus'; import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link, withRouter } from 'react-router-dom' import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'; import ServersDropdown from '../servers/ServersDropdown'; import './MainHeader.scss'; import shlinkLogo from './shlink-logo-white.png'; -export default class MainHeader extends React.Component { +export class MainHeader extends React.Component { state = { isOpen: false }; toggle = () => { - this.setState({ - isOpen: !this.state.isOpen - }); + this.setState(({ isOpen }) => ({ + isOpen: !isOpen + })); }; + componentDidUpdate(prevProps) { + if (this.props.location !== prevProps.location) { + this.setState({ isOpen: false }); + } + } + render() { return ( Shlink Shlink - +