import React, { Component } from "react" import { Link } from "gatsby" import AnchorLink from "react-anchor-link-smooth-scroll" import Scrollspy from "react-scrollspy" import { Menu, X } from "react-feather" import Image from "../image" import { Container } from "../../global" import { Nav, NavItem, Brand, StyledContainer, NavListWrapper, MobileMenu, Mobile, } from "./style" const NAV_ITEMS = [ { name: "Mission", pathname: "/", hash: "#mission" }, { name: "Opportunities", pathname: "/opportunities" }, ] export default class Navigation extends Component { state = { mobileMenuOpen: false, hasScrolled: false, } componentDidMount() { window.addEventListener("scroll", this.handleScroll) } handleScroll = event => { const scrollTop = window.pageYOffset if (scrollTop > 32) { this.setState({ hasScrolled: true }) } else { this.setState({ hasScrolled: false }) } } toggleMobileMenu = () => { this.setState(prevState => ({ mobileMenuOpen: !prevState.mobileMenuOpen })) } closeMobileMenu = () => { if (this.state.mobileMenuOpen) { this.setState({ mobileMenuOpen: false }) } } getNavLink = ({ name, pathname, hash }) => { if (typeof window === "undefined") return null return window.location.pathname === pathname && hash ? ( <AnchorLink href={hash} onClick={this.closeMobileMenu}> {name} </AnchorLink> ) : ( <Link to={`${hash ? pathname + hash : pathname}`} onClick={this.closeMobileMenu} > {name} </Link> ) } getNavList = ({ mobile = false }) => ( <NavListWrapper mobile={mobile}> <Scrollspy items={NAV_ITEMS.map(item => item.name.toLowerCase())} currentClassName="active" mobile={mobile} offset={-64} > {NAV_ITEMS.map(navItem => ( <NavItem key={navItem.name}>{this.getNavLink(navItem)}</NavItem> ))} </Scrollspy> </NavListWrapper> ) render() { const { mobileMenuOpen } = this.state return ( <Nav {...this.props} scrolled={this.state.hasScrolled}> <StyledContainer> <Brand> <Scrollspy offset={-64} item={["top"]} currentClassName="active"> <Image /> {this.getNavLink({ name: "Ambition Fund", pathname: "/", hash: "#top", })} </Scrollspy> </Brand> <Mobile> <button onClick={this.toggleMobileMenu} style={{ color: "black", background: "none" }} > {this.state.mobileMenuOpen ? ( <X size={24} alt="close menu" /> ) : ( <Menu size={24} alt="open menu" /> )} </button> </Mobile> <Mobile hide>{this.getNavList({})}</Mobile> </StyledContainer> <Mobile> {mobileMenuOpen && ( <MobileMenu> <Container>{this.getNavList({ mobile: true })}</Container> </MobileMenu> )} </Mobile> </Nav> ) } }