Config Sidebar در پروژه‌های واقعی React و Next.js | ساخت سایدبار داینامیک و مقیاس‌پذیر

در پروژه‌های کوچک معمولاً Sidebar به صورت مستقیم داخل کامپوننت نوشته می‌شود و همه لینک‌ها، آیکون‌ها و ساختار منوها داخل JSX قرار می‌گیرند. این روش در ابتدا ساده به نظر می‌رسد، اما با بزرگ‌تر شدن پروژه نگهداری آن بسیار سخت خواهد شد.

فرض کنید پروژه شما یک پنل مدیریت است و بعد از چند ماه تعداد صفحات آن از ۱۰ صفحه به ۸۰ صفحه افزایش پیدا می‌کند. حالا باید سطح دسترسی کاربران، Badge اعلان‌ها، منوهای چندسطحی، لینک‌های جدید و حتی تغییر ترتیب منوها را مدیریت کنید. اگر Sidebar به صورت هاردکد نوشته شده باشد، برای هر تغییر مجبور هستید چندین فایل مختلف را ویرایش کنید.

به همین دلیل تقریباً تمام پروژه‌های حرفه‌ای React و Next.js از الگویی به نام Configuration Pattern یا همان Config Sidebar استفاده می‌کنند. در این روش اطلاعات مربوط به منوها داخل یک فایل جداگانه قرار می‌گیرد و کامپوننت Sidebar تنها وظیفه نمایش آن اطلاعات را بر عهده دارد.

چرا نباید Sidebar را هاردکد کنیم؟

در مثال زیر لینک‌های Sidebar مستقیماً داخل JSX نوشته شده‌اند.

<aside>
    <Link href="/dashboard">Dashboard</Link>
    <Link href="/users">Users</Link>
    <Link href="/products">Products</Link>
    <Link href="/settings">Settings</Link>
</aside>

این روش شاید برای یک پروژه آزمایشی مناسب باشد، اما در پروژه‌های واقعی مشکلات زیادی ایجاد می‌کند.

• اضافه کردن منوی جدید زمان‌بر می‌شود.
• کد Sidebar بسیار طولانی خواهد شد.
• امکان استفاده مجدد از اطلاعات منو وجود ندارد.
• پیاده‌سازی سطح دسترسی کاربران سخت‌تر می‌شود.
• اضافه کردن Badge یا زیرمنوها نیازمند تغییرات زیاد در JSX خواهد بود.
• در صورت تغییر آدرس صفحات باید چندین فایل ویرایش شوند.

به همین دلیل در تیم‌های حرفه‌ای ابتدا اطلاعات منوها داخل یک فایل Config تعریف می‌شود و سپس کامپوننت Sidebar آن اطلاعات را نمایش می‌دهد.

مزایای استفاده از Config Sidebar

ساختار پوشه‌ها

اولین قدم در پروژه‌های واقعی، جداسازی فایل‌های مربوط به مسیرها، تنظیمات Sidebar و کامپوننت‌ها است.

src
│
├── config
│   └── sidebar.ts
│
├── routes
│   └── appRoutes.ts
│
├── components
│   └── Sidebar.tsx
│
└── types
    └── sidebar.ts

در این ساختار هر فایل مسئولیت مشخصی دارد. فایل sidebar.ts اطلاعات منوها را نگهداری می‌کند، فایل appRoutes.ts مسیرهای پروژه را مدیریت می‌کند و کامپوننت Sidebar فقط داده‌ها را نمایش می‌دهد.

مرحله اول : ساخت فایل Route

یکی از اشتباهات رایج در پروژه‌ها این است که آدرس صفحات در چندین فایل مختلف تکرار می‌شود.

به عنوان مثال ممکن است آدرس صفحه کاربران در ده فایل مختلف نوشته شده باشد.

"/users"

اگر بعداً این مسیر تغییر کند، باید تمام پروژه را جستجو کنید و همه لینک‌ها را اصلاح نمایید. راه‌حل استاندارد، ساخت یک فایل مرکزی برای Routeها است.

export const appRoutes = {
    dashboard: "/dashboard",
    users: "/users",
    products: "/products",
    settings: "/settings",
};

اکنون در تمام پروژه به جای نوشتن رشته‌های متنی، از همین فایل استفاده می‌کنیم.

href: appRoutes.dashboard

