tailwind adminというのを見ていた(2) react編

reactで組まれたのもまあ一応あるらしいので。

% unzip free-react-tailwind-admin-dashboard-main.zip    
% cd free-react-tailwind-admin-dashboard-main  
% npm install 

viteがうまいことやってくれて http://localhost:5173/ が開く

作りを見ている

結局、前回理解できたのはjsの部分はほぼ差し替え可能であり、それはたとえばサイドバーの開閉や、メニューの開閉などである。

サイドバーメニューが押されたとき

src/components/Header.tsx

const Header = (props: {
  sidebarOpen: string | boolean | undefined;
  setSidebarOpen: (arg0: boolean) => void;
}) => {
  return (
    <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
      <div className="flex flex-grow items-center justify-between py-4 px-4 shadow-2 md:px-6 2xl:px-11">
        <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
          {/* <!-- Hamburger Toggle BTN --> */}
          <button
            aria-controls="sidebar"
            onClick={(e) => {
              e.stopPropagation();
              props.setSidebarOpen(!props.sidebarOpen);
            }}
            className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border

地味にタイプスクリプトでtypeが指定されているのではありますが、ボタンが押されたら

            onClick={(e) => {
              e.stopPropagation();
              props.setSidebarOpen(!props.sidebarOpen);
            }}

によって、props.setSidebarOpen(!props.sidebarOpen);がトグルするわけですナ。

これは src/layout/DefaultLayout.tsx にあり

const DefaultLayout = () => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
...
          <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />

このようになっている。

つまりDefaultLayoutではsidebarOpenというステート変数にfalse を定義している(初期はsidebarをclose)

<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />

によりこのstateをまるごと渡している(lift state up)

一方のSidebarコンポーネントはlocalstrageからこの値の復元とかをやってたり何とかかんとかするけど結局的には

        <button
          ref={trigger}
          onClick={() => setSidebarOpen(!sidebarOpen)}
          aria-controls="sidebar"
          aria-expanded={sidebarOpen}
          className="block lg:hidden"
        >

この部分でonClick時にsetSidebarOpenを通じて変数を逆転させて渡している(sidebarOpenステート変数のトグル)。あとはこのsidebarOpenの状態によって開閉をコントロールしているという、ことで、これは、何ていうかまあreactで頑張りましたみたいな所だからうまいこと移植してねという事なのかもしれない(これをそのまま使おうとしてたとえばメニュー部分の書き換えだけで果たせるだろうか…?まあ頑張ればいけんのか)

各メニューの階層構造

これは何をやってるのかというと極限までシンプルにしたのがこれ

import React, { useState } from "react";

// LinkGroup コンポーネント
const LinkGroup = ({ children, active }) => {
  const [isOpen, setIsOpen] = useState(active);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return <div>{children(toggle, isOpen)}</div>;
};

// Menu コンポーネント
const Menu = () => {
  return (
    <LinkGroup active={false}>
      {(toggle, isOpen) => (
        <div>
          <a
            href="#"
            onClick={(e) => {
              e.preventDefault();
              toggle();
            }}
          >
            Dashboard
          </a>
          {isOpen && (
            <ul>
              <li>eCommerce</li>
            </ul>
          )}
        </div>
      )}
    </LinkGroup>
  );
};

// App コンポーネント
const App = () => {
  return (
    <div>
      <h1>Dashboard</h1>
      <Menu />
    </div>
  );
};

export default App;

まこのようなリンクの開閉機構をsvgアイコンとtailwindで頑張って書いているというだけである。

という事は、この(この、っていうのはtailadminのreact)コードを理解しながらポーティングしていくか、あるいはサイドメニューを何となく書き換えてそれっぽく使ってみるとかいう二択になるとは思うんだけど、後者をやるにはあまりにもjavascriptのコード量が多いので結構しんどそうだなーというか、まあ、tailwind css自体がcssのピュアな部分しか持っていないので、こういう動きのある奴はこれくらいの作りこみのものだと、たとえばcoreuiみたいに適当な属性を付ければメニューが開いたり閉じたり、開きっぱなしになったり。みたいなのはキツいのかなあという気はしますネ