import PropTypes from 'prop-types'
import React from 'react'
import classnames from 'classnames'
import $ from 'jquery'

const NavbarButton = props => {
  const handleClick = e => {
    e.preventDefault()
    const { targetId, scrollableId } = props
    const target = $(`#${targetId}`)
    const scrollable = $(`#${scrollableId}`)
    const yPosition = target.position().top + scrollable.scrollTop() - scrollable.position().top

    scrollable.stop().animate({scrollTop: yPosition}, 500, () => {
      window.location.hash = targetId
    })
  }

  const {className, children, hidden} = props
  return (
    <a
      href='/'
      className={classnames(className, 'navbar-button relative')}
      onClick={handleClick}>
      <span style={{ opacity: hidden ? '.25' : '1' }}>
        {children}
      </span>
      {hidden && (
        <div className='h2 absolute top-0 bottom-0 left-0 right-0 center flex flex-center'>
          <i className='fa fa-eye-slash flex-auto' />
        </div>
      )}
    </a>
  )
}

NavbarButton.propTypes = {
  targetId: PropTypes.string.isRequired,
  scrollableId: PropTypes.string.isRequired,
  className: PropTypes.string,
  children: PropTypes.string,
  hidden: PropTypes.bool
}

export default NavbarButton

@@ -93,31 +93,8 @@
 mes'
-%0Aimport $ from 'jquery'
 %0A%0Aco
@@ -199,22 +199,8 @@
 etId
-, scrollableId
  %7D =
@@ -229,278 +229,88 @@
 t = 
-$(%60#$%7BtargetId%7D%60)%0A    const scrollable = $(%60#$%7BscrollableId%7D%60)%0A    const yPosition = target.position().top + scrollable.scrollTop() - scrollable.position().top%0A%0A    scrollable.stop().animate(%7BscrollTop: yPosition%7D, 500, () =%3E %7B%0A      window.location.hash = targetId%0A    
+document.getElementById(targetId)%0A%0A    target.scrollIntoView(%7Bbehavior: %22smooth%22
 %7D)%0A 

remove jQuery in scroll navbar