What is the difference?
Drawer / Side Panel vs Bottom Sheet
The difference is which edge each one is anchored to, and that decides everything else. A drawer is anchored to a side edge, so it is full height and limited width, which suits wide screens. A bottom sheet is anchored to the bottom edge, so it is full width with adjustable height, and it sits within thumb reach on a phone.
Ask yourself one question
Is the screen wide, or is a thumb going to be doing the reaching?
التنقّل
اسحبه نحو حافّته، أو Esc
Drawer / Side Panel
الدرج الجانبيrole="dialog" / inset-inline-startUse it when
Side filters, a shopping cart, or a details panel on desktop, where horizontal space is available and the context behind should stay visible.
Full entryالمطاعم القريبة
١٢ مكاناً حولك
مطعم البرج
Bottom Sheet
الورقة السفليةBottomSheetDialog / .presentationDetentsUse it when
A choice or action on a phone: a share list, an option picker, a short detail view. Adjustable heights let the surface fit its content.
Full entryThe classic mistake
A side drawer shipped unchanged to mobile, where it covers the whole screen. The result is a modal without any of a modal's advantages, and with a close gesture pointing the wrong way.
Other comparisons