JAVASCRIPT

navbarcomponent react

import Link from 'next/link';
import React, { useContext, useState } from 'react';
//componentsHomePageNavbarNavbar.tsx
import NavbarComponent from './NavbarComponent';
import { image } from '../../../utils/data/websiteData';

const Navbar = () => {
  return <NavbarComponent navItem={['home', 'roadmap', 'utilities', 'team']} logo={image.logo} />;
};

export default Navbar;

//componentsHomePageNavbarNavbarComponent.tsx
import Hamburger from 'hamburger-react';
import React, { FC, useContext } from 'react';
import { NavbarContext } from '../../../utils/context/NavbarContext';
import useWindowSize from '../../../utils/Hook/useWindowSize';
import { Flex } from '../../../utils/styledComponents';
import { Nav } from './SingleNav';
import { AnimatePresence, motion } from 'framer-motion';

const NavbarComponent = ({ navItem, logo }) => {
  const { toggleIsOpen, isOpen } = useContext(NavbarContext);
  const { width } = useWindowSize();

  return (
    <nav className="bg-black smallSection  min-h-[10vh] py-4">
      <Flex className="flex justify-between section-wrapper flex-center">
        {/*TODO: 1)Left image */}
        <div className="w-[150px] h-auto hover:scale-105 cursor-pointer transition">
          <img className="object-cover w-full h-full" src={logo} alt="" />
        </div>

        {/*TODO: 2) Right section */}
        <div className="non-mobile">
          <ul className="h-full flex-center navbar">
            {navItem.map(item => (
              <Nav title={item} key={item} />
            ))}
          </ul>
        </div>

        <div className=" only-mobile text-secondary">
          <Hamburger toggled={isOpen} toggle={toggleIsOpen} />
        </div>

        {/*TODO: 3)Mobile section */}
      </Flex>

      <AnimatePresence>
        {isOpen && width! < 1024 && (
          <motion.ul
            layout
            initial={{ opacity: 0, height: '0vh' }}
            animate={{ opacity: 1, height: '60vh' }}
            exit={{ opacity: 0, height: '0vh' }}
            transition={{ type: 'tween' }}
            className="flex flex-col space-y-[5%]  bg-black  w-full  justify-center h-[60vh] lg:h-[0vh] "
          >
            {navItem.map(item => (
              <Nav title={item} key={item} />
            ))}
          </motion.ul>
        )}
      </AnimatePresence>
    </nav>
  );
};

export default NavbarComponent;

//componentsHomePageNavbarSingleNav.tsx
import Link from 'next/link';
import React, { FC, useContext } from 'react';
import { NavbarContext } from '../../../utils/context/NavbarContext';

export const Nav: FC<{ title: 'home' | 'roadmap' | 'utilities' | 'team' | 'faq' }> = ({ title }) => {
  const { setCurrentSection, currentSection } = useContext(NavbarContext);
  return (
    <li onClick={() => setCurrentSection(title)}>
      <Link href={`#${title}`}>
        <a className={`${currentSection === title ? 'text-secondary' : 'text-white'} px-4 font-neuro uppercase hover:text-secondary`}>{title}</a>
      </Link>
    </li>
  );
};

Reactjs Navbar component

import React, { useEffect, useState } from "react";

const NavBar = ({ menuItems = [{route: "/", label: "Home"}], brand = "Tailwind" }) => {

    const [toggle, setToggle] = useState(false)
    const [matches, setMatches] = useState(
        window.matchMedia("(min-width: 600px)").matches
    )

    useEffect(() => {
        window
            .matchMedia("(min-width: 600px)")
            .addEventListener('change', e => {
                setMatches(e.matches);
                setToggle(false);
            });
    }, []);

    const toggleHandler = () => {
        setToggle(!toggle);
    }


    const desktopMenu = (
        <ul className="flex last:pr-3">
            {menuItems.map(item => {
                return <li key={item.route}><a href={item.route} className="p-2 hover:bg-gray-100 mx-1 rounded">{item.label}</a></li>
            })}
        </ul>
    );

    const mobileMenu = (
        <ul className="flex flex-col text-center bg-gray-700 text-gray-50">
            {menuItems.map(item => {
                return <li key={item.route}><a href={item.route} className="block p-2 hover:bg-gray-600">{item.label}</a></li>
            })}
        </ul>
    );

    return (
        <nav>
            <div className="bg-gray-800 text-slate-200 flex justify-between items-center w-full">
                <div className={`flex justify-between ${!matches && "w-full"}`}>
                    <h1 className="h-14 text-2xl font-bold px-7 flex items-center">{brand}</h1>
                    {!matches && <button onClick={toggleHandler}><i className="pr-4">fx</i></button>}
                </div>
                {matches && desktopMenu}
            </div>
            {(!matches && toggle) && mobileMenu}
        </nav>
    )
}

export default NavBar;