ایجاد منوی کشویی (side drawer)

Side Drawer

0 99

ایجاد منوی کشویی در ری اکت (side drawer)

در قسمت قبل toolbar را کدنویسی کردیم اما هنوز منوی کشویی در ری اکت را ایجاد نکرده ایم. منوی کشویی معادل responsive نوار toolbar برای گوشی های موبایل است. برای شروع کار در پوشه ی Navigation یک پوشه ی جدید به نام SideDrawer بسازید که حاوی فایلی به نام SideDrawer.js باشد. در ابتدا محتوای SideDawer.js مانند تمام کامپوننت های کاربردی دیگرمان و به شکل زیر است:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

ما می خواهیم در این تابع کلاس های CSS را به صورت پویا تغییر بدهیم تا منوی کشویی وارد صفحه شود یا با بسته شدن آن از صفحه خارج شود؛ فعلا به جای این کدها از یک کامنت با چند نقطه استفاده کرده ایم اما بعدا کدهای آن را تکمیل می کنیم. همچنین از آنجایی که می خواهیم از آیتم های navigation استفاده کنیم، این کامپوننت را import کرده ایم و نیازی به دوباره نویسی کدها نیست.

برای تکمیل کدها می نویسیم:

یعنی لوگو و آیتم های navigation باید درون این کامپوننت باشند، اما کجا باشند؟ درست است باید آن ها را استایل دهی کنیم بنابراین در کنار فایل SideDrawer.js یک فایل به نام SideDrawer.module.css ایجاد کنید و کلاس ها و استایل های زیر را در آن قرار دهید:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

نکات مهم:

  • z-index از عمد بالاتر از مقدار backdrop است تا زیر آن نرود و کاربران بتوانند با آن تعامل داشته باشند.
  • اضافه کردن transition برای ایجاد انیمیشن است.
  • در صفحاتی با عرض بیشتر از 500 پیکسل display را none گذاشته ایم تا منوی کشویی در دستگاه های بزرگ مانند لپتاپ ها دیده نشود.
  • کلاس های open و close به صورت پویا و توسط جاوا اسکریپت به عنصر اضافه یا حذف خواهند شد. کلاس open مقدار translatex صفر دارد یعنی عنصر در جای خودش قرار می گیرد (کلاس اصلی top و left را صفر قرار داده بودیم، یعنی به همانجا برمی گردد). کلاس close نیز عنصر را 100 درصد روی محور x ها جا به جا می کند که قاعدتا از Viewport کاربر خارج خواهد شد.

حالا به فایل SideDrawer.js برگردید تا از این کلاس ها استفاده کنیم. ابتدا باید کلاس ها را import کنیم:

سپس آن را به Div ریشه ای اضافه می کنیم:

در این مرحله باید از خودمان بپرسیم که SideDrawer را کجا قرار دهیم؟ درون App.js یا درون Toolbar یا جایی دیگر؟ اگر یادتان باشد Toolbar را درون Layout.js قرار دادیم و گفتیم که دلیل آن حضور Toolbar در تمامی صفحات سایت است. با همین منطق می توانیم SideDrawer را نیز در Layout.js اضافه کنیم. محتویات فایل Layout.js پس از اضافه کردن SideDrawer:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

اگر فایل ها را ذخیره کنیم و به مرورگر برویم چیزی مشاهده نمی شود. چرا؟ به دلیل اینکه گفته بودیم در دستگاه هایی با عرض صفحه ی بیشتر از 500 پیکسل SideDrawer نباید نمایش داده شود اما اگر سایز پنجره ی کروم را کوچک کنید و یا دکمه ی پیش نمایش mobile را از dev tools بزنید (قسمت مشخص شده در تصویر زیر)، SideDrawer را مشاهده خواهید کرد:

پیش نمایش منوی کشویی
پیش نمایش منوی کشویی

همانطور که می بینید اصلا ظاهر خوبی ندارد؛ لوگو بسیار بزرگ است و دکمه های navigation نیز پراکنده شده اند. البته جای تعجب هم ندارد چرا که ما هنوز آن ها را برای صفحات کوچک تنظیم نکرده ایم.

اگر یادتان باشد در فایل Logo.module.css مقدار height برای لوگو را 80 درصد قرار داده ایم:

به همین دلیل است که لوگو آنقدر بزرگ نمایش داده می شود. برای حل این مشکل راه های مختلفی وجود دارد؛ مثلا می توانیم با استفاده از media query ها یک طراحی Responsive را پیاده سازی کنیم اما اگر چنین کاری را انجام دهیم، استفاده ی دوباره از لوگو سخت تر می شود. هدف ما این بود که بتوانیم بدون کدنویسی اضافه از کامپوننت ها استفاده کنیم اما با طراحی Responsive باید هر بار برای لوگو media query بنویسیم. بنابراین در فایل Logo.module.css مقدار height را روی 100 درصد قرار بدهید:

حالا اندازه ی لوگو را درون Toolbar و SideDrawer تغییر می دهیم. ما می توانیم Toolbar.js را باز کرده و مقدار height را به صورت یک prop به فایل خودمان پاس بدهیم:

سپس به Logo.js می رویم و این prop را دریافت کرده و با استفاده از استایل های inline مقدار را تغییر می دهیم:

حالا وارد SideDrawer.js شده و همین کار را انجام دهید:

اگر فایل ها را ذخیره کنید و به مرورگر بروید متوجه می شوید که مشکل ما از نظر اندازه ی لوگو حل شده است:

لوگو با سایز مناسب قابل مشاهده است
لوگو با سایز مناسب قابل مشاهده است

البته یک روش دیگر هم وجود دارد که می خواهم آن را به شما نشان بدهم. در روش دوم حل این مشکل به جای پاس دادن اندازه ی height این کار را می کنیم:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

سپس به فایل Toolbar.module.css می رویم و کلاسی به نام Logo را به آن اضافه می کنیم:

همین کار را با SideDrawer.module.css انجام می دهیم:

حالا وارد فایل SideDrawer.js شده و این کلاس را به div مورد نظر بدهید:

مشاهده این قسمت تنها برای افرادی که اشتراک جادویی داشته باشند، امکان‌پذیر است. با خرید اشتراک، به همه مطالب جادویی روکسوپلاس دسترسی داشته باشید.

اگر فایل ها را ذخیره کرده و به مرورگر بروید با همان نتیجه ی قبلی روبرو می شوید:

لوگو با سایز مناسب قابل مشاهده است
لوگو با سایز مناسب قابل مشاهده است

نکته: شاید فکر کنید که کلاس های Logo با هم تداخل پیدا می کنند اما ما از CSS Module ها استفاده می کنیم؛ یعنی در هنگام ایجاد برنامه نام این کلاس ها تغییر پیدا می کند (مثلا می شود Logo_Logo__3Ndfk) بنابراین هیچ تداخلی پیش نمی آید.

هر دو روش، روش های خوبی هستند و استفاده از آن ها به سلیقه ی شما بستگی دارد. در قسمت بعد آیتم های navigation را سر جایشان قرار خواهیم داد.

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle