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

navbar component react using tailwind css

Add Answer

Shirshak Kandel answered on August 28, 2022 Popularity 10/10 Helpfulness 2/10

answer navbar component react using tailwind css

related react tailwind navbar

related navbar in react tailwind

related react tailwind navbar

navbar component react using tailwind css

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 typescript

Source: Grepper

Tags: navbar tailwind-css typescript using

Link to this answer
Share Copy Link

Contributed on Aug 28 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

react tailwind navbar

Comment

import React from "react";

export default function Navbar({ fixed }) {
  const [navbarOpen, setNavbarOpen] = React.useState(false);
  return (
    <>
      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-cyan-500 mb-3">
        <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
          <div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
            <a
              className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
              href="#pablo"
            >
              cyan Tailwind Starter Kit
            </a>
            <button
              className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
              type="button"
              onClick={() => setNavbarOpen(!navbarOpen)}
            >
              <i className="fas fa-bars"></i>
            </button>
          </div>
          <div
            className={
              "lg:flex flex-grow items-center" +
              (navbarOpen ? " flex" : " hidden")
            }
            id="example-navbar-danger"
          >
            <ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-facebook-square text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Share</span>
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-twitter text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Tweet</span>
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-pinterest text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Pin</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: www.creative-tim.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 24 2022

Brainless

0 Answers Avg Quality 2/10

navbar in react tailwind

Comment

import React from "react";

export default function Navbar({ fixed }) {
  const [navbarOpen, setNavbarOpen] = React.useState(false);
  return (
    <>
      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
        <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
          <div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
            <a
              className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
              href="#pablo"
            >
              pink Tailwind Starter Kit
            </a>
            <button
              className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
              type="button"
              onClick={() => setNavbarOpen(!navbarOpen)}
            >
              <i className="fas fa-bars"></i>
            </button>
          </div>
          <div
            className={
              "lg:flex flex-grow items-center" +
              (navbarOpen ? " flex" : " hidden")
            }
            id="example-navbar-danger"
          >
            <ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-facebook-square text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Share</span>
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-twitter text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Tweet</span>
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-pinterest text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Pin</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.creative-tim.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 19 2023

Imran Khan

0 Answers Avg Quality 2/10

react tailwind navbar

Comment

-1

import React from "react";

export default function Navbar({ fixed }) {
  const [navbarOpen, setNavbarOpen] = React.useState(false);
  return (
    <>
      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 bg-cyan-500 mb-3">
        <div className="container px-4 mx-auto flex flex-wrap items-center justify-between">
          <div className="w-full relative flex justify-between lg:w-auto lg:static lg:block lg:justify-start">
            <a
              className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
              href="#pablo"
            >
              cyan Tailwind Starter Kit
            </a>
            <button
              className="text-white cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none"
              type="button"
              onClick={() => setNavbarOpen(!navbarOpen)}
            >
              <i className="fas fa-bars"></i>
            </button>
          </div>
          <div
            className={
              "lg:flex flex-grow items-center" +
              (navbarOpen ? " flex" : " hidden")
            }
            id="example-navbar-danger"
          >
            <ul className="flex flex-col lg:flex-row list-none lg:ml-auto">
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-facebook-square text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Share</span>
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-twitter text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Tweet</span>
                </a>
              </li>
              <li className="nav-item">
                <a
                  className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75"
                  href="#pablo"
                >
                  <i className="fab fa-pinterest text-lg leading-lg text-white opacity-75"></i><span className="ml-2">Pin</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );
}

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: www.creative-tim.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 24 2022

Brainless

0 Answers Avg Quality 2/10

navbar component react using tailwind css

Contents

More Related Answers

navbar component react using tailwind css

Closely Related Answers

react tailwind navbar

navbar in react tailwind

react tailwind navbar

Grepper

Documentation

Social

Legal

Contact

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