مزیت این کار این است که اگر آدرس صفحه Dashboard تغییر کند، تنها کافی است مقدار آن را در یک فایل ویرایش کنید و تمام پروژه به صورت خودکار از مقدار جدید استفاده خواهد کرد.

مرحله دوم : ساخت فایل Config

حالا زمان آن رسیده است که اطلاعات Sidebar را از کامپوننت جدا کنیم. برای این کار یک فایل به نام sidebar.ts داخل پوشه config ایجاد می‌کنیم.

import {
    LayoutDashboard,
    Users,
    Package,
    Settings,
} from "lucide-react";

import { appRoutes } from "@/routes/appRoutes";

export const sidebarConfig = [
    {
        title: "Dashboard",
        href: appRoutes.dashboard,
        icon: LayoutDashboard,
    },
    {
        title: "Users",
        href: appRoutes.users,
        icon: Users,
    },
    {
        title: "Products",
        href: appRoutes.products,
        icon: Package,
    },
    {
        title: "Settings",
        href: appRoutes.settings,
        icon: Settings,
    },
];

دقت کنید که این فایل هیچ JSX یا HTML ندارد و فقط شامل اطلاعات منوها است. هر آیتم شامل عنوان، مسیر و آیکون مربوط به خودش است. این دقیقاً همان چیزی است که باعث می‌شود Sidebar در پروژه‌های بزرگ بسیار ساده‌تر مدیریت شود.

در پارت بعدی یاد می‌گیریم چگونه تنها با چند خط کد، این Config را به یک Sidebar کاملاً داینامیک تبدیل کنیم و قابلیت‌هایی مانند Badge، سطح دسترسی کاربران و منوهای چندسطحی را نیز به آن اضافه کنیم.

مرحله سوم : ساخت کامپوننت Sidebar

حالا که اطلاعات منوها را داخل فایل Config قرار داده‌ایم، تنها کافی است آن‌ها را در کامپوننت Sidebar نمایش دهیم. به این ترتیب هر زمان که آیتم جدیدی به Config اضافه شود، Sidebar نیز بدون هیچ تغییری آن را نمایش خواهد داد.

import Link from "next/link";
import { sidebarConfig } from "@/config/sidebar";

export default function Sidebar() {
    return (
        <aside>
            {sidebarConfig.map((item) => {
                const Icon = item.icon;

                return (
                    <Link
                        key={item.href}
                        href={item.href}
                    >
                        <Icon size={18} />
                        <span>{item.title}</span>
                    </Link>
                );
            })}
        </aside>
    );
}

همان‌طور که مشاهده می‌کنید، کامپوننت Sidebar هیچ اطلاعی از تعداد منوها یا جزئیات آن‌ها ندارد و تنها اطلاعات موجود در Config را نمایش می‌دهد. این موضوع باعث می‌شود کامپوننت بسیار ساده، تمیز و قابل نگهداری باشد.

اضافه کردن Badge به منوها

در بسیاری از پنل‌های مدیریتی لازم است تعداد اعلان‌ها، سفارش‌های جدید یا پیام‌های خوانده نشده در کنار هر آیتم نمایش داده شود. برای این کار کافی است یک ویژگی جدید به نام badge به Config اضافه کنیم.

{
    title: "Orders",
    href: "/orders",
    icon: ShoppingCart,
    badge: 12,
}

حالا هنگام نمایش Sidebar کافی است وجود Badge را بررسی کنیم.

{
    item.badge && (
        <span className="badge">
            {item.badge}
        </span>
    )
}

از این پس هر آیتمی که دارای ویژگی badge باشد، مقدار آن در کنار عنوان نمایش داده خواهد شد و سایر آیتم‌ها بدون Badge باقی می‌مانند.

نمایش منو بر اساس سطح دسترسی کاربران (Role Based)

تقریباً تمام پروژه‌های واقعی دارای سیستم سطح دسترسی هستند. به عنوان مثال مدیر سیستم می‌تواند همه منوها را مشاهده کند اما یک کاربر عادی تنها به بخشی از آن‌ها دسترسی دارد.

برای پیاده‌سازی این قابلیت کافی است ویژگی roles را به هر آیتم اضافه کنیم.

{
    title: "Users",
    href: "/users",
    icon: Users,
    roles: ["admin"]
}

یا ممکن است یک منو برای چند نقش مختلف قابل مشاهده باشد.

{
    title: "Reports",
    href: "/reports",
    icon: FileBarChart,
    roles: ["admin", "manager"]
}

