Hardware back button support on Mobile for Material Components

#### Feature Description

Global digital report suggests that the ways in which people use the internet are evolving quickly, with mobile accounting for an ever-increasing share of our online activities. and it’s worth noting that mobile phones now account for almost half the time that people spend on the internet.

Angular Material components are already well optimized for the mobile devices, but I believe one thing is missing.

On mobile devices the native controls handles hardware back button nicely. It's very common for users to use back button to close an opened select list, close a dialog or datepicker, opened menu, or opened side menu etc on mobile, but this functionality is missing in Angular Material components.

Chrome now supports installable PWAs and Trusted Web Activities (TWA) takes PWAs to Play store.

Soon people would want to use single codebase for desktop, mobile and installable apps. And support for native gestures including back button integration would become necessity.

It would be really nice to have support for hardware back button on mobile in at least below material components:

1. Select list
2. Menu
3. Side Menu
4. Dialog
5. Datepicker

For side menu I tried handling the back button using below approach, but I believe there certainly would be a better way to handle this, and nothing matches if this support is directly added in material components:

**In template:**

```

Page 1

```
**In component:**
```
import { Location } from "@angular/common";

//called when a menu item/link is clicked
navigate(url: string) {
this.sidenav.close();
this.location.replaceState(url);
this.router.navigateByUrl(url);
}

//called when the menu opens or close
onOpenedChange(isOpened: boolean) {
this.zone.runOutsideAngular(() => {
if (isOpened) {
window.addEventListener('popstate', this.onHardwareBackButton, { passive: true });
this.location.go('side-nav');
}
else {
window.removeEventListener('popstate', this.onHardwareBackButton);
}
});
}
//called when back button is pressed
private onHardwareBackButton = () => {
this.sidenav.close();
window.removeEventListener('popstate', this.onHardwareBackButton);
};
```

Bắt đầu bằng việc xem xét các Material component được liệt kê: select list, menu, side menu, dialog và datepicker, cùng với ví dụ popstate của issue về hành vi của sidenav. Hãy xác định tương tác dự kiến với nút quay lại và phạm vi trước khi đề xuất cách triển khai; khi hoàn tất, phần triển khai phải luôn đóng component đang mở tương ứng mà không yêu cầu các handler dành riêng cho ứng dụng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.