‏پنل‌ها باید از جای درست باز بشن

نویسنده می‌گه بیشتر سطح‌های کوچیک رابط کاربری، یعنی منو و توست و جزئیات هاور، با یه فید و اسکیل ساده ظاهر می‌شن. این کار بد به نظر نمی‌رسه، ولی هیچی رو توضیح نمی‌ده. قانونی که خودش روی سایت شخصیش گذاشته اینه: هر سطح باید از همون لبه یا کنترلی باز بشه که باعث ساختش شده. توست از نوار ناوبری باز می‌شه، منوی رزرو از دکمه‌ی Book a chat، و کپشن پروژه از لبه‌ی پایینی تصویر کارت.

به گفته‌ی نویسنده تصمیم اصلی فنی نیست، فضاییه: اگه چیزی چیز دیگه‌ای رو نشون می‌ده، دومی باید موقعیتشو از اولی به ارث ببره. حالت بسته هم یه درز باریکه، نه یه پنل کوچیک‌شده. برای منویی که از هدر پایین میاد از inset clip-path استفاده می‌کنه (یعنی بریدن مستطیلی سطح از چهار طرف):

.motion-unfold-menu {
  clip-path: inset(0 42% 100% round var(--radius-menu));
  transform: translateY(-0.375rem);
}

.motion-unfold-menu[data-open] {
  clip-path: inset(0 round var(--radius-menu));
  transform: translateY(0);
}

اینستِ افقی فقط یه نوار باریک وسط رو باز می‌ذاره و اینستِ پایین کل ارتفاع رو می‌پوشونه؛ موقع باز شدن، کلیپ توی هر دو جهت باز می‌شه و اون جابه‌جایی عمودی کوچیک سرجاش می‌شینه. نکته‌ی ریزی که تأکید می‌کنه: کلیپ باید همون radius واقعی سطح رو داشته باشه، وگرنه گوشه‌ها یه لحظه تیز می‌شن و کاربر بدون اینکه اسمشو بلد باشه حس می‌کنه کار ارزون‌قیمته.

تلاش اولش برای اینکه همه‌ی این سطح‌ها از یه کامپوننت مشترک رد بشن جواب نداد و کنارش گذاشت. توست توی یه ویوپورت پشته‌ای زندگی می‌کنه و جهت و z-index خودشو می‌خواد، popover نیتیو رفتار top-layer و مدیریت فوکوس داره، و کپشن کارت محتوای معمولی صفحه‌ست که روی لمسی باید همیشه دیده بشه. پس لایه‌ی مشترک عمداً کوچیک موند: یه منحنی ایزینگ، مدت ورود کوتاه، خروج سریع‌تر و آروم‌تر، و یه قرارداد نام‌گذاری.

یه باگ ظریف هم پیدا کرده که ارزش گفتن داره. انیمیشن بستنِ منو فرض می‌کرد پنل تا آخرِ جمع شدن باز می‌مونه، ولی popover نیتیو قبلش هندسه‌ای که پنل رو به تریگرش وصل می‌کرد آزاد کرده بود و پنل یه لحظه می‌پرید. راه‌حل این بود که ورود پرجزئیات بمونه ولی خروج اتمی و بی‌سروصدا باشه. نویسنده می‌گه حرکت رو نمی‌شه از روی کد و اسکرین‌شات تأیید کرد؛ خودش ضبط صفحه رو با ffmpeg فریم‌به‌فریم نگاه کرده و همین پیاده‌سازی رو عوض کرد.

نکات کلیدی:

• قانون اصلی: هر سطح جدید از همون لبه یا کنترلی باز بشه که ایجادش کرده، نه از فضای خالی صفحه
• حالت بسته یه درز باریک با inset clip-path هست، نه یه پنل اسکیل‌شده
• کلیپ باید همون var(--radius-menu) سطح رو نگه داره، وگرنه گوشه‌ها لحظه‌ای تیز می‌شن
• منوی رزرو روی popover نیتیو سواره: top-layer، light-dismiss، Escape و مدیریت فوکوس مجانی
• خروج باید کوتاه‌تر و کم‌ادعاتر از ورود باشه؛ ناپدید شدن آروم بهتر از انیمیشن شکسته‌ست