فرض کنید نقش کاربر پس از ورود به سیستم مشخص شده است.

const userRole = "editor";

اکنون می‌توانیم قبل از نمایش Sidebar، آیتم‌هایی که کاربر اجازه مشاهده آن‌ها را ندارد حذف کنیم.

const menu = sidebarConfig.filter((item) => {

    if (!item.roles) {
        return true;
    }

    return item.roles.includes(userRole);

});

به این ترتیب اگر نقش کاربر editor باشد، تنها منوهایی نمایش داده می‌شوند که برای این نقش تعریف شده‌اند و سایر منوها به صورت خودکار حذف خواهند شد.

اضافه کردن زیرمنو (Nested Menu)

در پروژه‌های بزرگ معمولاً همه لینک‌ها در یک سطح قرار نمی‌گیرند و بعضی از منوها دارای زیرمنو هستند. به عنوان مثال بخش محصولات ممکن است شامل دسته‌بندی‌ها، برندها و لیست محصولات باشد.

برای این کار کافی است ویژگی children را به آیتم مورد نظر اضافه کنیم.

{
    title: "Products",
    icon: Package,
    children: [
        {
            title: "All Products",
            href: "/products",
        },
        {
            title: "Categories",
            href: "/categories",
        },
        {
            title: "Brands",
            href: "/brands",
        }
    ]
}

حالا Renderer تنها کافی است بررسی کند که آیا آیتم دارای فرزند است یا خیر. اگر ویژگی children وجود داشته باشد، زیرمنو نمایش داده می‌شود و در غیر این صورت یک لینک معمولی رندر خواهد شد.

ساخت Type برای Sidebar

اگر از TypeScript استفاده می‌کنید، بهتر است ساختار Config را با یک Interface یا Type مشخص کنید تا هنگام اضافه کردن آیتم‌های جدید، خطاهای احتمالی قبل از اجرای برنامه مشخص شوند.

import { LucideIcon } from "lucide-react";

export interface SidebarItem {
    title: string;
    href?: string;
    icon: LucideIcon;
    badge?: number;
    roles?: string[];
    children?: SidebarItem[];
}

اکنون هنگام تعریف Config می‌توانیم از این Type استفاده کنیم.

export const sidebarConfig: SidebarItem[] = [
    // Menu Items
];

اگر یکی از ویژگی‌های ضروری مانند title یا icon را فراموش کنید، TypeScript قبل از اجرای برنامه به شما هشدار خواهد داد.

چرا استفاده از Type اهمیت دارد؟

تا اینجا یک Sidebar کاملاً داینامیک ساختیم که اطلاعات خود را از یک فایل Config دریافت می‌کند و از قابلیت‌هایی مانند Badge، سطح دسترسی کاربران، منوهای چندسطحی و TypeScript پشتیبانی می‌کند. در پارت بعدی با بهترین روش‌های ساخت Sidebar در پروژه‌های واقعی، نکات حرفه‌ای، اشتباهات رایج و جمع‌بندی این الگو آشنا خواهیم شد.

بهترین Practiceها در ساخت Config Sidebar

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

۱- تمام مسیرها را در یک فایل نگهداری کنید.

یکی از مهم‌ترین نکات این است که هیچ آدرس (URL) به صورت مستقیم داخل Config یا کامپوننت‌ها نوشته نشود. تمام مسیرها باید در یک فایل مرکزی مانند appRoutes.ts قرار بگیرند.

export const appRoutes = {
    dashboard: "/dashboard",
    users: "/users",
    products: "/products",
    settings: "/settings",
};

سپس در فایل Config تنها از این متغیرها استفاده کنید.

{
    title: "Dashboard",
    href: appRoutes.dashboard,
    icon: LayoutDashboard,
}

به این ترتیب اگر مسیر صفحه‌ای تغییر کند، تنها کافی است یک فایل را ویرایش کنید.

۲- از تکرار اطلاعات جلوگیری کنید.

گاهی دیده می‌شود که اطلاعات یک منو در چند فایل مختلف تکرار می‌شود. این کار باعث می‌شود احتمال بروز خطا افزایش پیدا کند و نگهداری پروژه سخت‌تر شود.

بهتر است اطلاعات هر منو تنها یک بار داخل Config تعریف شود و سایر بخش‌های پروژه از همان اطلاعات استفاده کنند.

