navbar.js

import React, { useState, useEffect } from 'react'
import '../App.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { Nav } from 'react-bootstrap'
import { motion } from 'framer-motion'
import { render } from '@testing-library/react'
import styled from 'styled-components'

function debounce(fn, ms) {
  let timer
  return (_) => {
    clearTimeout(timer)
    timer = setTimeout((_) => {
      timer = null
      fn.apply(this, arguments)
    }, ms)
  }
}

export default class Header extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      dimensions: false,
      scroled: false,
      about: false,
      port: false,
      home: false,
      open: false,
      offset: 0,
    }
    this.handleScroll = this.handleScroll.bind(this)
    this.debouncedHandleResize = this.debouncedHandleResize.bind(this)
  }

  handleScroll = () => {
    var offset = window.scrollY
    if (offset < 833) {
      this.setState({ home: true })
    } else if ((offset = 783)) {
      this.setState({ about: true })
    } else if ((offset = 2100)) {
      this.setState({ port: true })
    } else if (offset < 834) {
      this.setState({ open: true })
      this.setState({ dimensions: true })
    }
  }
  // handleScrollAbout = () => {
  //   const offset = window.scrollY
  //   if (offset > 783) {
  //     setAbout(true)
  //   } else {
  //     setAbout(false)
  //   }
  // }
  // handleScrollHome = () => {
  //   const offset = window.scrollY
  //   if (offset < 783) {
  //     setHome(true)
  //   } else {
  //     setHome(false)
  //   }
  // }
  // handleScrollPortfolio = () => {
  //   const offset = window.scrollY
  //   if (offset < 2100) {
  //     setPort(true)
  //   } else {
  //     setPort(false)
  //   }
  // }
  debouncedHandleResize = debounce(function handleResize() {
    const offset = window.scrollY
    if (offset < 834) {
      this.setState({ dimensions: true })
    } else {
      this.setState({ dimensions: false })
    }
  }, 1000)

  // const handleScrollPortfolio = () => {
  // const offset = window.scrollY;
  // if (offset > 783) {
  //     setAbout(true);
  // } else {
  //     setAbout(false);
  // }
  // };
  // const handleScrollContact = () => {
  // const offset = window.scrollY;
  // if (offset > 783) {
  //     setAbout(true);
  // } else {
  //     setAbout(false);
  // }
  // };
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll)
    // window.addEventListener('scroll', handleScrollAbout)
    // window.addEventListener('scroll', handleScrollHome)
    // window.addEventListener('scroll', handleScrollPortfolio)
    // window.addEventListener('resize', this.debouncedHandleResize)
  }
  // useEffect(() => {

  //   return (_) => {
  //     window.removeEventListener('resize', debouncedHandleResize)
  //   }
  // })

  render() {
    const xxxxxxxxxx = styled(motion.div)`
      .item {
        margin-bottom: -25px;
      }
      .items {
        color: ${this.state.about ? 'blueviolet' : 'whitesmoke'};
      }
      .scrollBar {
        color: blueviolet;
      }
    `
    const NavBar = styled(motion.div)`
      .navView {
        z-index: 1;
        position: fixed;
        top: 0;
        height: 43px;
        width: 100%;
        background-color: black;
        border-bottom: blueviolet solid 3px;
      }
      .scrolled {
        position: fixed;
        top: 0;
        left: 0;
        opacity: 1;
        -webkit-animation: fadeInDown 2s;
        animation: fadeInDown 2s;
      }
    `
    const iconVariants = {
      opened: {
        rotate: 45,
        scale: 2,
      },
      closed: {
        rotate: 0,
        scale: 1,
      },
    }
    const menuVariants = {
      opened: {
        top: 0,
      },
      closed: {
        top: '-90vh',
      },
    }
    let x = ['nav']
    if (this.state.scrolled) {
      x.push('scrolled')
    }
    let xx = ['item', 'items']
    if (this.state.about) {
      xx.pop()
      xx.push('scrollColor')
    }
    let xxx = ['item', 'items']
    if (this.state.home) {
      xxx.pop()
      xxx.push('scrollColor')
    }
    let xxxx = ['item', 'items']
    if (this.state.port) {
      xxxx.pop()
      xxxx.push('scrollColor')
    }
    const scrollToTop = () => {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
    const scrollToAbout = () => {
      window.scrollTo({ top: 833, behavior: 'smooth' })
    }
    const scrollToPortfolio = () => {
      window.scrollTo({ top: 2100, behavior: 'smooth' })
    }
    return (
      <NavBar className={this.state.dimensions ? 'navView' : 'nav'}>
        {/* <motion.svg
          variants={iconVariants}
          animate={this.state.open ? 'opened' : 'closed'}
          initial={false}
          onClick={() => this.setState({ open: false })}
          className={this.state.dimensions ? 'plus' : ''}
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z"
            fill="currentColor"
          />
        </motion.svg> */}
        <motion.Nav
          initial={false}
          variants={menuVariants}
          animate={this.state.open ? 'opened' : 'closed'}
          defaultActiveKey="/home"
          as="ul"
          className={this.state.dimensions ? 'navi1' : 'navi'}
        >
          <Nav.Item as="li">
            <Nav.Link className={xxx.join(' ')} onClick={scrollToTop}>
              Home
            </Nav.Link>
          </Nav.Item>
          <Nav.Item as="li">
            <Nav.Link
              eventKey="link-1"
              className={xx.join(' ')}
              onClick={scrollToAbout}
            >
              About
            </Nav.Link>
          </Nav.Item>
          <Nav.Item as="li">
            <Nav.Link
              eventKey="link-2"
              className={xxxx.join(' ')}
              onClick={scrollToPortfolio}
            >
              Portfolio
            </Nav.Link>
          </Nav.Item>
          <Nav.Item as="li">
            <Nav.Link eventKey="link-3" className="item1 items">
              Contact
            </Nav.Link>
          </Nav.Item>
        </motion.Nav>
      </NavBar>
    )
  }
}