mitchell
/
mjfs.us
mirror of https://github.com/mitchell/mjfs.us.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added scrollTo to navigation; minor navbar fixes

This commit is contained in:
mitchelljfs 2018-07-22 01:48:30 -07:00
parent 5ffc1e9843
commit f5f348b776
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Navbar/index.js
View File

@ -6,6 +6,8 @@ import faBars from "@fortawesome/fontawesome-free-solid/faBars"
import "./index.css" import "./index.css"
const changeMenu = 800
type Props = {} type Props = {}
type State = { type State = {
@ -13,22 +15,25 @@ type State = {
} }
class Navbar extends React.Component<Props, State> { class Navbar extends React.Component<Props, State> {
static defaultProps: Props
changeMenu: number
constructor(props: Props) { constructor(props: Props) {
super(props) super(props)
this.changeMenu = 800
if (window.innerWidth <= this.changeMenu) { if (window.innerWidth <= changeMenu) {
this.state = { showMenu: false } this.state = { showMenu: false }
} else { } else {
this.state = { showMenu: true } this.state = { showMenu: true }
} }
} }
closeMenu = () => {
window.scrollTo(0, 0)
if (window.innerWidth <= changeMenu) {
this.setState({ showMenu: false })
}
}
toggleMenu = () => { toggleMenu = () => {
if (window.innerWidth <= this.changeMenu || !this.state.showMenu) { if (window.innerWidth <= changeMenu || !this.state.showMenu) {
this.setState(prev => ({ showMenu: !prev.showMenu })) this.setState(prev => ({ showMenu: !prev.showMenu }))
} }
} }
@ -36,7 +41,7 @@ class Navbar extends React.Component<Props, State> {
render() { render() {
let menuButton = null let menuButton = null
if (window.innerWidth <= this.changeMenu) { if (window.innerWidth <= changeMenu) {
menuButton = ( menuButton = (
<div <div
className={ className={
@ -61,7 +66,7 @@ class Navbar extends React.Component<Props, State> {
activeClassName="active-button" activeClassName="active-button"
exact exact
to="/" to="/"
onClick={this.toggleMenu} onClick={this.closeMenu}
> >
Home Home
</NavLink> </NavLink>
@ -69,7 +74,7 @@ class Navbar extends React.Component<Props, State> {
className="navbar-menu-button" className="navbar-menu-button"
activeClassName="active-button" activeClassName="active-button"
to="/projects" to="/projects"
onClick={this.toggleMenu} onClick={this.closeMenu}
> >
Projects Projects
</NavLink> </NavLink>
@ -77,7 +82,7 @@ class Navbar extends React.Component<Props, State> {
className="navbar-menu-button" className="navbar-menu-button"
activeClassName="active-button" activeClassName="active-button"
to="/experience" to="/experience"
onClick={this.toggleMenu} onClick={this.closeMenu}
> >
Experience Experience
</NavLink> </NavLink>
@ -85,7 +90,7 @@ class Navbar extends React.Component<Props, State> {
className="navbar-menu-button" className="navbar-menu-button"
activeClassName="active-button" activeClassName="active-button"
to="/contact" to="/contact"
onClick={this.toggleMenu} onClick={this.closeMenu}
> >
Contact Contact
</NavLink> </NavLink>