فصل 24 از 27 درس 1 از 2

طراحی Dashboard پروژه‌محور

Sidebar و Header Responsive

بخشی از آموزش جامع Tailwind CSS

محتوای درس Sidebar و Header Responsive

Sidebar و Header Responsive را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Dashboard باید اطلاعات مهم را با سلسله‌مراتب روشن نشان دهد. Sidebar در دسکتاپ فضای ثابت می‌گیرد، در موبایل به Drawer تبدیل می‌شود و KPI باید عنوان، مقدار، بازه زمانی و جهت تغییر را شفاف نمایش دهد.

روش پیاده‌سازی

  1. Shell اصلی را Mobile-First طراحی کنید.
  2. Header Sticky و Sidebar را بدون ایجاد Scroll تو در تو تنظیم کنید.
  3. KPIها و Chart Container را با Grid واکنش‌گرا بچینید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div class="min-h-screen bg-slate-100 lg:grid lg:grid-cols-[280px_1fr]">
  <aside class="hidden bg-slate-950 p-6 text-white lg:block">Sidebar</aside>
  <div>
    <header class="sticky top-0 z-40 border-b bg-white/90 p-4 backdrop-blur">Header</header>
    <main class="p-4 sm:p-6 lg:p-8">Dashboard content</main>
  </div>
</div>

خروجی مورد انتظار

Dashboard دو ستونه در Desktop و تک ستونه در Mobile.

نکات مهم و خطاهای رایج

  • Sidebar صرفاً hidden نباشد؛ مسیر دسترسی موبایل لازم است.
  • عدد بدون واحد یا بازه زمانی قابل تفسیر نیست.

تمرین پیشنهادی

برای Sidebar یک دکمه موبایل و برای KPI حالت Loading اضافه کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS