افزودن استایل و نسخه ریسپانسیو

مقدمه

اکنون که منوی ما عملکرد کاملی دارد، زمان آن است که ظاهر آن را با استفاده از CSS بهبود دهیم. ما استایل‌هایی را برای نمایش صحیح منو در دسکتاپ و همچنین یک نسخه واکنش‌گرا (responsive) برای نمایش در دستگاه‌های موبایل اضافه خواهیم کرد.

استایل‌دهی به منوی دسکتاپ

ما از CSS Modules برای استایل‌دهی به کامپوننت‌های خود استفاده می‌کنیم. یک فایل به نام Navbar.module.css در کنار کامپوننت Navbar خود ایجاد کنید و استایل‌های زیر را برای ساخت یک منوی افقی با زیرمنوهای dropdown اضافه کنید.

CSS

.navbar {
  /* ... styles for navbar container ... */
}

.menus {
  display: flex;
  list-style: none;
}

.menuItems {
  position: relative;
  /* ... other styles ... */
}

.dropdown {
  position: absolute;
  left: 0;
  display: none;
  /* ... other styles ... */
}

.show {
  display: block;
}

این CSS منو را به صورت افقی نمایش می‌دهد و زیرمنوها را به صورت پیش‌فرض پنهان می‌کند. کلاس .show که ما به صورت پویا با JavaScript اضافه می‌کنیم، مسئول نمایش زیرمنوها خواهد بود.

افزودن نسخه ریسپانسیو برای موبایل

در دستگاه‌های با صفحه نمایش کوچک، نمایش یک منوی افقی طولانی مناسب نیست. به جای آن، ما منو را در پشت یک دکمه "همبرگری" پنهان کرده و با کلیک روی آن، منو را به صورت عمودی نمایش می‌دهیم.

۱. مدیریت وضعیت منوی موبایل

ابتدا، یک state جدید به کامپوننت Navbar برای مدیریت وضعیت باز یا بسته بودن منوی موبایل اضافه می‌کنیم.

JAVASCRIPT (React)

const [showMenu, setShowMenu] = useState(false);

۲. افزودن دکمه همبرگری و Media Query

ما یک دکمه همبرگری به JSX خود اضافه می‌کنیم که تنها در اندازه‌های صفحه نمایش کوچک نمایش داده می‌شود. سپس با استفاده از media query در CSS، استایل‌های لازم را برای نمایش عمودی منو در حالت موبایل اعمال می‌کنیم.

CSS

@media screen and (max-width: 768px) {
  .menus {
    display: none;
    flex-direction: column;
    /* ... other mobile styles ... */
  }

  .showMenu {
    display: flex;
  }
  
  .hamburger {
    display: block;
    /* ... hamburger button styles ... */
  }
}

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

در این درس، با افزودن استایل‌های CSS و استفاده از media queryها، پروژه منوی خود را تکمیل کردیم. ما یاد گرفتیم که چگونه با ترکیب state و CSS، کامپوننت‌های واکنش‌گرا بسازیم که تجربه کاربری خوبی را در دستگاه‌های مختلف ارائه می‌دهند.

با این درس، فصل «پروژه: طراحی منوی وب‌سایت» به پایان می‌رسد. شما اکنون یک کامپوننت منوی کامل و قابل استفاده مجدد در اختیار دارید. در فصل بعدی، به سراغ پروژه دوم، «ساخت تایمر»، خواهیم رفت و با مفاهیم پیشرفته‌تری در کار با useEffect آشنا خواهیم شد.