navbar functionlity in react and tailwind is really odd nd unsure how to fix it up

Question

My navbar is really difficult to get working properly.

The login and logout functionality display really weirdly, and when logged in, the logout and dashboard button are displaying SUPER weirdly.

import Link from "next/link";
import { useState } from "react";

import { useAuth } from "util/auth.js";
import { useRouter } from "next/router";



function NavbarCustom({ fixed }) {
  const [navbarOpen, setNavbarOpen] = React.useState(false);

  const auth = useAuth();

  const router = useRouter();
  return (
    <>
      <nav className="relative flex flex-wrap items-center justify-between px-2 py-3 navbar-expand-lg bg-blue-400 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">
            <Link href="/" passHref>
              <a>
                <img
                  className="h-8 w-auto sm:h-10"
                  src="/static/logo_reduced.webp"
                  alt=""
                />
              </a>
            </Link>

            <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">
                <Link href="/about" passHref>
                  <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                    <i className="fab fa-facebook-square text-lg leading-lg text-white opacity-75"></i>
                    <span className="ml-2">About</span>
                  </a>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/pricing" passHref>
                  <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                    <i className="fab fa-twitter text-lg leading-lg text-white opacity-75"></i>
                    <span className="ml-2">Pricing</span>
                  </a>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/faq" passHref>
                  <a className="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75">
                    <i className="fab fa-pinterest text-lg leading-lg text-white opacity-75"></i>
                    <span className="ml-2">Faq</span>
                  </a>
                </Link>{" "}
              </li>
            </ul>
          </div>
        </div>
        <nav>
          <div class="flex items-center">
          {auth.user && (
            <nav>
        <div class="flex-shrink-0">
          <span class="rounded-md shadow-sm">
          <Link href="/dashboard/Calendar" passHref>
            <button class="relative inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-teal-200     hover:bg-teal-100 focus:outline-none focus:shadow-outline-indigo focus:border-indigo-600 active:bg-indigo-600 transition duration-150 ease-in-out">
              <svg class="-ml-1 mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
              </svg>
              <span>Dashboard</span>
            </button>
            </Link>
          </span>
        </div>

              

        <div class="ml-3 relative">

              <Link href="/auth/signout" passHref>
                <a
                  active={false}
                  onClick={(e) => {
                    e.preventDefault();
                    auth.signout();
                  }}
                >
                  Sign out
                </a>
              </Link>
              </div>

            </nav>
          )}
</div >
          {!auth.user && (
            <div>
              <div className="hidden md:block text-right">
                <span className="inline-flex rounded-md shadow-md">
                  <span className="inline-flex rounded-md shadow-xs">
                    <Link href="/auth/signin">
                      <a
                        className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-teal-800 hover:bg-gray-50 hover:text-black focus:outline-none focus:shadow-outline transition duration-150 ease-in-out"
                        active={false}
                      >
                        Sign in
                      </a>
                    </Link>
                  </span>
                </span>
              </div>

              <button
                variant="primary"
                onClick={() => {
                  router.push("/auth/signup");
                }}
              >
                Sign Up
              </button>
            </div>
          )}
        </nav>
      </nav>
    </>
  );
}

export default NavbarCustom;

https://newbie-54bggb4km.vercel.app/ This is the demo page.

How would I improve upon how the login, signup page are displayed - and how can i have the navbar display everything in mobile mode in a non-intrusive fashion? And, if it's okay, how would i make it sticky - so when user is browsing index page it stays at top?

Thanks!

Answer 1

You're off to a good start with Tailwind UI. To improve how the mobile display looks, read about Tailwind's responsive helpers. To make the navigation sticky, you can this example.