text: import React, { Component } from 'react';
  import AnchorLink from 'react-anchor-link-smooth-scroll';
  import Scrollspy from 'react-scrollspy';
  
  import { Container } from '@components/global';
  import {
    Nav,
    NavItem,
    StyledContainer,
    NavListWrapper,
    MobileMenu,
    Mobile,
  } from './style';
  
  import { ReactComponent as MenuIcon } from '@static/icons/menu.svg';
  
  const NAV_ITEMS = ['about', '@'];
  // const NAV_ITEMS = ['about', 'contact', '++', 'faq'];
  
  class Navbar extends Component {
    state = {
      mobileMenuOpen: false,
    };
  
    toggleMobileMenu = () => {
      this.setState(prevState => ({ mobileMenuOpen: !prevState.mobileMenuOpen }));
    };
  
    closeMobileMenu = () => {
      if (this.state.mobileMenuOpen) {
        this.setState({ mobileMenuOpen: false });
      }
    };
  
    getNavAnchorLink = item => (
      <AnchorLink href={`#${item.toLowerCase()}`} onClick={this.closeMobileMenu}>
        {item}
      </AnchorLink>
    );
  
    getNavList = ({ mobile = false }) => (
      <NavListWrapper mobile={mobile}>
        <Scrollspy
          items={NAV_ITEMS.map(item => item.toLowerCase())}
          currentClassName="active"
          mobile={mobile}
          offset={-64} >
          {NAV_ITEMS.map(navItem => (
            <NavItem key={navItem} style={{fontSize: '15px'}}>{this.getNavAnchorLink(navItem)}</NavItem>
          ))}
        </Scrollspy>
      </NavListWrapper>
    );
  
    render() {
      const { mobileMenuOpen } = this.state;
  
      return (
        <Nav {...this.props}>
          <StyledContainer>
            <h2 style={{fontSize: '15px'}}>
              <a style={{color:'black', textDecoration:'none', letterSpacing: '3px'}} href="https://martinssamuel.com/">
              MARTINS SAMUEL
              </a>
            </h2>
  
            <Mobile>
              <button onClick={this.toggleMobileMenu} style={{color: 'black'}}>
                <MenuIcon/>
              </button>
            </Mobile>
  
            <Mobile hide>{this.getNavList({})}</Mobile>
          </StyledContainer>
  
          <Mobile>
            {mobileMenuOpen && (
              <MobileMenu>
                <Container>{this.getNavList({ mobile: true })}</Container>
              </MobileMenu>
            )}
          </Mobile>
        </Nav>
      );
    }
  }
  
  export default Navbar;
  