React 和 Tailwind 中的导航栏功能真的很奇怪，不确定如何修复它

Question

我的导航栏真的很难正常工作。

登录和注销功能显示非常奇怪，登录后，注销和仪表板按钮显示超级奇怪。

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/这是演示页面。

我将如何改进登录、注册页面的显示方式 - 以及如何让导航栏以非侵入式方式在移动模式下显示所有内容？而且，如果没问题，我如何让它变粘 - 所以当用户浏览索引页面时它停留在顶部？

谢谢！

Answer 1

您使用 Tailwind UI 有了一个良好的开端。要改善移动显示的外观，请阅读 Tailwind 的 responsive helpers. To make the navigation sticky, you can this example。