I am building a react web application. I am using material ui for it. I am looking to have an appbar like google inbox has (screenshot attached below). Currently I have Appbar imported from material ui module, but it just contains title , navigation icon. I want to have a search bar, profile photo etc in my app bar, just like google inbox. How can I customize it to get a design like that. Do I have to tweak with material ui's appbar (if yes then how exactly) or do I have to do something else?

[![Google Inbox Appbar](https://i.stack.imgur.com/HQacF.png)](https://i.stack.imgur.com/HQacF.png)