Breaking News: Grepper is joining You.com. Read the official announcement!

Reactjs Navbar component

Add Answer

Nabel Odal answered on February 27, 2022 Popularity 10/10 Helpfulness 3/10

answer Reactjs Navbar component

related react navbar component

related navbar component react

related navbarcomponent react

Reactjs Navbar component

Comment

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;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript navbar reactjs

Link to this answer
Share Copy Link

Contributed on Feb 27 2022

Nabel Odal

0 Answers Avg Quality 2/10

Closely Related Answers

react navbar component

Comment

import React from 'react';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </nav>
  );
}

export default Navbar;

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

navbar component react

Comment

import React from 'react';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
}

export default Navbar;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

navbarcomponent react

Comment

import Link from 'next/link';
import React, { useContext, useState } from 'react';
//components\HomePage\Navbar\Navbar.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;

//components\HomePage\Navbar\NavbarComponent.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;

//components\HomePage\Navbar\SingleNav.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>
  );
};

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 28 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Reactjs Navbar component

Contents

More Related Answers

Reactjs Navbar component

Closely Related Answers

react navbar component

navbar component react

navbarcomponent react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.