Почему мое меню React + Tailwind Hamburger не закрывается? - PullRequest
Новая
       17

Почему мое меню React + Tailwind Hamburger не закрывается?

1 голос
/ 27 марта 2020

Я строю меню гамбургеров с помощью React и Tailwind CSS. При нажатии на кнопку «X» я меняю состояние с isOpen на false. Класс div, который окружает меню, реагирует на изменение состояния, но меню не выдвигается. Что мне здесь не хватает?

Боковая панель. js: 

const Sidebar = () => {
  const [isOpen, toggleSidebar] = React.useState(true);
  return (
    <div className="h-screen flex">
      <div
        className={`fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r overflow-auto lg:static  lg:inset-auto lg:translate-x-0 ${
          isOpen
            ? "translate-x-0 ease-out transition-medium"
            : "-translate-x-full ease-in transition-medium"
        }`}
      >
        <div className="-mx-3 pl-3 pr-1 flex items-center justify-between">
          <span>
            <p className="h-10 w-10">Logo</p>
          </span>
          <button
            onClick={() => toggleSidebar(false)}
            className="text-gray-700 lg:hidden"
          >
            <svg fill="none" viewBox="0 0 24 24" className="h-6 w-6">
              <path
                d="M6 18L18 6M6 6L18 18"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                stroke="currentColor"
              />
            </svg>
          </button>
        </div>
        <nav className="mt-8">
          <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wide">
            STUFF
          </h3>
          <button className="mt-2 -ml-1 flex items-center text-sm font-medium text-gray-600">
            <svg
              className="h-5 w-5 text-gray-500"
              viewBox="0 0 24 24"
              fill="none"
            >
              <path
                d="M12 7v10m5-5H7"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
            <span className="ml-1">Add Stuff</span>
          </button>
        </nav>
      </div>
    </div>
  );
};

ReactDOM.render(<Sidebar />, document.getElementById("root"));

Это - кодовая ручка с моим сценарием, если это полезно:

1 Ответ

4 голосов
/ 27 марта 2020

В соответствии с документацией Tailwind вам необходимо добавить утилиту transform.
https://tailwindcss.com/docs/translate/#usage

Преобразовать элемент, сначала включив преобразования с преобразованием затем укажите направление и расстояние перевода с помощью утилит translate-x- {amount} и translate-y- {amount}.

Поэтому добавьте transform в класс. 

className={`
fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r 
overflow-auto lg:static  lg:inset-auto lg:translate-x-0 
?
transform ${
          isOpen
            ? "translate-x-0 ease-out transition-medium"
            : "-translate-x-full ease-in transition-medium"
        }`}
...