Mój NavBar jest naprawdę trudny do prawidłowego działania.

Wyświetlacz funkcjonalności logowania i wylogowania naprawdę dziwnie, a po zalogowaniu przycisku wylogowania i pulpitu nawigacyjnego są wyświetlane super dziwnie.

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/ Jest to strona demo.

W jaki sposób wyświetlałbym się na tym, jak wyświetlany jest login, strona rejestracji - i jak mogę mieć navbar wyświetlanie wszystkiego w trybie mobilnym w sposób nieuzwodny? A jeśli jest w porządku, jak zrobiłbym to lepki - więc gdy użytkownik przegląda stronę indeksu pozostaje na górze?

Dzięki!

enter image description here

0
LeCoda 2 październik 2020, 20:36

1 odpowiedź

Najlepsza odpowiedź

Jesteś do dobrego początku od wiatrów z tyłu. Aby poprawić, jak wygląda wyświetlacz mobilny, przeczytaj o Tailwind's Responsive Helpers. Aby nawigować lepki, możesz Ten przykład.

1
leerob 3 październik 2020, 18:21