Navbar Example using : Tailwind CSS , React , React Router ,

Question

59 views6 days agoWeb Developmentnavbar tailwind taliwind navbar example

0

Tailwin (anonymous) 6 days ago 0 Comments

Image :

import { Link } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; import { themechange } from "../Utils/userslicer";


export default function Navbar() {

  const dispatch = useDispatch();

  const user = useSelector((store) => store.user.status);
  const theme = useSelector((store) => store.user.theme);

  const darkMode = theme === "dark";
  return (

    <nav className="w-full p-4 bg-white dark:bg-black flex justify-between items-center rounded-full shadow-md dark:shadow-lg fixed top-5 left-0 right-0 z-50 mx-auto max-w-7xl px-6">

      <div className="flex items-center gap-2">

        <img

          src="https://nileshblog.tech/wp-content/uploads/2023/12/NileshBlog.Tech-Software-Development-Learning-Problem-Solving-Platform.svg"

          alt="DevStudio Logo"

          className="w-32 h-8 dark:invert"

        />

        <span className="text-black dark:text-white font-semibold text-lg">

          NB

        </span>

      </div>

      <div className="flex gap-6">

        <Link to="#" className="text-gray-700 dark:text-gray-300 px-6 py-2 rounded-full hover:ring-2 hover:ring-black dark:hover:ring-white">

          Home

        </Link>

        <Link to="#" className="text-gray-700 dark:text-gray-300 px-6 py-2 rounded-full hover:ring-2 hover:ring-black dark:hover:ring-white">

          Home 2

        </Link>

        <Link to="#" className="text-gray-700 dark:text-gray-300 px-6 py-2 rounded-full hover:ring-2 hover:ring-black dark:hover:ring-white">

          Home 3

        </Link>

      </div>

      <div className="flex items-center gap-4">

        {!user ? (

          <>

            <button className="bg-black text-white dark:bg-white dark:text-black px-6 py-2 rounded-full font-semibold hover:ring-2 hover:ring-black dark:hover:ring-white">

              Login

            </button>

            <button className="bg-black text-white dark:bg-white dark:text-black px-6 py-2 rounded-full font-semibold hover:ring-2 hover:ring-black dark:hover:ring-white">

              SignUp

            </button>

          </>

        ) : (

          <button className="bg-black text-white dark:bg-white dark:text-black px-6 py-2 rounded-full font-semibold hover:ring-2 hover:ring-black dark:hover:ring-white">

            Dashboard

          </button>

        )}

        <button className="rounded-full px-2 py-2 bg-gray-300 dark:bg-transparent hover:ring-2 hover:ring-black dark:hover:ring-white" onClick={() => dispatch(themechange())}>

          {darkMode ? "☀️" : "🌙"}

        </button>

      </div>

    </nav>

  );

}

Tailwin Asked question 6 days ago

0 Answers