Component demo: app bar with expandable search field

[dandv]

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

A common pattern is to have a search field in the app bar, which expands when the search icon is clicked/touched. A demo of this pattern would be useful.

Spec: https://material.io/design/navigation/search.html

Current Behavior

Couldn't find such a demo at https://material-ui.com/demos/app-bar/, and the blog layout example has a dummy search button.

Examples

• https://react-md.mlaursen.com/components/autocompletes#toolbar-search with autocomplete
• https://material-ui.com/ itself showcases a search field in the app bar.
• https://teamwertarbyte.github.io/material-ui-search-bar/

[adeelibr]

Can I work on this enhancement? If that's okay

[mbrookes]

@adeelibr The docs example is a good starting point.

[adeelibr]

I have added a PR for this, I'll try to be more quick next time. #12695

I followed the docs, I hope this is the correct approach. @mbrookes