Блог

Я пытаюсь создать адаптивную панель навигации с помощью tailwind. Я хочу перечислить свои навигационные ссылки с одним элементом в каждой строке, когда я открываю меню навигации. Прямо сейчас они все находятся в одном ряду. Я использую tailwind:

 function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <header>
      <div className="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
        <div className="p-4 flex flex-row items-center justify-between">
          <Link href="/">
            <a className="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">
              Header
            </a>
          </Link>
          <button
            className="md:hidden rounded-lg focus:outline-none focus:shadow-outline"
            onClick={() => {
              setIsOpen(!isOpen);
            }}
          >
            Menu
          </button>
        </div>

        <nav className={isOpen ? "flex" : "md:flex hidden"}>
          <NavLink pathTo="/" displayText="Home" />
          <NavLink pathTo="/" displayText="Page 1" />
          <NavLink pathTo="/" displayText="Page 2" />
        </nav>
      </div>
    </header>
  );
}

export default Navbar;
 

Мой компонент NavLink выглядит следующим образом:

 import React from "react";
import Link from "next/link";
interface NavItem {
  pathTo: string;
  displayText: string;
}
function NavLink(item: NavItem) {
  return (
    <Link href={item.pathTo}>
      <a className="block lg:p-4 px-4 py-2 mt-2 border-b-2 border-white text-sm bg-transparent dark-mode:bg-transparent dark-mode:hover:border-red-400 dark-mode:focus:border-red-400 dark-mode:focus:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:border-red-400 focus:border-red-400">
        {item.displayText}
      </a>
    </Link>
  );
}

export default NavLink;
 

Чего мне не хватает? Я хочу, чтобы в навигационных ссылках было по одному элементу в каждой строке при открытии из меню. Я думал display:block , что сделаю это, но, похоже, нет. Почему это?

Вам нужно добавить гибкое направление к вашим навигационным ссылкам. Добавление flex-col должно сделать свое дело.