طراحی ساختار منو با چند سطح

مقدمه

به فصل یازدهم و اولین پروژه عملی این دوره خوش آمدید! در این فصل، ما یک کامپوننت منوی ناوبری چندسطحی و واکنش‌گرا خواهیم ساخت. این پروژه به ما کمک می‌کند تا مفاهیمی مانند کامپوننت‌های تودرتو، رندر کردن لیست‌ها، و مدیریت state برای تعاملات UI را در یک سناریوی واقعی به کار ببریم.

در این درس اول، ما بر روی ساختار داده منو و رندر کردن اولیه آن تمرکز خواهیم کرد.

ساختار داده برای منو

اولین قدم، طراحی ساختار داده‌ای است که منوی ما را توصیف کند. ما از یک آرایه از اشیاء استفاده خواهیم کرد. هر شیء یک آیتم منو را نشان می‌دهد و می‌تواند به صورت اختیاری، یک آرایه فرزند (submenu) برای نمایش آیتم‌های تودرتو داشته باشد.

JAVASCRIPT (React)

const menuItems = [
  {
    title: 'Home',
    url: '/',
  },
  {
    title: 'Services',
    url: '/services',
    submenu: [
      {
        title: 'Web Development',
        url: '/services/web-dev',
      },
      {
        title: 'SEO',
        url: '/services/seo',
      },
    ],
  },
  {
    title: 'About Us',
    url: '/about',
  },
];

این ساختار درختی به ما اجازه می‌دهد تا به راحتی منوهایی با هر عمقی را تعریف کنیم.

ساخت کامپوننت‌های منو

اکنون دو کامپوننت برای رندر کردن این ساختار خواهیم ساخت: Navbar به عنوان کامپوننت اصلی و MenuItems برای هر آیتم از منو.

کامپوننت MenuItems

این کامپوننت یک آیتم از منو را گرفته و آن را به صورت یک <li> رندر می‌کند.

JAVASCRIPT (React)

const MenuItems = ({ items }) => {
  return (
    <li>
      <a href={items.url}>{items.title}</a>
    </li>
  );
};

کامپوننت Navbar

این کامپوننت لیست آیتم‌های منو را دریافت کرده و با استفاده از map، برای هر آیتم یک کامپوننت MenuItems رندر می‌کند.

JAVASCRIPT (React)

const Navbar = () => {
  return (
    <nav>
      <ul className="menus">
        {menuItems.map((menu, index) => {
          return <MenuItems items={menu} key={index} />;
        })}
      </ul>
    </nav>
  );
};

در این مرحله، ما هنوز منطق مربوط به نمایش زیرمنوها را پیاده‌سازی نکرده‌ایم. اگر این کد را اجرا کنید، تنها آیتم‌های سطح بالای منو نمایش داده خواهند شد.

در درس بعدی، به «مدیریت باز و بسته‌شدن آیتم‌ها» خواهیم پرداخت و با استفاده از هوک useState، منوی خود را تعاملی خواهیم کرد تا زیرمنوها با کلیک کاربر نمایش داده شوند.