a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Collapse header when clicking on link

Browse Source
This commit is contained in:
Maciej Ziarkowski 2019-09-18 14:33:23 +01:00
parent 60ce7eea12
commit 33dc30612b
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/src/frontend/header.tsx
View File

@ -19,6 +19,7 @@ class Header extends React.Component<any, any> { // TODO: add proper types
super(props);
this.state = {collapseMenu: true};
this.handleClick = this.handleClick.bind(this);
this.handleNavigate = this.handleNavigate.bind(this);
}
handleClick() {
@ -27,6 +28,12 @@ class Header extends React.Component<any, any> { // TODO: add proper types
}));
}
handleNavigate() {
this.setState({
collapseMenu: true
});
}
render() {
return (
<header className="main-header">
@ -43,7 +50,7 @@ class Header extends React.Component<any, any> { // TODO: add proper types
<div className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<NavLink to="/view/categories" className="nav-link">
<NavLink to="/view/categories" className="nav-link" onClick={this.handleNavigate}>
View/Edit Maps
</NavLink>
</li>
@ -76,7 +83,7 @@ class Header extends React.Component<any, any> { // TODO: add proper types
this.props.user?
(
<li className="nav-item">
<NavLink to="/my-account.html" className="nav-link">
<NavLink to="/my-account.html" className="nav-link" onClick={this.handleNavigate}>
Account <span className="shorten-username">({this.props.user.username})</span>
</NavLink>
</li>
@ -84,12 +91,12 @@ class Header extends React.Component<any, any> { // TODO: add proper types
(
<Fragment>
<li className="nav-item">
<NavLink to="/login.html" className="nav-link">
<NavLink to="/login.html" className="nav-link" onClick={this.handleNavigate}>
Log in
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/sign-up.html" className="nav-link">
<NavLink to="/sign-up.html" className="nav-link" onClick={this.handleNavigate}>
Sign up
</NavLink>
</li>