• Sidebar
• Mobile Sidebar
• Breadcrumb
• Navigation Menu
• Search Menu

همه این بخش‌ها می‌توانند از یک فایل Config استفاده کنند.

ساخت Breadcrumb از روی Sidebar Config

یکی از مزایای داشتن Config این است که می‌توانید اطلاعات آن را در قسمت‌های دیگر پروژه نیز استفاده کنید.

برای مثال اگر عنوان صفحه داخل Config ذخیره شده باشد، می‌توان Breadcrumb را نیز به صورت خودکار تولید کرد.

const page = sidebarConfig.find(
    item => item.href === pathname
);

در این حالت اگر عنوان یک منو تغییر کند، Breadcrumb نیز بدون نیاز به تغییر اضافی به‌روزرسانی خواهد شد.

ساخت Mobile Sidebar با همان Config

بیشتر پروژه‌ها دارای دو Sidebar هستند؛ یکی برای دسکتاپ و دیگری برای موبایل.

اگر اطلاعات منوها داخل Config قرار گرفته باشند، هر دو نسخه از همان داده استفاده خواهند کرد.

<DesktopSidebar items={sidebarConfig} />

<MobileSidebar items={sidebarConfig} />

به این ترتیب با اضافه شدن یک آیتم جدید، هم نسخه دسکتاپ و هم نسخه موبایل به صورت خودکار به‌روزرسانی می‌شوند.

دریافت منوها از API

در بعضی پروژه‌های سازمانی، منوها ثابت نیستند و از سمت سرور ارسال می‌شوند. در چنین شرایطی نیز استفاده از Config بسیار مفید است.

ابتدا اطلاعات از API دریافت می‌شود و سپس همان ساختار مورد انتظار Sidebar ساخته خواهد شد.

const sidebarConfig = await fetch("/api/sidebar")
    .then(res => res.json());

از آنجا که کامپوننت Sidebar تنها وظیفه نمایش داده‌ها را دارد، تفاوتی نمی‌کند که اطلاعات از فایل ثابت دریافت شوند یا از API.

اشتباهات رایج هنگام ساخت Sidebar

چه زمانی از Config Sidebar استفاده کنیم؟

اگر پروژه شما تنها دو یا سه صفحه ساده دارد، استفاده از Config ضرورتی ندارد. اما از زمانی که پروژه دارای چندین صفحه، کاربران مختلف یا منوهای پیچیده می‌شود، این الگو یکی از بهترین انتخاب‌ها خواهد بود.

• پنل مدیریت (Admin Dashboard)
• سیستم مدیریت محتوا (CMS)
• فروشگاه اینترنتی
• سامانه‌های سازمانی
• CRM
• ERP
• پنل کاربران
• داشبوردهای آماری

در تمام این پروژه‌ها معمولاً Sidebar به مرور زمان بزرگ‌تر می‌شود و مدیریت آن بدون Config دشوار خواهد بود.

جمع‌بندی

استفاده از Config Sidebar یکی از الگوهای رایج در پروژه‌های حرفه‌ای React و Next.js است. در این روش اطلاعات مربوط به منوها از کامپوننت جدا شده و در یک فایل مستقل نگهداری می‌شوند. این کار باعث می‌شود افزودن، حذف یا ویرایش آیتم‌های منو تنها با تغییر یک فایل انجام شود و کامپوننت Sidebar بدون هیچ تغییری اطلاعات جدید را نمایش دهد.

همچنین این ساختار امکان پیاده‌سازی قابلیت‌هایی مانند سطح دسترسی کاربران (Role Based Access)، Badge، منوهای چندسطحی (Nested Menu)، استفاده مجدد در نسخه موبایل، Breadcrumb و حتی دریافت اطلاعات از API را فراهم می‌کند. علاوه بر این، استفاده از TypeScript و فایل مرکزی مسیرها (appRoutes) خوانایی کد را افزایش داده و احتمال بروز خطا را کاهش می‌دهد.

به طور خلاصه، اگر قصد دارید پروژه‌ای مقیاس‌پذیر، قابل نگهداری و مطابق با استانداردهای تیم‌های حرفه‌ای توسعه دهید، استفاده از Config Sidebar یکی از بهترین انتخاب‌ها خواهد بود. این الگو علاوه بر ساده‌تر کردن توسعه، در آینده نیز هزینه نگهداری پروژه را به میزان قابل توجهی کاهش می‌دهد.